Timesheet Approval Redesign

Modernizing the timesheet approval process for managers on the go.

Project overview

The Problem

The existing timesheet approval platform was outdated, complex, and not responsive. Managers disliked approving timesheets because it took a lot of time and was difficult to use. They were particularly annoyed that they couldn't approve timesheets when they were away from the office using their mobile devices.

My Role

UI Designer, UX Designer, UX Researcher

Tools

Discover

I organized a two-day design workshop with stakeholders to gather important insights and establish a common understanding of the project's goals and requirements.

We discussed stakeholder assumptions, formulated how-might-we statements, identified target personas, and discussed potential points of failure.
After that, we started sketching out ideas and solutions.
The valuable insights we gathered and the collaborative discussions helped us ensure that the final design would meet the needs of managers and align with the organization's goals.

I conducted qualitative user interviews to better understand the pain points and challenges of our users.

I followed up our design workshop by conducting qualitative user interviews with clients and users that fit our manager and payroll admin personas.
These interviews provided valuable insights into their pain points, needs, and challenges.
As a result, I developed a user journey to help identified key touchpoints, emotions experienced, and opportunities for improvement, ultimately leading to a more efficient and user-friendly timesheet approval workflow.

Define

I utilized the knowledge acquired from research to work closely with product management in establishing MVP requirements of our timesheet approval redesign project.

I assisted in validating these requirements before documenting them as user stories and acceptance criteria in Jira, guaranteeing that our solution stayed focused on the user and in line with the requirements of our stakeholders.

Next, I created user flows to help visually represent how users would interact with the redesigned system.

I used these flows to validate our proposed updates with stakeholders and engineering. This ensured that our suggestions aligned with our business goals and were technically feasible.

I researched and documented possible ways to improve the approval process by adding more notifications and opportunities for employee communication.

Through discussions with stakeholders and designers from various teams, I identified specific actions where integrating notifications and employee communications would be beneficial.
By documenting these opportunities, I laid the foundation for future improvements that would enhance efficiency and the user experience in the timesheet approval process.

I conducted a thorough analysis of the interactions and dependencies among the different approval levels.

A necessary requirement for the launch of the redesign was to enable support for multiple approval levels. This significantly raised its complexity, causing difficulties for users to navigate and understand the workflow.
By documenting these interactions, I obtained a comprehensive understanding of the challenges and difficulties users faced, which allowed me to explore design solutions to enhance the clarity of this interaction.

Design

I began by creating wireframes to gain a better understanding of basic screen layouts and determine which components and patterns would be most effective in achieving our goals.

Once we finalized our requirements, we started exploring design concepts by beginning with low and mid-fidelity wireframes.

To make it easier to visualize our suggested solutions, I converted our wireframes into high-quality mockups using Figma.

These mockups allowed us to present the interface and interactions in a more realistic and detailed way.
By adding visual elements like colors, typography, and images, we made the design more vibrant and gave stakeholders a clear idea of the end product.

To better understand and communicate our planned workflows and interactions, I used Figma to convert our mockups into interactive prototypes.

These prototypes assisted us in conveying our intentions to the engineering team and would be utilized to collect important feedback from end-users in the coming days.

Deliver

I worked with one of our UX researchers to create a usability study. We used the interactive prototypes we made to conduct both moderated and unmoderated testing sessions in order to validate our design solutions.

We gathered our key findings and identified areas that could be improved.
These insights were shared with stakeholders and product managers, and our recommendations were added to the backlog for future exploration.

I conducted a hand-off meeting with the engineering team responsible for the project. The purpose of the meeting was to go over the final designs and address any questions they had.

We used the dev tools in Figma to provide engineers with detailed design specifications.
During the implementation phase, I collaborated closely with the engineers to provide clarification and address any issues.
I also reviewed their final implementation of the solution to make sure it met our design standards.