Designing a HRMS software & making management easier : A Case Study

vikash surin
6 min readFeb 25, 2024

I was hired as an UI/UX intern in a particular company. I am not mentioning the company’s name as I am not sure if it’s the right thing to do.

About the company

The company dealt with Technology — website, App development and Metaverse. They had some really good and innovative products, and I also got a chance to work on a metaverse project and it was really exciting, but that story is for a different post.

Since all the company’s assets and employees were being managed manually, there was a need for a HRMS software to manage everything efficiently. The target users were HR managers, employers and employees. And this story is about me working on certain but important parts of HRMS software as a UX designer. It was a lot of fun and learning. We had a team of 2 and I worked on the first half of the project under the guidance of my senior(other team member).

Summary

We were making a one stop tool for everyone in the company, be it the managers or employers. Users could log into their account and based on their position they had the authority to access certain parts of the software and perform certain actions.

Before, the Hr manager had to manually enter employee data such as personal information, attendance records, etc. Doing everything manually is time consuming and may have to maintain several document files. As well as any employee who wants to take a leave have to manually attach an email and tag appropriate people to it and then mail it. All of the things were getting done but they were not efficient enough.

So these were some of the major problems but not all of them, which could be solved to improve the efficiency of the company’s management.

so let’s get started, I am not the best writer but I will try my best.

Login- mandatory for every user.

The employees and the managers needed to login into software in order to make use of it. Existing members could log in via email and password with a 2 factor-authentication. While for the new members it was join via email invite.

New members login user flow
New Members login screens
Existing members login screens.

Profile

After successful login, they land inside the software. And the member is required to setup the profile by filling the details.

This Screen has 3 states, (i) Profile incomplete screen (ii) Profile details verification pending screen (iii) Profile completed screen, and the option to view complete profile details.

In this screen we decided to group and divide the information in multiple tabs in order to easily find and update profile information later on.

Complete profile screen

Timesheet

In this section employees are needed to fill and update everyday tasks on a regular basis. This is mandatory.

Adding a task to timesheet

As we can see on the below attached screenshot.

2nd row has couple of input fields to add task and hours and select a project as well Add task button which insert the task in the list of tasks.

The tasks are added in the list from the 3rd row onwards.

Timesheet mini form.

Timesheet main screen

i. The top section shows a detailed summary of the timesheet.

ii. The bottom section shows detailed timesheet for every particular day.

iii. One could view the all the timesheet i.e. old and current time period. Option to toggle between list and grid view. Right and left arrow buttons to navigate through timelines.

iv. The data in the timesheet can be crucial for analysis so one could easily export the data in csv or other offered formats.

Timesheet, list view and grid view.

Attendance

Top section in the attendance screen is about the Attendance summary of the profile.

Top most section — brief summary of the attendance

2nd section is the attendance graph for the current year or any chosen year. The boxes represent each day where green boxes are present days, reds are absent, yellow boxes are half days and so on.

2nd section — Attendance graph

3rd section displays the information related to the leaves. And certain actions like managing team leaves depends upon the designation of the employees. for instance, managers and those in positions above them hold the authority to approve or deny leave requests from their team members.

Leave management section- position above and equal to managers has the authority to accept or reject the application leave.

4th section contains two tabs —

  1. My leaves — This sub-section displays all the upcoming leaves that have been applied.
  2. Apply for leave- This sub-section allows the employees to apply for leave.
Card component of a leave request.

While designing the apply for leave section we tried to minimise the steps it takes to make a leave request.

My leaves tab

Information architecture and Research

We created a design system to maintain consistency, easily manage and update the reuseable components and for better developer hand-off.

Design system consisted of buttons, menu items, tags, icons, etc.

Usability testing was done within the other departments of the company and with user feedback, appropriate changes were made. for instance minimising the no of steps taken to apply for a leave.

It took us 4–5 weeks to come up with the first version of the product. This project was my first real big project and not only it was interesting but it helped me re-discover my self and motivation to be a UX designer.

Key take aways from this internship

  1. When addressing a specific issue, it’s crucial not to prematurely conclude and implement solutions that aren’t currently needed. For instance, in my own experience designing screens for the asset section, I initially opted to create multiple tabs for various asset categories. However, upon further consideration, I recognised that such categorisation was unnecessary. It became evident that the number of assets was limited enough to be efficiently managed within a single list. One could easily get carried away.
  2. I often pondered the necessity of design processes. To satisfy my curiosity, So I conducted an experiment. And after that with experience, I realised that during the midst of a project when our minds are preoccupied, it’s incredibly easy to become lost. It was during these moments that I found design processes to be invaluable. They serve as maps and guides, providing much-needed direction and structure to every project.

--

--