Released in 2023
Client: Apple

How can I enter two week’s worth of hours on my timesheet…fast?

I improved the design of the timecard feature to enhance the efficiency and accuracy in tracking work hours and streamline the editing process.

Responsive view of timecards on mobile device
Role

Lead product designer

Paired with

Content designer

Platform

Web, iOS, Android

A screenshot of an inline quick edit on a web platform
Inline quick edit on web

In this case study , I’ll delve into the process of enhancing WorkJam’s timecard functionality to address challenges and elevate the user experience for Apple employees.

The problem

After launching the MVP for WorkJam’s timecard feature, it was time to focus on some of the usability issues that were originally out of scope.

Users were limited to editing one entry at a time and for a happy path this would be ok, however after some user testing and client interviews, interesting circumstances emerged, revealing a significant user pain point: frontline workers often struggled with punctuality, leading to delayed or missed clock-ins. Consequently, they resort to catching up and correcting their timesheets just before the pay cycle ends. This process proved cumbersome and time-consuming, impeding efficiency.

To address this issue, our goal was to streamline the timecard editing process, making it faster and more user-friendly. Our aim was twofold: to boost efficiency for frontline workers and ensure accurate timekeeping without unnecessary hassle.

A screenshot of the Timecard edit user flow on mobile devices
Timecard edit user flow on mobile devices
Components of Employee timecard edit screen on mobile device
Timecard edit components for mobile devices

Research

Before diving into the design work, I worked closely with the customer success team to help organize and conduct client interviews.

During client interviews, we uncovered significant pain points among both managers and employees. One recurring issue was the prevalence of missed punches and inconsistencies in timecard entries. Moreover, managers expressed frustration over spending excessive time correcting their employees’ timecards due to the system’s complexity.

We dug into Google Analytics which corroborated these findings, revealing a high rate of user disengagement with the timecard feature. Specifically, we observed that 79% of users discontinued using timecards within five minutes of accessing the feature, primarily citing the prolonged editing time required to manage a high volume of punches.

These insights shaped my designs by recognizing the urgent need to streamline the editing process to reduce frustration. I prioritized the implementation of batch entry capability in timecards as a key solution.

Editing timecards one by one feels like a never-ending chore. Sometimes, I forget to clock in, or I'm just running late...

Sandy, Technical Specialist
a screenshot of my process flow chart
Process flow chart

Testing and Iterations

With the pain points clearly identified, I jumped into designing user flows and creating prototypes in Figma. I collaborated closely with the team, going through several rounds of design reviews and iterating based on feedback.

With this design solution , I wanted to introduce a few new components and patterns. I worked closely with the design systems lead to make sure these components and patterns were consistent with our design system

Finally, we refined the design with developers and product owners to polish the designs and prepare for implementation.

A screenshot of multiple timecard entry user flow in Figma
Multiple timecard entry user flow in Figma for web
A screenshot of adding a single timecard entry vs adding timecard entries in batches
Adding a single timecard entry vs adding timecard entries in batches

Learnings

This project taught me a lot, both good and challenging. Here are a few key takeaways:

Data analysis turned out to be incredibly useful. For example, discovering that 79% of users dropped off within five minutes helped us zero in on a major usability issue.

Effective communication with stakeholders and managing expectations really helped us get buy-in, keep everyone aligned and built better understanding and teamwork.