Redesigning HRLocker Timesheet and Absence management for regular users

Image for post
Image for post

About HRLocker

Image for post
Image for post

Why I decided to work on this project?

Image for post
Image for post

What is the main problem I am trying to solve?

Image for post
Image for post

Who are the users I am solving this problem for?

Image for post
Image for post

What’s my role in the project?

Image for post
Image for post

Solution / Redesigned UI

Image for post
Image for post
Image for post
Image for post

Process —

Image for post
Image for post
Image for post
Image for post
Existing UI for Dashboard Tab
Image for post
Image for post
Image for post
Image for post
Existing UI for Time off Tab
Image for post
Image for post
Existing UI for “Who’s off” tab
Image for post
Image for post
Image for post
Image for post
Existing UI for Directory Tab
Image for post
Image for post
Image for post
Image for post
Existing UI for HR Docs Tab
Image for post
Image for post

Redesign —

Image for post
Image for post
Image for post
Image for post

Wireframes —

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Redesigned Dashboard

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

Redesigned Directory Tab

Image for post
Image for post
Image for post
Image for post

HR Docs Tab

Image for post
Image for post
Version 1 — Redesigned HR Docs empty state
Image for post
Image for post
Version 1 — Redesigned HR Docs with data
Image for post
Image for post
Version 1 — Modal to add document
Image for post
Image for post
Confirmation Before deleting a document
Image for post
Image for post
Image for post
Image for post
Version 2.0 — Redesigned HR Docs empty state
Image for post
Image for post
Version 2.0 — Redesigned HR Docs with data
Image for post
Image for post
Image for post
Image for post
Version 2.1 — Redesigned HR Docs with data
Image for post
Image for post

Testing

Image for post
Image for post

Testing Results

Image for post
Image for post
Version 1 Test results
Image for post
Image for post
Version 2 test results
Image for post
Image for post
Version 3 Test results
Image for post
Image for post
Existing UI
Image for post
Image for post
Winner UI Version 3 — Fastest response time with 100% accuracy.
Image for post
Image for post

Learnings from redesign —

Image for post
Image for post
Image for post
Image for post

Thank you :)

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store