Project Overview
A leave management SaaS web app that helps companies manage employee time-off requests in a very easy way. The app offers many features that make it a centralised platform for all leave management needs: managing different allowance types and policies, company holidays, limiting the amount of employee time-offs at specific dates, overtime compensation, and many others.
Role: UX designer
Main tool: Figma
Audience: Company owners and managers, who are usually not tech savvy
Duration: January 2024 → Present
My Role
We were in the middle of creating a new design to replace the old one. Our goal with the new design is to solve any usability issues that users had in the old design. My work lay in redesigning the old version by translating these issues, which we discovered through the support calls, into more intuitive designs for the new version. This ultimately results in less usability friction, saving both the users and the business precious time.
My role also involved updating the design system as needed and making the design components visually consistent and eye-pleasing.
Below are some examples of usability issues that I solved with my redesign.
Redesign Example 1: Allowance Calculation for an Employee
Old Design
Some of the problems with this UI:
- Its not clear what the “Set as Unlimited” option does
- The edit button may not be clear for all users
- It’s not clear that the “red lock” button is actually a button, nor what it does
- The plus ‘+’ and minus ‘-’ operations may be confused for buttons. It is not entirely clear what they do.
- If users have to see more info about an allowance without editing it, they’d still have to press the edit button. It is not immediately clear that it’s what they have to do, and they may get distracted by the edit functions when they just want to read more info.
New Design
Solutions
Redesign Example 2: Maximum Employees on Leave
Old Design
Some of the problems with this UI:
- It is not immediately clear what the table is about
- It is not clear how high the maximum number of employees on leave shown in the ”Maximum on Leave” column actually is, relatively to the total number of employees
- There is no clear visual distinction between company limits and department limits
- Overall, the table is too monotone, lacking in visual distinctions and colour that makes it easier to read through
New Design
Solutions
Redesign Example 3: Time Picker Component
Old Design
Users found this time picker component confusing and difficult to use.
New Design
This is the new time picker component as laid out in the new design system, as it appears in the Figma file.
I made the component as simple as possible. Users are able to select the hour and minute from a dropdown menu.