Clock in and clock out experience redesign

Indeed is the #1 job site worldwide, with over 350M+ unique visitors per month. It owns Indeed Flex, a temporary staffing app that offers users (shift workers) access to work at their fingertips. 

The company envisioned to provide an effortless, accurate and reliable time capture experience for workers, while also enabling efficient processing and verification of time data for other stakeholders.

In this project, I had the opportunity to redesign the clock in and clock out experience for the UK market in collaboration with different stakeholders.

Introduction

When users book jobs through the app, they can register their shifts working times directly in it. Although this fraction of the experience was working relatively well, it was far from being the best. The Time & Attendance team aimed at providing a more frictionless and accurate experience.

Indeed Flex operates in the UK and the US, providing users access to jobs considering the local regulations. This means, in some cases the flows in the UK aren’t exactly the same than in the US. In other cases, some capabilities are active only in one territory and not in the other, as in the case of this project.

The focus was to redesign the clock in / out experience for the UK market. Yet, still in the future there were plans of unifying the designs in both regions. For this reason in the design process I also considered the US flow.

When I joined to work in this project, the development team already was working on some features of the software. It was a modality of 3D modelling with some unique features. For example, the user could “pull” surfaces and generate solids and details from it, which was an innovative way of generating 3D.

Users wouldn’t have to concentrate in the technical aspects of 3D modelling as they directly could start creating. Nevertheless, the software required UX work to improve its usability and make it user-friendly.

Key challenges

When I joined the team, the design lacked a clear user-centred focus of the desired clock in/out method. 

The interface provides 2 ways to clock in and clock out:

  • One is direct (buttons), which requires location permissions. This method enables quick payments as the data goes directly to IndeedFlex.

     

  • The other is a QR code, that is an alternative method when the first can’t be used, but payments take longer. This is because the time data stays at the clients’, and then they need update their timesheets to process payments. 


As the interface lacked hierarchy, organisation and the right feedback, users didn’t benefit for example of quick payments.

On the another hand, if users have issues with their worked hours, they will get the wrong pay. If that’s the case, users open support tickets, causing an operational burden. This is because the clock out screen didn’t show any cues of how to resolve any issues.

Design process

The process began with rounds of interviews with current users in the UK in collaboration with our UX researcher. This brought insights about the problems in the interface, the flow, location permissions and wrong hours.

Users feedback demonstrated that: 

  • the interface didn’t help them to be aware of their possibilities during the experience. For example quick payments through location permissions.
  • they open support tickets to update wrong hours, and correct pay. Sometimes users forget to log their times as the venue can be busy at the start. This leads to wrong hours, that they weren’t able to fix by themselves, so they needed help to update them.
  • sometimes they clocked out by accident. This is because the clock in interface had an active clock out without a security screen.

I gathered these problems with the rest of the team to prioritise the most important. 

In several rounds of workshops, we analysed the end-to-end flow to identify opportunities of improvement. This exercise helped to transmit to different stakeholders the big picture, while gaining more awareness from the technical side.

Counting on the available resources and other priorities, we decided to deliver the project in 2 iterations.

  • The focus of the first iteration was to improve the communication of location permissions at the time of clock in / out. This would help users to know about the benefit of enabling location permissions and get paid faster (using the direct method).
  • The second iteration was to redesign the clock in/out experience and help users to edit worked hours in case of issues.
 
From here I would analyse the whole flow and provide solutions thinking on the current priorities. The designs would be tested with prototypes, validated and delivered for implementation.

Design

First iteration: location permissions

I focused on the location permissions flows proposing some minimal changes for the clock in interface (CTA and security modal).

The main purpose was resolving users assumptions about location permissions and so they could get paid faster.

The designs were validated in usability testing. Users stated that knowing the purposes of location permissions, helped to realise the benefits of providing them.


Second iteration: clock in/out experience + edit wrong hours

I studied both UK and US flows to design something that worked and scaled in both regions. Both interfaces had useful functionality that the other was missing. The US interface was more visually appealing, but missed times tracked and the timer used too much real estate.

I considered to integrate the concept of the timer UI of the US flow as main visual element in the new design. The idea was giving the main focus to the direct clock in/out method while providing shift status feedback. In addition, this design could be used in both regions taking the best of each of them.

The QR code would be placed in a secondary position as it should have been from the beginning.

To make a scalable design, I made the UI to fit in both US and UK contexts. This way, the timer needed to be more compact and have space to incorporate meal breaks (US only) in it.

Final design

With the new design, UK users would see the timer as the main UI element, and the QR code as secondary.

We conducted several rounds of validation sessions to test the designs that contributed in its improvement.

Location permissions

With the new clock in/out screens when users haven’t provided location permissions, can follow the flow to learn why enable them. Otherwise, as an alternative, users still have the QR code method accessible through 2 different places.

Statuses for clock in/out

Defined the timer UI status for the different users steps through their journey. The development team also helped me to consider some edge cases that also needed to be considered. For example late clock ins, or users who forgot to clock out.

I also explored the possibility of adding a pulse micro interaction to the timer UI. When consulting with the engineers, it would be easy for them to implement if they got the animation in json. I worked with another colleague to produce the pulse animation for different states and generate the json files.

The result can be seen here for shift status and here for clock out (give a few moments to load the animations).

Updating wrong hours

When clocking out, users can now read a message with a link to edit worked hours in case they need it. This way we could decrease support tickets regarding this topic.

We prepared A/B tests to see what method to edit hours would be more effective. 3 of 4 users said they preferred to have the text at the top as “it helps to prompt me to check the logged times just in case.”

Outcomes

The data showed an overall improvement the clock in & clock out process, resulting in:

  • a 95% reduction of sessions requesting location permissions, which means, more and more users started to clock in and clock out using the direct method.

  • a 20% decrease in support tickets for wrong hours, as now users have a direct way to edit hours after clock out.

Felipe MQ

Senior UX Designer