Designing a Desktop Widget for HR management

HRMS helps HR directors manage the entire company’s HR on the same platform and streamline communication and workflow between employees and managers. To make the task even more easy, we have widgets. Widgets helps an employee from going back to the software each time inorder to do a routine task.

The Process Used

The actual process contains five steps which includes, discover, define, ideate, prototype and test. However, owing to the tight deadline, testing part is saved up for later.

https://www.testingtime.com/en/blog/double-diamond-process/

Discover

I conducted a heavy discovery phase focusing on user research to get to know the people’s goals, priorities, frustrations and behaviours during using an HR software. I analysed the existing market of HR Softwares and noted possible areas of opportunity to better meet user needs, as informed by primary and secondary research.

Define and Ideate

I delivered a concise strategy by articulating needs and beliefs of a HR software. I identified core pain points that people usually experience while using a software. I articulated a vision for how the new screens would look like, and then prioritise which ones would go into the Desktop Panel.

Prototype

I developed an information architecture which is focused on the reason for selecting certain features to be added into the widget based on the target group.

— 01 Target Users

The target Users are classified based on different HR profiles. They include:

  1. Entry level profiles which includes Staffing Coordinator, Staffing Specialist, HR Assistant, HR Associate, HR Representative, HR Administrator, HR Analyst etc.
  2. Mid level profiles which includes HR Specialist, HR generalist, HR Supervisor
  3. High Level profiles which includes HR Director, HR manager, CHRO, VP, President etc.

Given the deadline, and consideration of two extremities, Let’s consider only entry-level profiles and high level profiles. Also, there is a need to include regular employees who are not a part of the HR team, but has to communicate with the HR team.

The Target Users would be

  1. HR managers / Directors
  2. HR Associates / Specialists
  3. Regular Employee who is not a part of the HR team

— 02 Goal

Provide a widget so that the user does not have to open the software all the time to do a particular task that they do frequently. Simplify HR management and provide insights through a desktop information widget which is highly usable to everyone and not just for the HR.

  1. Develop a research — informed understanding of why, how and when people use Desktop Widget and what features to put in it.
  2. Understand the current challenges that people face while using HR softwares.
  3. Design a desktop widget that improves the user experience by clearly defining and prioritising the needs.

Duration

3 Days

Tools

Figma, Illustrator, FigJam, Google Forms

Phases

User research — design strategy — interaction design — wireframing and prototyping — UI Design.

— 03 Problem Statement

After deciding on the goals, problem statement was defined

Prioritising tasks and selecting only the most relevant ones to be shown in the widget.

— 04Challenges

Sort the data based on priority for each Target Users ( Manager/Director, Regular Employee and HR Associate/Specialist) and display only the most relevant and important data through the desktop widget. Make complex things simple and more understandable

— 05 Define

Primary Research

In order to better understand the user needs and behaviour, I conducted surveys and interviewed and recruited people who had experience with HR and also people who had experience communicating with an HR. Feedback was collected through a google form and then common patterns were observed from the research. Using the information which is provided by a stakeholder has a better chance to help make an effective design. A questionnaire containing different set of questions for each of stakeholders were prepared and distributed. Data was collected and general patterns were observed.

User Demand Analysis

Through Research, it can be seen that the HR software in the market has exceeded for demand as there are a lot of HR softwares. It still cannot solve the efficiency problem fundamentally. Data is scattered, work efficiency is low and the HR is overburdened. At this point, a centralised platform that connects all HR tools is really important. After the software’s landing page has been made, the widget will be designed. Through the surveys and interviews, two key personas emerged. These personas helped to highlight some core suer priorities. People want a design that would save their time, capture their goals and motivation and feel in control, without any confusion.

User Personas of three different Target Groups

Secondary Research

Since I had no idea how a HR Team worked, I did research on it and this is what I found out.

  1. Core functions of a HR team

Staffing,

Development,

Compensation,

Safety and health, and

Employee and labor relations.

2. What is HRMS?

Applicant Tracking

Employee Onboarding

Performance Management

Attendance and Time

Leave Management

Employee Offboarding

3. Need of an HRMS?

Data management

Employee self service

Easy reporting

Efficiency and cost effectiveness

Improved employee engagement

4. Benefits of HRMS

Better communication across the organization

Reduce costs and administrative burden

Ensure consistency and timely data analysis

— 06 Summary // Selection of functions for widgets

Most of the functions have different levels of authority and data has different sensitivity levels.

Workflow: Initially, all the different tasks and functions of the HR team was studied. A system called Pagination and Grid Widget, where all the important widgets are displayed as widgets on different pages.

Users can add or delete widgets according to their own needs to achieve a fully personalised interface which ensures consistency in design and coding between various professional roles.

After doing this, the widgets are sorted based on priority and then categorised and contracted into a desktop widget.

Some of the main points where were given attention, were:

1. Stimulate the layout of the widgets, which helps reduce learning costs

2. Using colours to distinguish between different prioritised matters.

3. Using responsive widget system to help maintain consistency.

— 07 Solutions based on Pain Points

There can be different widgets which can be categorised based on role-based access control system which consists of the following roles.

1. Main Admin: Has the highest authority, rights and control — the Director and Managers.

2. Admin: Has access to specific departments and subsidiaries

3. Sub-Admin: Has only the authority of the department and cannot access information from other departments.

Experience Optimisation: It is better when we always start from the user’s purpose, which helps us to understand the difficulties they face, if the process is reasonable and if it is too complicated. Based on different Target Groups, The landing page and the information on widgets were classified and prioritised.

For complete brainstorming, click here: https://www.figma.com/file/AeHmWUVDHqzJPv10At1w5z/HR-management-Brain-Storm?node-id=0%3A1

— 08 Information Architecture and Wireframe

Informed by both primary and secondary research findings, I drafted an application map to organise content and features, I considered the priorities that the research participants indicated as important. The application map and user flow informed the key screens that I developed in the first set of low-fidelity wireframes.

Information Architecture and Wireframes

— 09 Design

I Used Figma to make the wireframes dynamic so that I would be able to evaluate how people engage with the proposed onboarding screen and identify sources of user error and frustration early in the design process. However, as time was running out, I was not at liberty to conduct Customer Usability Testing.

Desktop Widget for HR Director / HR manager
Desktop Widget for HR Director / HR Manager
Desktop Widget for a Regular Employee who is not a part of HR Team
Desktop Widget for a regular employee who is not a part of HR Team
Desktop Widget for HR Associate / HR Specialist
Desktop Widget for HR Associate / HR Specialist

— 10 Visual Design

After reviewing my findings from the initial research phase, I observed that many of the existing products ( Softwares) use contrasting colour palettes, but is pretty much dull in terms of design and usability. The main colours which were used, are Blue, White and Grey, which evokes a sense of trust and stability. I experimented with colour palettes that would convey some of the same values and characteristics of existing softwares, but would also convey professionalism, reliability, productivity and efficiency. Throughout the design process, I checked the colour contrast of elements to ensure visibility. While colour choices support the overall tone of the widget and the software, the process strives to be accessible for users who are low vision and colour blind.

— 11 Solving the Problem

  1. Different Target Groups were given different colours to distinguish between different uses of softwares.
  2. The widgets are customised based on each Target Group’s Profile
  3. They can be further customised easily through the software landing page

— 12 Lessons Learned

The Main Lessons that I learned from completing this project are:

  1. The value of conducting user research with business employees
  2. Scenarios, use cases and stories are very valuable in identifying what users wish to achieve with a system, so it will be helpful to decide what features they will need to achieve that.
  3. Prioritising requirements for the desktop widget as there is limited time to develop it.

Thank you for your time!

--

--

--

Storyteller | My Husband Calls me Monkey

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Tech at N26 — The Bank in the cloud

Blueprint: Year In Review

TUGAS PENGEMBANGAN APLIKASI BERGERAK (Lesson 5.3)

What is the difference between scrum and agile methodology in project management?

Update #2

Developing Android messenger apps: Kotlin or Java?

Android fundamentals 03.1: The debugger

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
Swathi Rose

Swathi Rose

Storyteller | My Husband Calls me Monkey

More from Medium

Taxes and patient forms: a reflection on emotional design and shared authority

A tax form with a dollar bill and calculator

Week 12: UXD720 UX Design

Good user experience doesn’t grow in trees

Enterprise UX Design in Practice

an ancient file cabinet with many labeled drawers.