top of page

Redesigning Employee Management

DaySmart Software / 2025

Project 1 phones.png

Overview

This project focused on updating the outdated UI and optimizing the workflow of the DaySmart Salon software, with minimal back-end changes. The Employees module was prioritized for the redesign due to its importance to business owners and the presence of broken features. The goal was to create a mobile-first responsive interface that salon owners and employees can seamlessly access throughout their business day.

Role

As the sole UX designer in the Salon business unit, I independently led the project while actively brainstorming with UX peers from other units and collaborating closely with the Product Manager and engineers to align with business goals and navigate technical constraints.

User Research

This project utilized a mix of qualitative and quantitative research methods to uncover key insights. The research aimed to understand:

  1. What users do on the Employees page

  2. How workflows can be improved

  3. Which features have low usage and how to enhance them

  4. Users' pain points and unmet needs

Jobs-To-Be-Done Tree

We began the redesign by defining key Jobs-To-Be-Done, which helped me better understand users' goals on the Employees page. By putting ourselves in the users' shoes, we explored the intent behind each action—asking why they click on certain input fields and what they hope to accomplish.

Employees - JTBD.png

Fig: Jobs-to-be-done tree

Key insights include:

  • Quick Onboarding for New Employees: Streamlining the creation flow by showing only required fields, with the option to add details later, to help managers get new employees ready quickly.

  • Celebrating Employee Milestones: Surfacing key dates like birthdays and hire dates directly in the employee list to help managers celebrate milestones.

  • Efficient Appointment Rescheduling: When an employee leaves, showing their upcoming appointments helps managers quickly reschedule with customers and avoid disruptions.

Usage Data Analysis

Next, we analyzed usage data with Pendo, a product engagement tool, to identify opportunities for workflow improvements and enhance low-usage features. We examined click rates, time spent on workflows, and user navigation patterns, including the pages or features they accessed after visiting the Employees page. Key findings include: 

  • Search Bar Over Filter Usage: Users relied on the search bar significantly more than filters when navigating the employee list. As a result, we ensured that the search bar remains accessible in the mobile view, enabling users to quickly find employees.

  • View Mode vs. Edit Mode: Data showed that users were more likely to view employee details rather than edit them. To improve this experience, we introduced a dedicated view mode, allowing users to find and absorb information in a more structured and organized way.

User Interviews

With the quantitative data in hand, we gathered qualitative insights through user interviews and surveys from our salon owners to understand user pain points and desires, receiving valuable feedback from our users.

"I need a place to view all employee related information. Jumping between pages is a waste of time."

Store Counter

"I want to be able to add notes for an employee, just like I can for a client."

Barber Portrait

"Deactivating an employee is a pain. Once I remove them, they disappear from the appointment book, and all their future appointments are gone. We even had a customer come in once, saying they had an appointment, but we couldn’t find it."

Several key pain points are identified:

  • Centralized Employee Information: Managers wanted a centralized view for commissions, payroll, schedules, and more, as switching pages disrupted their workflow.

  • Employee Notes: Managers highlighted the need for a dedicated space to record management notes for each employee, allowing them to track performance and other important details more efficiently.

  • Clearer Employee Deactivation Process: The current deactivation process is confusing, with both “Deactivate Employee” and “Deactivate Cloud Account” buttons. Users need clearer naming conventions and a streamlined workflow for deactivating employees.

  • Appointment Transfer on Employee Deactivation: When an employee is deactivated, their appointments vanish, disrupting schedules. To ease the transition, a user suggested exporting the appointments—including customer contacts—to Excel. Since the project focused on front-end improvements, this workaround avoided major back-end changes.

Conceptualization

The project's goals were to streamline the workflow and make the webpage responsive. After conducting a content audit while analyzing usage data, we began the design by focusing on visual hierarchy. After several iterations and brainstorming sessions with fellow UX designers, we conceptualized the layout through wireframes.

Solutions

In addition to optimizing the workflow and addressing the issues mentioned above, we revamped the visual design and UI elements by creating a new design system. This system features cohesive color schemes and adheres to Material Design 2 principles. Key solutions include:

Responsive Design and Single Column Layout

Recognizing that users access the software on laptops, tablets, and mobile phones, the new design ensures the UI functions flawlessly across all screen sizes, providing a seamless experience on any device. In addition, the previous three-column layout added cognitive load and reduced reading efficiency. We implemented a one-column layout to streamline the user experience, improve readability, and maintain consistency across devices.

responsive.png
old.png

OLD

new.png

NEW

Optimized Employee Setup with Optional Fields

To address user requests, we added fields like emergency contact and employee notes. However, displaying too many optional inputs risked slowing down the onboarding process. To balance flexibility and efficiency, we introduced a 'Show Optional Fields' toggle—allowing managers to quickly add new employees with just the required info, or expand the form to enter more details as needed.

A Centralized View Panel for Employee Information

Users expressed the need for a centralized hub to easily browse all employee-related information without jumping between multiple pages. In response, we designed the View Panel—a single location that consolidates key details such as employee performance, schedules, wages, and commissions. This feature empowers managers to quickly access the information they need, streamlining their workflow and supporting more informed, timely decisions.

view panel mobile.png
view panel desktop.png

Improved Employee Deactivation Flow

After identifying several gaps in the employee deactivation flow, we chose to implement solutions in phases to balance user needs with project goals. Phase 1 focused on a simple yet effective enhancement: providing an Excel export containing appointment details and customer contact information, allowing business owners to track and reschedule appointments even after an employee is removed from the calendar. Additional improvements ensure that reports and payroll reflect the deactivation accurately.

In future phases, we aim to introduce a more automated deactivation process that accommodates various employee termination scenarios.

Screenshot 2025-04-09 at 10.12.56 PM.png

Usability Evaluation

There were several key reasons for conducting a usability evaluation. Not only is the Employees module critical for users, but it was also important to ensure satisfaction with the new design as this project served as the first in a series of front-end redesigns. Before handing off the final design to the engineering team, we conducted an unmoderated prototype usability test using Maze.

The test spanned 2 weeks and included 3 tasks, each followed by corresponding questions. We gathered feedback from 10 users. The results indicated that most of the design was well-received, with some valuable feedback regarding access and permissions, as well as suggestions for incorporating additional data and features into the employee central hub.

Employees - Usability Test_02102025.png

Fig: Heatmap of the Add Page from Usability Testing

89%

Task Completion Rate

4.4/5

Satisfaction Ratings

"I was happy to see an area for an emergency contact for the employee. This was a recent conversation we had in our business so it would be great place to easy access."

"I love the ease of being able to view each individual employee both performance and notes wise."

Project Learnings

I'm especially proud of this project because it was one of the rare opportunities where we weren’t assigned a predefined task. Instead, we followed a product discovery framework and leveraged extensive research to uncover what truly needed to be built. Managing a project of this scale was challenging, but I’m grateful we completed the full design cycle—from discovery to delivery. I learned a lot from this experience, and here are my top three takeaways:

  • User research is everything 🔬
    Extensive research gave me the confidence to advocate for users and design solutions that truly address their needs. Once again, it proved how essential it is to ground design decisions in real user insights.

  • Small visual tweaks can make a big impact 🖍️
    Through rounds of iteration and experimentation with color, layout, and spacing, my fellow designers and I saw firsthand how even the smallest visual changes can significantly improve the interface—both visually and cognitively.

  • Collaboration is king 🤝
    I had the pleasure of working with a detail-oriented product manager and a talented engineer. Even though this was the first project in a larger initiative—and involved setting up new frameworks and processes—strong communication and teamwork made it all possible.

© 2025 by Tsai-Yu Han
Proudly created with Wix.com

bottom of page