Redesign employee leave management web app — Case study

Madhu Sudhan
7 min readMar 3, 2021

E-wave is an employee leave management portal it's dealing with real-time attendance and leave management. The main aim of this portal is to track employee attendance and work logs.

Why this app redesign

E-wave is one of the best employee management apps, but its design looks outdated and employees are seldom missing their goals due to a lack of discoverability. They mainly missed work log and attendance regularization etc, the management was decided to redesign the application after continually hearing bad reviews from employees.

My role
I led the project and worked on all aspects of the design system. Including visual design, and user experience design. I also revamped the UX of key pages while my managers helped me implement my designs. I strongly believed that solving user pain points are the most important factor for app success.

⌛️ I had 2 weeks to do it.

I did more research on startups and tech companies that are used by good HR systems. Understanding the employee pain points, and frustrations while using the software.

I decided to apply the design thinking process.

User interviews

I started recruiting participants for my user interviews. I made sure that I include a variety of people here and gives representation to all sorts of groups. I decided on 5 people 2 HR managers and 2 employees, 1 team manager.

Their insights and experience allowed me to gain a good understanding from different perspectives on the use of existing systems within the company.

A number of key insights and pain points I identified were:

  1. The application is not user friendly
  2. Employees hesitate to use this application it is a tedious process to complete one goal.
  3. Many users are frustrated with entering timesheets due to a lack of discoverability.

The questions I asked were about user-centred and web-based leave management apps. For example, I asked questions related to:

  1. applying leave,
  2. leave status,
  3. work environment,
  4. Time log

What I understood is that what users do and what they say are completely different. The correct way is to observe and ask what kind of goals they are going to achieve.

Examining Leave management apps

To better understand user pain points and frustrations, I did a Competitive Analysis on leading apps that are good at leave management systems.

I did research the above leave management apps

Reviewing these systems was in particular useful for:

  • Looking at all kinds of different ways on leave management systems can be lead to making our product more user-friendly than others.
  • Understanding what are the more important features which are needed to be in my product.
  • The differences between what the employee needs to see and the information a manager needed.
  • Seeing different workflows for booking time off from the employees' perspective and reviewing from the managers. This helped my user flow.

Job To Be Done Framework
Considering the end-user, I created a Job Story based on the Jobs to Be Done framework. I created the following job stories based on interviews with the main users of Ewave:

Prioritising pain points on a 2x2 matrix

We created a 2x2 matrix based on the user interview and prioritized the pain points which would be important to the business and the user.

Finding problems based on employees' experience

Based on Affinity Diagram I identified what exactly the user needs.

Information Architecture

Information Architecture for a Leave management app

Pain Point 1: There isn’t any visibility on team holidays.

The user tends to check the availability of employees so that they can arrange meetings.

Pain Point 2: Employees might forget compensative leaves because of a lack of visibility.

Employees felt very bad when they miss a compensative leave from leave data. As per company policy employees must apply within 60 days otherwise it will expire automatically.

Pain point 3: There are some unnecessary sections to the employee, it is quite clumsy.

When the user reaches the dashboard there are plenty of other things occupied like e-Registration, bug tracker etc.

Pain point 4: When the user's login into the Ewave home page, they don’t know what is the primary goal to complete.

Pay point 5: Employee difficult to get payslips, he/she needs to send mail to the HR manager and they will send him via mail-in pdf format, this is taking tedious process.

Pain Point 6: Many referring jobs are postings through the mail but employees don’t know how much money they can earn, whom to contact, and which team job is required.

Ideation

After understanding the user's needs and the pain points. Then it was time to jump into the ideation phase.

Through rapid sketching, we generated multiple potential design solutions to each of the pain points.

Rough sketch for the Home screen

Wireframes

Website Wireframe using Figma

Design Process

UX laws can help us to create better aesthetic usable interfaces and minimize the complexity for the user.

Miller Effect: Most adults can store between 7 (plus or minus two)items in their short-term memory. So based on miller’s law we have placed only six major action items on the list. So we have decreased the cognitive load.

Mockup based on the Miller Effect with high fidelity.

Fitt’s Law: As per Fitt’s law I placed the search option closer to the action list and left the top so that the employee can easily navigate the search input.

Mockup based on Fitt’s Law with high fidelity.

Law of Uniform Connectedness: Elements that are visually connected are perceived as more related than elements with no connection.

Mockup based on the Law of Uniform connectedness with high fidelity.

Design Solution

Pain Point 1: There isn’t any visibility on team holidays.
Solution:
The user can easily view when the manager or an employee going to take time-off through the home page widget and easily switch teams, user can check who is not available on a particular day.

Pain Point 2: Employees might forget compensative leaves because of a lack of visibility.

Solution: Sometimes employees are working even weekends due to finishing the project within the deadline, so they need not lose compensatory offs, I kept this an important notification on the homepage, it shows/notifies employees 15 days before compensative leave expiry.

Pain point 3: There are some unnecessary sections to the employee, it is quite clumsy.

Solution: I’ve given that least importance so the user was able to focus on what matters to him.

Pain point 4: When the user's login into the Ewave home page, they don’t know what is the primary goal to complete.

Solution: Due to overwhelmed work, people have missed filling the timesheet and attendance regularizations, as per management protocol if any employee miss timesheet they can deduct one day from his/her leave balance.

On the home page, I kept what is most important to him which are available leaves, missing timesheets, and missing attendance regularization in widget format so they never forget to fill the timesheet and they won’t lose leaves.

Pay point 5: Employee difficult to get payslips, he/she needs to send mail to the HR manager and they will send him via mail-in pdf format, this is taking tedious process.
Solution:
There is a section for payslips, user can view/download payslips (up to 5 years) from this portal. It is one of the navigation buttons on the left panel.

Pain Point 6: Employee referring jobs are postings through the mail but they don’t know how much money they can earn if refer someone, whom to contact, and which team their job is required.
Solution:
I’ve provided a widget on the home page which shows job requirements and the user can easily check all information about the job based on team and

Prototype

Lessons Learned

The key lesson I learned from this project, is that design is a never-ending process. If our product/design needs to succeed and sustain in the market means we need to systematically redesign our product by performing the latest design trends.

--

--