Improving the Clock-in Experience for Users

2022

OVERVIEW

Previously, YOOV WORK faced significant issues such as missed clock-ins, time conflicts, inflexibility, and uncertain start and end times.

We aimed to address these issues and deliver a more comprehensive, reliable, and convenient YOOV WORK experience for companies and users.

ROLE

Product Designer | YOOV

I worked closely with PM and engineer team. I led the end to end UX and UI design, from defining the problem to deliver the final visual artifact.

Background

Clock-in has always been the most important feature of YOOV WORK. As we restructured the brand, we decided to improve the feature and the user experience of clock-in.

This is an opportunity

  • Complete and flexible clock-in system to alleviate the workload of the company's HR department.
  • Enable employees to record their attendance time using clock-in accurately.
  • Make everything easier of clocking in out of office.

PROBLEM

SOLUTIONS

Problem

Clock-in had a bad reputation before

  • Decrease in work efficiency: The Personnel Department needs manpower to handle staff's punching records in some cases, e.g. overtime work and working on holidays.
  • Confusion: The current system for clocking in and out of multiple shifts is not flexible. If a user forgets to clock in for the first shift and then tries to clock in for the second shift, it will cause an error and record it as off-duty.
  • Uncertainty: Employees are unable to select their clock-in or clock-out times, and they do not receive any feedback after clocking in.
  • Incorrect communication: Inappropriate icons lead to the dissemination of inaccurate information.

But why?

The lack of flexibility and problems with the clock-in logic result in a negative experience:

Goals

01

Enhance the user's clock-in experience and ensure the accuracy and flexibility of the clock-in time.

User Level

02

Increase their satisfaction and retention rate. Help companies reduce labor costs, improve work efficiency, and ensure that accurate employee clock-in times are collected.

Company Level

Ideation & Hypothesis

As a product designer, I worked closely with PMs, and the entire team to clarify the direction, despite taking some detours along the way to achieve this goal.

Create a highly flexible and comprehensive clock-in mechanism to improve employee attendance and HR processes.

The new clock-in mechanism

  • Users can choose the purpose before each clock-in, for example, whether they are starting work, leaving work, working overtime, etc.
  • Enable HR to establish specific time slots for employee clocking in and out to improve the management of employee attendance.
  • Reorganize the clock-in/clock-out mechanism to make it easier for users to clock-in/clock-out
The key design challenges emerged

How should we effectively explain the new clock-in system to our users?

We had a series of working sessions and design jams to ensure a smooth experience for user.

Usability Testing

We conducted usability testing sessions with users from different backgrounds to validate whether the new designs would solve the problems. I wrote a script including two scenario asking the user to select a shift and clock in on mobile devices and to apply supplementary card for a missing card.

The testing revealed small vulnerabilities in the structure of the user interface, in some formulations and interactions. In addition, the users asked smart questions, which led to further improvements.

Analysis

I relied on a data-driven approach known as the severity framework to inform my process and list usability issues in order of priority. The framework helps to identify the severity score of a usability issue based on the following four variables:

Screen criticality x task criticality x observation type x frequency = severity

Finding & Insights

SUMMARY /
  • 100% of users found that it was easy to miss the supplementary button due to a lack of visual hierarchy
  • 50% were frustrated that the Next button was disabled so they could not identify which were missing required fields
  • 33% of users felt that the real-time clock was drawing too much attention and the clock-in button was not obvious enough.
SOLUTIONS /
  • Make button larger or more obvious and modify positon of 補卡 button
  • Modify the clock in/out sucess message to make it more obvious and increase the duration of clock in/out sucess message
  • Make clock in/out button larger or more obvious

Design
Solutions

For the UI, I wanted to create a refreshing, minimalist and clean UI that conveyed trustworthiness and progression for future-oriented individuals.

Project Takeaways

This project was one of the most complex ones I've worked on in terms of workflow. It required a careful clarification of the product logic. There are loopholes in the old YOOV WORK clock-in mechanism, and the team isn't completely confident about winning users' favor.

However, our business requires our courage and wisdom to break through and overcome this challenge.

Simplicity was about reducing complexity, not quantity

If an added extra step led to a more intuitive and error-free experience, it was worth the additional manual effort.

Utilize your team's insights

We continuously define scenarios and conduct brief user interviews, which help us maintain empathy for users and prevent bugs.