Improving the Clock-in Experience for Users

July - October 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.

MY ROLE

Product Designer | YOOV

I led the end-to-end UX and UI design, from defining the problem to delivering the final visual artifact.

THE TEAM

Solo designer, with guidance from a Lead designer, 1 Product Manager and 4+ engineers.

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

PROBLEMS

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?

Attendance and clock-in were originally designed for small businesses. Hence the experience started breaking when scaled to handle complex working times across different industries. How might we empower our diverse users to use Attendance and clock-in in the way they want, while making it simple, delightful and uncomplicated to use.

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

Overview of the old experience

The user of clock-in

Clock-in is used by different personas across varying roles in businesses, education, and retail. In addition to our direct customers, even our customers' customers (end-users) fall under our user pool.

Administrator

Admins are usually responsible for setting up an attendance, adding people and services on clock-in, and configuring it when needed.

Manager/Supervisor

Manager or supervisor view team attendance, approve/reject time-off requests and modify/adjust attendance records.

HR Personnel

Access attendance records, like track leave and overtime.They also process attendance-related documents.

Employee

Employees clock in/out and view their own attendance history. They will submit time-off requests and view schedules or accumulated hours.

Process

We kicked off the process with a comprehensive experience review of the current experience with the employee

Design Goals

The experience review also helped us define our focus areas for the redesign.

⭐️ Flexible

Clock-in should seamlessly adapt to variable levels of information density across industry verticals.

Simple

Clean out the clutter, and help users easily complete their tasks.

PROCESS

Identifying and prioritising user jobs

A comprehensive list of user jobs across personas were framed and stack ranked.

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 if the new designs addressed the existing problems. I wrote a script that included two scenarios: one in which the user selects a shift and clocks in, and another where the user applies for a missing clock-in record.

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 success message to make it more obvious and increase the duration of the 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.

Back to top!