Redesigning HRLocker Timesheet and Absence management for regular users

About HRLocker

‘HRLocker is a SaaS People Management platform. HRLocker helps your HR migrate into the cloud with Timesheets, Performance Management, Records and Reports all accessible from anywhere with a handy software.’

Website — https://www.hrlocker.com/

Why I decided to work on this project?

As in my current job, we use HRLocker for timesheet and absence management , I ofter find the interface less user-friendly with lots of unnecessary UI elements in the screen which complicates the UI and harms the very reason why the user visits the application.

As a regular user, these are the functions I usually do in HRLocker application

  • Apply for leave
  • Check if leave is approved
  • Check how many leaves are left in my account

1. The first thing I noticed was that at once, the page looks really content heavy and dense. The excess information makes the page seem intimidating and as a result harms the overall experience.

2. The overall navigation was also inconsistent and presented the user with too many options to choose from.

So I decided to redesign the HRLocker platform to declutter the UI, improve the usability and make information easy to discover. The end result I am aiming is a clean and user friendly UI.

What is the main problem I am trying to solve?

Present Situation —

The HRLocker platformUI has too many elements which are pretty unnecessary to any regular non admin user which clutter the UI and make it difficult for the users to find relevant actions and information.

The error prevention in the UI is really bad thus the user end up entering data and then re entering after the error occurs.

So I am redesigning the HRLocker platform to declutter the UI, improve the usability and make information easy to discover. The end result I am aiming is a clean and user friendly UI.

Who are the users I am solving this problem for?

  • Regular / Non — admin users who use HRLocker for Absence management

What’s my role in the project?

  • Heuristic Evaluator
  • UI Designer
  • Usability Tester

Solution / Redesigned UI

Process —

Before I started with redesigning the interface, I did heuristic evaluations and interviews. Based on that here are the results I found for existing UI

Dashboard Tab

Existing UI for Dashboard Tab

In the existing UI named Dashboard, it shows Recent Events and Upcoming Events.

I asked 5 of my colleagues and found they never clicked on this page. Also my heuristic evaluation suggested that this page is unnecessary with data which is not of any significance as for announcing events, we just use Emails (most companies do) and why would anyone subscribe to this?

Thus after the evaluation, I decided to delete this entire page.

Time off Tab

Existing UI for Time off Tab

This page is the most important page and the most visited page. This page allows users to apply for leave, lodge sick leave, view the applied leaves and also to view who is off.

My heuristic evaluation found issues with the data entry forms. Any input which has less than 5 options, it is better to use checkboxes instead of dropdown. Also the date selector, doesn’t indicate visually how it works.

The interface that too many elements and most users use only one area -Request Time off.

Who is off section is also not easy to use as the user constantly have to look up and down to understand which colour code indicate which status.

Directory Tab

Existing UI for Directory Tab

Directory tab lists all the employees and most of the employee do not visit this.

Heuristic evaluation suggest extremely inconsistent visual design which is just painful to look at. Also, in terms of usability, none of the UI elements are helpful for eg. in the search, it doesn’t suggest what kind of input does it take, can the user enter name or Employment ID.

The pagination is looking inconsistent and position of elements is also inconsistent.

HR Docs Tab

Existing UI for HR Docs Tab

Most employee suggested during interview that they should be able to add documents on their own so that they can keep the data safe in cloud.

Redesign —

I deleted the Dashboard page and merged the time off and Dashboard page to create less tabs.

Wireframes —

I quickly sketched few ideas in pen and paper before going for prototyping

Redesigned Dashboard

Version 1

For version 1, I removed the Bar graphs as the user doesn’t need to compare the numbers of leaves and just replaced it with description and digits.

Instead of looking at all the different leaves sections, now the user can see only the most relevant section first (Apply for Leave) as the users visits this page mostly for 2 actions -

  • See how many leaves are left
  • Apply for leave

So, this UI has a vertical tabs section on the left where all different leaves sections are abstracted and visible only on click. This allows the user to view the most important section without getting distracted by other sections.

Version 1 — Redesigned Dashboard Tab

Version 2

In version 2 , all the different sections are placed under horizontal tabs with the most used tab is open by default.

Version 2 — Redesigned Dashboard

Version 3

In the version 3, I am using Progressive disclosure. The user can see only one action i.e Apply for leave. The user can click on the button to view all other sections, which will be viewed as a modal.

In this version, by default the user can see how many leaves are awaiting approval.

The leaves information is improved further with Balance leaves are displayed in larger font size as compared to other as it is the most important information.

The data form is improved and the approver name is added to help the regular user to contact the approver in case of any issue.

Version 3 — Redesigned Dashboard empty state
On Clicking the Add Leave button, different options are available.
Version 3 — Redesigned Dashboard with data
To apply for leave

Redesigned Directory Tab

All the filters and search is moved to one place., Also, in the place of Who is off option, the user can see who is Available and who is on leave directly from the Directory, thus reducing one more page and making the application faster.

Also the search suggest what kind of input it will take.

HR Docs Tab

Version 1

Version 1 — Redesigned HR Docs empty state

Version 2

Version 2.0 — Redesigned HR Docs empty state

Version 2.1 — Different way to display documents

Version 2.1 — Redesigned HR Docs with data

Helpful message is added when the page is empty. The page also gives the user relevant message while adding or deleting any document.

Testing

To test if the redesign was successful, I did a first click testing to check if the users can discover the features after the redesign.

For click testing I used optimal workshop and I asked the participants question such as-

  • Where would you click to apply for leave?

In the existing UI , the participants approximately took 25 seconds to find the feature and use it.

So I gave the test participants all the 3 Redesigned versions to check which one performs the best.

With first click testing, I was testing two factors -

  • Is the redesign feature easy to discover?
  • Is the redesign easy to understand?

Testing Results

Version 1 Test results
Version 2 test results
Version 3 Test results

On an average, the redesign had better accuracy and the users interacted with the UI faster than existing UI.

But Version 3 was clear winner with users taking on an average only 7.23 seconds to recognise and discover the redesigned feature.

In terms of visual design, they preferred the new design to the existing UI.

Existing UI

Redesigned UI performed much faster than existing UI by a margin of avg. 15 seconds.

Learnings from redesign —

  • Reduce the number of action buttons and keep it very relevant.
  • The UI with only one call to cation button performed the best as users were able to recognise it really fast.
  • The CTA button should be well accessible and the user shouldn’t have to scroll down to reach it, so it should be on the top.

Thank you :)

Click on this link to go to my UX Portfolio.

Pritish Krishna Panda

Written by

UX Designer @Blueface. Minimalist, photographer and visual storyteller. Find me on www.pritishkpanda.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade