‘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
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
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
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 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
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.
I deleted the Dashboard page and merged the time off and Dashboard page to create less tabs.
I quickly sketched few ideas in pen and paper before going for prototyping
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.
In version 2 , all the different sections are placed under horizontal tabs with the most used tab is open by default.
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.
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 2.1 — Different way to display documents
Helpful message is added when the page is empty. The page also gives the user relevant message while adding or deleting any document.
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?
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.
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.