top of page
case-study-hero-beige.jpg

CASE STUDY

ENGAGE editing timesheet mockup.png
The client

Designing Timesheet Automation Software to Save Employee Time and Company Resources

My employer, 3Pillar Global, a product design agency commissioned this tool for internal use.

The problem

Filling out and submitting weekly timesheets is an unnecessary drain on worker time and resources. 5 minutes every week multiplied by ~50 weeks a year equals roughly 4 hours of billable time that could have been spent more productively. At a company with 2,000 employees, this amounts to about 8,000 wasted labor hours a year across the workforce.

The solution

My role

Design a system that allows users to set-and-forget their timesheets so they submit automatically on a weekly basis, creating affordances for the accommadation of all possible edge cases (national holidays, PTO, unexpected overtime, and more.)

I was the sole designer on this project, working with two PLs and a dev team from ideation to delivery.

Portfolio-divider.png

Discovery

01 Starting the process

Over the course of my time at 3Pillar, the company had used two different HR time tracking products, and neither was particularly user-friendly. Preparing to design this new product, I was especially able to empathize with the needs and pain points of the end-users because one of the real end-users was me

​

After meeting my collaborators, the main PL stakeholder shared a draft of a specs document a sketch illustrating some of his ideas for the product.

Cassi engage mockup.png

The PL's original sketch and an excerpt from his high-level product requirements.

02 Defining high-level goals

The problem sounded simple enough, but these things are always complicated than they seem, so I sought out to define the scope of the project from first principles by creating a user flow for review with the PLs. The timesheet product was live within a set of internal tools called ENGAGE – we knew what we wanted it to do, but we still had to define what actions the user would take, where they would take them, and in what order.

Engage timesheet user flow 1.png

A flow I made in one of our earliest meetings, ensuring we were all on the same page regarding the functionality we expected.

03 Defining user flows

In the above diagram, we came up with four separate user flows that the product would need to serve: setting up automation, editing a template, turning off automation, and viewing a timesheet from a past week. I used more comprehensive user flows in order to determine how each of these should work.

Screenshot 2023-03-16 at 4.19.19 PM.png

Excerpts from an early "Automation is set up, user overrides for a specific week" user flow.

Portfolio-divider.png

Wireframing and usability testing

04 Lo-fi mockup

One tricky part about this project was the fact that timesheet automation would be opt-in, so that it would not totally replace 3Pillar's manual timesheet software. Indeed, managers would still approve timesheets manually through that other product regardless of whether they were automated or not. As a designer, I had to make sure the timesheet automation product was seamlessly interoperable with the manual entry product.

Timesheet automation lofi wireframe.png

An early wireframe that ultimately bit off more than it could chew – the "Submitted," "Approved," and "Rejected" tabs were removed later because the manual entry product already covered their utility.

05 Usability testing

After we aligned with PLs on a set of initial wireframes which reflected the goals and direction for the Choose a Template project, we moved into testing with real client users in order to see how the designs could be further improved. I created the prototype, created the narrative, and wrote the questions for the script used in the interviews.

I mocked up this prototype illustrating the product's main features; it's what I shared with users during usability testing.

Portfolio-divider.png

Final designs

06 Applying new insights

While we found that the vast majority of users we tested with were able to use the software without serious issues, there were a couple areas where I improved the UI copy in order to make complex backend processes and limitations easier for users to understand.

ENGAGE hifi 6.png

Getting the UX writing correct

PTO and Holidays are imported from one application, while the user is used to manually submitting timesheets through a separate program. The copy had to explain how everything related, clearly, all the time.

DESIGN UPDATE

ENGAGE hifi 1.png

Accomadating unexpected edge-cases

3Pillar is an agency, and sometimes contracts end. How should the system communicate this event? What should it display if the user is viewing a week which switches from one month to another on a Wednesday? How should a timesheet template apply to a week split into two timesheets?

DESIGN UPDATE

ENGAGE hifi 4.png

Try to keep things as simple as possible

Because the backend payroll infrastructure uses three separate products, it's easy for the user to get confused. Given these unchangeable technical constraints, how can we make confusing parameters as straightforward as possible for busy users with many other tasks to accomplish?

DESIGN UPDATE

More projects

Artboard Copy 16BSA header.png
Revamping a Complex Government Services Platform from the Ground-Up

Redesigned core functionality for a platform that serves hundreds of municipalities across the country.

Macbook mockup for case study.png
Combining 15 Distinct Dataset-Specific Applications in a Single Integrated Platform

Designed a robust dashboard for a Fortune 500 SAAS offering. 

NIQ mackbook mockup.png
Creating a Core Service for a Leading Consumer Intelligence Services Company

Redesigned curated, cross-functional directory of data analytics resources for a SAAS offering.

Iadarola Fader for portfolio.png
My Writing

My background as a journalist informs my designs: it helps me think through tough questions and deduce actionable conclusions.

bottom of page