Employee Monitoring System (Web Application) — A UX Design Case Study

A simple business process automation feature that can resolve all your leave management concerns.

😎Why you should consider me?

In this project, I have built the UX flow to automate and manage employee leave-related issues for a consulting firm. I can understand the HR community well and the employee privacy importance. Therefore, you should consider me. Read along to understand how I did it. ⬇️

A Storyset illustration

The Task

The brief was to design an automation triggerable feature that can incorporate and resolve all the leave management concerns of the company.

1. Validate and enhances the overall experience of the site.
2. Rebuild the Information Architecture (IA) for the website to meet the needs of the admins (HR) and the employees.
3. Make sure that the designed website is in line with the brand’s identity and guidelines.

My Understanding

•Action list with prioritization

•Employee self service/Profile management

•Translating input into HR specific initiatives

•Team dynamics development

•Deliver results and make everyone successful

Secondary Research

After reading various articles on the internet about employee monitoring system and how employees waste time to achieve their personal goals. I came to the below conclusions:

•Employees waste 2 hours a day

•50% of employees prioritize working on personal commitments

•70% of adult trafficking between 9 and 5

•53% of resources are used in cleaning and inventory

Automation and its triggers

You don’t need an HRMS (Human Resource Management System) Software to solve your leave management problems — a simple business process automation tool can alleviate all your concerns.

Triggers:

•Giving employees a clear picture of the HR policies

•Their past performance

•Leave approval workflow

•Streamlining HR Audit

•The team’s time-off calendar (Spreadsheet is not enough!)

Wireframing

I iterated on the wireframes for the web application to come up with layouts that serve the essential features of those pages without hampering the user experience.

After making rough sketches, I moved to Figma where I iterated with several different layouts for the screens as well as screen components.

Style Guide

From the wireframes, I chose a few crucial screens and experimented with different color combinations and typeface combinations.

•Since it is an employee monitoring web page that is mostly used in daytime, I decided to keep the UI in light mode.

•This will also enhance the readability of information given regarding various actionable buttons and features.

•Does not strain the eyes of the users.

Visual Design

I iterated different layouts and used the component library to fasten the process. Then I designed different screens (taking into consideration the edge cases as well) for the website. I iterated and improved upon the visual designs based on the numerous feedbacks that I received.

▪Dashboard

This screens consists of all the quick links and is equipped with all the necessary functionalities.

▪Calendar

In this screen the admin will be able to monitor all the low, medium and high level of events happening inside the company. This will act as a catalyst for them to assign leaves to the employees as per the requirement.

▪Employees

Through this screen, the admin will be able to not only monitor the total count of employees present in the company but will also be able to segregate them based on their designation and will be aware of who is involved in which respective project.

▪My profile

This screen is particularly designed with regards to the employees. The users of this application will experience freedom and a sense of liberty, when they will be able to request for leaves, changes in their profile, monitor their leave balance, have a transparency in the company.

My Challenges

While working on this project I faced these 3 major challenges:

1. Logo’s unique aesthetic —

The company’s logo if you have noticed by now is in grey shades, which turned out to be challenge for me in terms of selecting the color scheme that will blend with such a unique logo. As I had to make sure that the designed website is inline with the brand’s identity and guidelines.

2. Userflow —

I had to not only design for the Admins (HR) of the company but also for the employees. The users of end product will be both the ways. Hence, maintaining privacy on both the fronts was a challenge for me.

3. Knowledge accumulation —

This was a remote project, I had minimum access to the actual end users of the product. Depending on the secondary research I drew the conclusions and designed accordingly. Therefore, knowledge accumulation turned out to be a challenge with this regard.

Ideation

Along the way of designing a solution for the leave management module for the company, many other scope of improvisations crossed my path. I ideated and prioritized on the following features as the solution of other pain points of the users:

•Hiring Management

•Attendance Module

•Engagement Module

•Performance Management System

•Exit Module

Ways for Evaluation

Working remotely can be confusing and misleading. When working in isolation it becomes necessary to evaluate your work to avoid errors later. Therefore, there are three ways of evaluation that I followed for this project:

•5 W’s and 5 Why approach — To help me arrive at a conclusion.

•Deductive Methodology — To avoid any personal bias.

•Qualitative Research — To accumulate knowledge regarding the industry.

References

•A Guide to Better Employee Leave Management | Lucidchart Blog

•Leave Management Process — Top 4 Challenges in Leave Management (kissflow.com)

•Employee Monitoring Software | Workpuls

•HR Issues: Common Problems Employees Have With HR (paychex.com)

•What is Leave Management? — Employee Leave (deskera.com)

•Monitoring Employee Productivity: Proceed with Caution (shrm.org)

•Tracking and Managing Leave | Human Resources | University of Colorado Boulder

•HRMS — All you need to know about HR automation and HRMS | peopleHum

•The future of HR automation (and AI) (hrmsworld.com)

•HR Automation — The Future of HR Process Management (kissflow.com)

That’s a wrap I hope you found it insightful. If you have any questions, feel free to reach out to me on LinkedIn, Instagram or website.

Thank you for reading till the end! Did you know? You can hold that clap button for a few seconds to give a maximum of 50 claps. I would really appreciate it. See ya!