Runpayroll Experience
Work Project
2021.11 - 2021.12
Context
With QuickBooks Payroll, customers can tackle payroll with complete confidence. Features like automatic payroll, same-day direct deposit, and mobile time tracking with QuickBooks Time can help you pay your team and file taxes with ease.
QuickBooks Payroll team was in the stage of redesigning its run payroll page in order to enhance the current compacted payroll management system for small business owners. Amidst this phase, there was a degree of uncertainty among the designers regarding the preference our customers might have for the proposed new design.
ROLE
Interaction Designer, Design Technologist
PROCESS
Design iterations, High-fidelity prototypes in code
TEAM
Quickbooks Payroll Team
Challenges
How to create a more user-pleasing experience for Quickbooks Payroll users?
Challenges
QuickBooks Payroll team was in the stage of redesigning its run payroll page in order to ensure that the payroll management system is intuitive to use, can prevent errors and has clear a clear information hierarchy. The team made a lot of feature improvements. However, there was a degree of uncertainty among the designers regarding the preference our customers might have for the proposed new design.
Old Payroll Visual
Design
The new run payroll experience includes an expandable table to document payroll. The information structure is clearer with more specific payroll categories.
New Payroll Visual
In order to audit the interaction successful, I prioritized on the following contributions:
To spot interaction bug: clicks, hover states, highlighted states, etc.
To understand if customers find the new UI intuitive and if it can prevent errors when entering payroll data.
To identify additional use cases or missing functionalities needed for customers.
I chatted with the lead designers about the hover states and highlighted states error and made suggested revision about the interaction,
Final Product
I developed two prototypes for A/B test. Version 1 excluded the "Other Pay" column, while version 2 incorporated it. This comparative approach aimed to discern the impact and preference regarding the inclusion of this specific element in the user experience.
We conducted 12 comprehensive usability testing sessions, prompting participants to provide comparative feedback between the new and old versions.
Here is a video of the final interaction which was implemented in to QuickBook Payroll in 2022.
Tech stacks: Figma, FigJam, HTML, CSS/SCSS, JavaScript.
Final Runpayroll Interaction in Code