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
  • “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:

  • Established underlying structural grid to align layout with Intranet standards
  • Integrated affordances from pattern library; re-ordered and redistributed affordances within the UI
  • Isolated Admin Override check box to a separate column based on user role
    • Replaced “Reviewed” check box with system-generated text notification
  • Optimized typography for online readability
  • Identified “No Action” as a problematic action item

Final Draft Prototype

Updates:

  • Separated each Reviewer tasks into separate, stand-alone workflows
  • Concealed “hint” text behind Popover icon
  • Rewrote label text to improve comprehension with parallel writing style
  • Completed, non-editable fields are dimmed
  • Action column shown at right of table
Before
After