the new bulk time sheet capability

Iterating to $5 Million

in collaboration with:

Product Manager,
Director of Product Management,
QA team,
Development team,
Architecture team,
User Assistance Writer
‍
My role: UX lead
The business: SAP Fieldglass is a cloud-based, SaaS product for hiring external workers and procuring professional services.
Project duration: January 2024 - May 2024

The bulk time sheet that won whale clients for SAP Fieldglass

This project page details the design decisions that produced this tool.

an AI-generated image of a large crew of workers overlooking a coal mine filled with tractors and excavators and other mining-related vehicles.

image created with AI

Background: Asset-intensive industries hire massive workforces.

Workers (known as Resources in Fieldglass terminology) can be part of multiple assignments simultaneously, and each assignment can involve thousands of workers.
‍
Timekeepers are responsible for recording and submitting the time for all workers.

Timekeepers were plagued by burdensome and inefficient paper timesheets, while Fieldglass repeatedly missed the mark to deliver a digital solution that customers wanted.

the previous proposed design which clients rejected. it shows a table with rows for each worker and their project/time details. designed in 2022, it shows an outdated design system theme.

the 2022 design

Fieldglass learned lessons from clients' rejections.

In 2020, engineers and product managers designed a tool that was hard to use and misaligned with SAP's design system.
‍
In 2022, a designer joined the engineers and PMs and created a tool that was too functionally and visually complex.

Exploring design solutions

In 2024, I inherited the project. Product managers reached out to me and defined the requirements.

I started sketching and mapping on paper how this bulk time sheet could work.

A user flow diagram illustrating the bulk time sheet process in 3 steps: Setup, Crews, and Time Entry

The initial user flow

For each day, the timekeeper would need to:

Set up the time sheets.
Select and organize workers by their assignment.
Enter the amount of time each worker worked on each assignment.

The product managers had informed me that customers organized "crews" of workers.

I used this crew concept to create a step-by-step process where timekeepers could organize their workers based on who worked on what.

Step 1 of the bulk timesheet process where the timekeeper sets up the timesheet.

Step 1 followed a standard design...

The first page was a straightforward design that aligned with Fieldglass' convention for forms that involve a Setup step.

A line graph titled "Change in the Percentage of Users Who Logged in Monthly." The y values range from 0% to 20%, and the x values go from January to September. The line drops from 12% in January to under 10% in May, then climbs up to over 18% in September.

...and so did the creation of crews.

The timekeeper steps through a sequence of modals to select workers and assign their project details.

These two parts of the project saw very little change.

Exploring Step 2: A Split View

The resultant display of workers and their project details is where I navigated through multiple explorations and refinements.

In this split view, the time keeper could focus on one crew at a time.

Exploring Step 2: A Paneled Grid View

In this card view, the time keeper could view all the different crews and their details simultaneously.

Refinement: One Column of Panels

The developers said the split-view concept was not feasible and neither was a grid format. The cards would need to be stacked vertically, which is a layout that Fieldglass users would already be familiar with.

an iteration of the bulk time sheet where step 2 contains one table to contain all workers because the crew concept was invalidated.

Pivot: No More Crews

The product managers learned that the "crew" concept was invalid. Timekeepers were not organizing timesheets by grouping workers.

The dissolution of separate crews resulted in a single table to contain all workers.

A user flow diagram updated to reduce the number of steps from 3 to 2.

Breakthrough: From 3 Steps to 2

I realized that this one table could cover both the task of adding workers with their project details and the task of entering their time.

A screenshot from FIgjam where the design team voted on the best of 4 table designs.

Test: Facilitating a Design Crit

The dissolution of crews also presented a challenge: how do I design the case where a worker has worked different amounts of time on different projects?

I created 4 table variations (each aligning with the design system) displaying this same content:

"Alex Avery had a 12-hour day working on two projects. According to their time sheet rules, 8 of those hours should go to Standard Time and 4 go to Overtime."

I invited designers into a Figjam board and asked the team to vote on which option was easiest to read in representing the content above.

From top to bottom with arrows in between: the data points required for each time sheet, an outline representing the information architecture, and a mockup of the resultant table.

from content to information architecture, from information architecture to prototype

Architecting the Table

While #3 was the winner in the design crit, the engineers preferred #4 because it was easier to build. This was an acceptable compromise since #4 was still easier to read than the other options.

The Demo

With all the requirements satisfied and the design polished, the product managers presented the prototype to a major energy client. After many questions, the client finally said, "We like it."

This bulk time sheet feature would go on to support over $10 billion in annual transactions across several, additional clients across energy, mining, and oil & gas, winning Fieldglass $5 million in quarterly revenue growth for the summer of 2024.

Home
‍