UX Case Study: Timesheet Review

Simplify workflows. Reduce errors. Save time.

OVERVIEW

Timesheet Review is Mission Critical

The purpose of the Timesheet Review page is to give HR, Branch Managers, and Accounting the ability to collaboratively review and resolve flagged issues on weekly employee timesheets. Because payroll and invoicing are dependent on approved timesheets, resolving timesheet issues efficiently is mission critical.

PROBLEM STATEMENT 

Improve UX, Preserve Scope

The Timesheet Submission review page was developed years ago with more emphasis placed on programming than on usability. Multiple users report frustration with complex, error-prone workflows that are time consuming to navigate. Some users avoid using the page in favor of their own ad hoc workarounds.

A company initiative to update the Intranet from an ASP.Net framework to MVC provided additional incentive and opportunity to re-work the page. The goal of the project is to improve the UX of the page while retaining the existing functional scope.

Legacy Page

Pain Points Reported:

  • Unclear / conflicting options in Action column
  • Radio buttons not suited to options displayed in Action column
  • Admin Override function persistently displayed for users not authoriized for that role
  • Layout is scattered, no underlying grid to provide structural consistency and familiarity
  • Reviewer roles intermingled in one table
  • “Hint” text is displayed persistently; red “warning” text not needed in this instance 
  • “Reviewed” check box is selected dynamically–unexpected behavior for a typically manual process

USER PROFILES

HR, Branch Manager, and Accounting roles are the sole users and audiences of the page.

  • HR and Branch Managers each access the page, update comments, and save their work in a non-serial workflow.
  • HR and Branch Managers contact employees as needed to clarify and resolve issues.
  • If HR and Branch Managers are unable to resolve a timesheet issue, Accounting steps in with override authority.
  • Timesheet overrides are used as a rare last resort when employees are not reachable due to vacation or other leave.

MY ROLE AND PROCESS

User Interviews / User Stories / Functional Specifications
I conducted initial interviews with multiple members of each user group, as well as the page owner. I conducted interviews in person and via teleconference. The goal of interviews was to understand how users currently use the system, what aspects of the systems they find useful and productive, and what pain points and frustrations they may experience in the process. I used the research results to document the functional specifications and user stories for the redesign effort.

Prototyping
I used white boards and sharpie sketches in the early going. These rough sketches were useful for exploring ideas on-the-fly with users during initial interviews. From these sketches I moved directly to Adobe XD to prototype the workflows. Depending on client requirements, I use a variety of prototyping tools including Adobe XD, InVision, Figma, and Sketch.

Iterative User Testing / Prototype Refinement
I scheduled and conducted follow-up user tests to validate workflows. I provided clickable prototypes and used the “think aloud” technique to review assumptions and elicit new insights. Think-aloud user testing with clickable prototypes is an efficient and effective way to test and validate prototypes. According to Nielsen Norman Group, “thinking aloud may be the single most valuable usability engineering method”.

Deliver Code
Following stakeholder approval of final prototype, I used Adobe XD to share code and assets with the development team.

SOLUTION

First Draft Prototype

Updates

  • I established an underlying structural grid to align layout with Intranet standards.
  • I integrated affordances from pattern library and re-ordered and redistributed affordances within the UI.
  • I isolated Admin Override check box to a separate column based on user role.
  • I replaced the “Reviewed” check box with system-generated text notification.
  • I optimized typography for online readability.

Issues to be Addressed

  • Users reported that different users in a single table remains confusing.
  • The “No Action” option is not a useful in a mission-critical workflow. The text field can be used to document questions and clarifications.
  • “Reject” is brought forward from legacy site, but it is not an accurate term in this context. Timesheets cannot be rejected in this workflow.

Final Draft Prototype

Updates:

  • I separated each Reviewers’ tasks into separate, differentiated tables.
  • I concealed the “hint” text behind Popover icon.
  • I changed label text from “Reject” to “Dissaproved” to improve clarity and intent with parallel writing style.
  • I indicated that completed, non-editable fields should be dimmed
  • I moved the Action column to the right of table to align with Intranet standards.
  • I changed the text of the Action column to “Status”, to provide a more accurate descriptor of that column’s meaning.
Before
After