Replicon Payroll

 

The Client

Replicon is a cloud-based workforce management solution for businesses.

The Problem

Payroll managers ran multiple reports prior to processing payroll to confirm their accuracy and completeness. Payroll mistakes led to is expensive corrections and increased a company’s liability.

The Solution

We redesigned our pay period selector and report filter to provide clear and explicit settings for payroll managers to review their settings and ensure consistency.

My Role

User Researcher and UX Designer

What I Did

I interviewed payroll teams to learn about their process and frustrations with our product. With my product manager and subject matter expert we designed and tested feature concepts together.

 

 

What We Learned From Payroll Managers

Payroll teams have a few days each pay period to ensure all their payees are paid accurately and on time. A successful payroll run requires all inputs to be complete and accurate. To ensure a successful payroll run, payroll teams run periodic reports to check their payroll data. They will contact payees with incomplete or inaccurate timesheets.

We discovered payroll teams relied on Excel to process data from our payroll reports. One team had a macro that generated a mail merge list for employees with less than 80 hours every pay period. Another team had a macro for scanning changes for back pay.

 
Persona - Leslie FINAL.png
 

Our Approach: Two Directions For The Redesign

I presented two directions to my CEO, product manager, and engineering lead. The state of the current payroll feature is presented in the first sitemap below. The following site map is my first approach, a lower risk concept based on redesigning the export page. The second concept, we would design and develop a new payroll feature based on the workflow we discovered from research. My stakeholders decided on the first approach to meet our timeline and mitigate migration risk with our existing customers.

 

These are sitemaps of current payroll feature and two alternatives for redesign. The team opted for the first approach.

 

Designing For Leslie

After numerous whiteboard sessions with my product manage and payroll SME. Here are a few of the iterations that led us to the final solution.

In this wireframe, we learned the timesheet status was the primary filter group payroll managers used to examine their employees' time, so we explored a side tab option to view those buckets.

In this wireframe, we learned the timesheet status was the primary filter group payroll managers used to examine their employees' time, so we explored a side tab option to view those buckets.

 
In this wireframe, we studied having the filters on top and inline email notifications for payroll managers to notify employees and supervisors about their timesheets.

In this wireframe, we studied having the filters on top and inline email notifications for payroll managers to notify employees and supervisors about their timesheets.

 
In this wireframe, we explored having the filters on the side, with conditional payable time filters.

In this wireframe, we explored having the filters on the side, with conditional payable time filters.

 
In this iteration, we explored time ranges for different payable time types.

In this iteration, we explored time ranges for different payable time types.

 

Defining The Correct Pay Period

Some payroll teams had trouble understanding the selected pay period in our product. We addressed this with explicit dates. We improved the prior period dialog with inclusive and exclusive date range filters. Payroll teams often run exclusive payroll runs that include a specific period. This will minimize errors from selecting the wrong period.

 
Before

Before

After

After

 

Definitive Report Filters

Payroll managers usual have many filters selected in our former design and they could not glance at their options without opening each filter menu. This led to erroneous reports when a payroll representative forgets to reset or include a specific filter. We exposed all the report filter options on the left pane.

Problems Of The Old Filter

The old filter menu was the leading source for errors. Payroll managers frequently forget which filters were selected when they generated different reports. There was no option to reset or filters after each report.

 

Redesigned Payroll Filter

The current filter menu hid many of the applied filters. I addressed this by exposing all the payroll filters on the left pane.

New Range Filters

The new time range filters for different payable time categories was the result of our research with users. This will allow payroll managers to scan payroll data for outliers to mitigate time entry errors and manage time reportage. These updates will reduce dependency on external tools such as Excel.

Redesign Faucet Filters.png
 

Web Accessibility 

Developers notes for web accessible controls.

Developers notes for web accessible controls.

 
Color blindness study for new filters.

Color blindness study for new filters.

 

Before And After

 

Before

 

After

 

InVision Prototype

We tested our designs through InVision prototypes. Here is our prototype for setting up a customer's pay period for the first time.