UI/UX Case study: Zed an Optimization HR applications

Zed, a one-stop solution HR app

Problem:

HR application users experience a lot of anxiety because of the inefficiency in doing attendance and performing the payslip feature, which is very complicated and time-consuming.

Initially, this problem was raised from the HR Talenta application. My team and I are trying to analyze what is the main problem in this application. Then I was shocked that some users commented that their salaries were cut due to the difficulty of taking attendance because the system was complicated and errors sometimes happened. In addition, we found the user flow of the payslip feature is way too long. Thus, I found myself excited about this problem and this would be an interesting topic to explore.

What can be done to overcome this problem?

After looking back at the reviews on the AppStore and play store, we get insight from users that the main problem is in the attendance flow and payslips. So from the results of the research, I tried to cut the attendance flow to give the user more time to do attendance on time.

Then for the payslips problem, removing the flow input password to access the payslips every month and implementing a fingerprint to make it easier for users to check the payslips without manually inputting the password.

Process and Timeline

Case Study: Zed a One-Stop Solution Hr App

Stage 1: Empathy

During this phase, we try to conduct in-depth analysis by capturing their needs, thoughts, feeling, and motivations through app review so that we can solve their problem. There are three things that we need to prepare to conduct the research itself, such as Research Goals, Research Objectives, and Research Questions.

Research Goals:

Optimization of HR app in Indonesia

Research Objectives

Understanding user’s painpoints when using HR app especially Talenta

Competitive Analysis Before beginning this project, we investigated the HR application Talenta.

Talenta: Integrated online HR application for employee management during WFH

Storyboard

Stage 2: Define

User Persona

Defining Problem 1. The user flow is too complex when we want to do attendance, so it takes a long time / confuses user 2. The application does not accurately record the attendance that the user has made 3. The process of checking payslips is quite complicated because it takes quite a long time 4. There are no mobile features that can help users when experiencing problems with attendance

Designing the Solution 1. Optimize user flow when doing attendance 2. Provide a help desk feature so that it can help users who experience problems during absenteeism 3. Improve the flow when the user checks payslips to be more efficient

Stage 3: Ideate

UI Design

Zed is the British name for the letter Z. An example of zed is the common map book used in London called the A to Z, pronounced a to zed. noun. Also, z (read “zed”) means omega in the Greek alphabet. I named this app Zed since I believe that this would be the last and latest makeover HR app. Then I came up with the yellow round flash-shaped that I got from Figma, which means fast or quick like a flash.

Flowchart

Sitemap Using the concepts from the brainstorming session, I designed a sitemap in which I arranged and categorized all of the app’s features and general navigation.

Wireframe Then I began the wireframe process with some simple concepts to determine the overall structure and information flow.

Stage 4: Prototype

Onboarding Screen

2. Clock-in

3. Payslip

4. Clock-out

5. Helpdesk

Stage 5: Test

Usability Testing (UT)

I made a schedule for some participants online using discord and WhatsApp for Usability Testing, this will help measure whether the design is useful, easy to understand, and easy to use.

After the UT, I gained some feedback from them that the app is overall good and there is no blocker when doing the UT tasks. However, I notice some points that matter. I highlighted 4 out of 6 feedback that were vital the most to the development of this UI.

“Using too many icons, UI is not consistent”-mba Tita
“The flow of the application is good and the features are quite complete. Just broadcasting for those whose help desk buttons are not highlighted, but overall it’s good”-mba Shabika
“Had a problem with the bullet option not wanting to be selected, when I wanted to fingerprint the display on the screen was cut off so I didn’t know that there was a fingerprint part (the resolution wasn’t quite right), and the initial appearance of the application was simple but the color was less conspicuous from one part to another so it couldn’t be seen a significant difference”-mba Alexa
“Some text is way too small”-mas Aubrey

SUS Result Sus test result = 70,84 (acceptable-good)

Key takeaways 1. Reduce Icons so that the UI is more consistent 2. Fix the helpdesk button to ease user reporting problem 3. Fix the bullet option (payslip) 4. Resizing the text so that users can read easily

More detail about UT

Final Prototype

https://www.figma.com/proto/3f5v2my1DDq6FcFwHd1zsy?kind=&node-id=431%3A3764&page-id=309%3A2188&scaling=scale-down&starting-point-node-id=431%3A3793&fuid=1125984352374653632

Closing

At this stage, I would like to thank my mentor Mas Adi and my UI/UX teammates, as well as readers. There are still many things that need to be improved not only from the design but also from the research. Personally, it takes a lot of practice and learning from sources that support me in improving my skills through design and empathizing with users in the future.

Thank you for reading~:)

Case Study: Zed a One-Stop Solution Hr App