Project Overview
Payroll
Payroll is an embedded, full-service solution that enables business owners to pay their employees on FreshBooks.
Payroll
Feature Explained
What is FreshBooks Payroll?
Payroll gives business owners the ability to pay their team on a given pay schedule. Previously, FreshBooks offered this feature only through a Gusto integration, available in its app store since 2017. Now, FreshBooks has introduced an embedded, full-service payroll solution for U.S. customers, providing a more seamless experience.
Problem Definition
Running payroll is time-consuming and challenging
Customer feedback and analytics show that the integration with Gusto has caused an experience gap for business owners. This setup required business owners to operate across two different platforms, leading to a fragmented user experience. Over time, as owners and their teams grew and scaled, their need for an embedded payroll solution increased as well.
Problems with the previous solution
Owners had to use two different platforms (FreshBooks/Gusto) for one workflow
Running payroll was a complex, time-consuming process, and mistakes could lead to costly consequences, including IRS penalties
Owners had disconnected billing, accounting, and payroll systems
It was hard for owners to onboard and pay their employees, prepare team hours, and get a complete picture of their finances
UX Strategy
UX strategy
Vision
A platform where business owners confidently serve their clients by effortlessly collaborating with their teams and gain insights to grow their business.
Goal
Simplify the experience for owners to painlessly organize and pay their teams so they can save time and grow their business.
Plan
Empower users to easily run and accurately track payroll.
Process
Design thinking
Each phase of the design thinking process played a crucial role in delivering the best possible user experience while aligning with the company’s strategic business goals.
Discovery
• UX audit
• User interviews
• Personas
• Journey mapping
• Competitive analysis
Ideation
• User flows
• Wireframes
• High-Fidelity design
Prototyping
• Prototyping
Testing
• Usability testing
Implementation
• Final design
• Design handoff
Discovery
UX audit
We began the discovery process with a UX audit to identify issues with the experience, uncovering usability pain points and friction in the user flow caused by the previous Gusto integration.
User interviews
By using a laddering technique, we were able to gain a deeper understading of what users really need. Generally, users have expressed that payroll is not their area of expertise, and would rather have a tool handle and solve everything, because payroll is important to get right.
The sentiment was that running payroll through the integration with Gusto is a complicated process. Though they want to be “hands off” on paperwork and manual processes, owners do want to have control over payroll runs. They do not want to log into multiple systems, and want to keep things organized and simple in one platform.
Note: to protect the identities of participants, generic images/names are used here.
Journey mapping
The user interviews resulted in a journey map where I defined user’s experience with using the Gusto integration, representing specific experience gaps, pain points, and goals when running payroll.
Competitive analysis
Competitive analysis revealed that most competitors already provide an embedded payroll solution in their core markets, and that is clearly a direction where the market is heading.
Ideation
User flow
Running payroll can be complex, but this user flow demonstrates how we simplified and streamlined the process.
Wireframes
While iterating, I’ve mostly explored information architecture and navigation, by reducing complexity with the goal to create a seamless experience.
Testing
Usability testing
I conducted usability testing with diverse user segments, evaluating a payroll run experience through a prototype. The task success analysis revealed that participants enjoyed the experience, leading to a high satisfaction score. They noted that it was an improvement over the previous experience.
However, two participants experienced some friction due to the wording used (i.e., payroll statuses), which was addressed by providing in-app education and support documentation.
In addition, some participants requested even more functionality, such as an option for custom pay period dates.
Note: to protect the identities of participants, generic images/names are used here.
Solution
Payroll simplified
FreshBooks Payroll is a full-service payroll system that U.S. users can add to their FreshBooks subscription. Business owners have the ability to access unlimited payroll runs, automatic payroll tax filing and payments, direct deposit, and tax forms like W-2s. Plus, transactions for every pay run are automatically tracked so their reports and books stay accurate and organized.
To ensure that FreshBooks is payroll compliant every step of the way, Gusto’s back-end services are leveraged with the use of their API.
Improvements
A single platform for running payroll
An easy and streamlined process
Connected billing, accounting, and payroll system
It’s now much easier for owners to onboard and pay their employees, prepare team hours, and get a complete picture of their finances
-
Gusto is an industry-leading HR and payroll technology provider. Launched in 2011 in San Francisco, California, Gusto serves more than 300,000 businesses nationwide. Each year they process tens of billions of dollars of payroll and provide employee benefits while helping companies create incredible work places.
-
On the Payroll page, select the Get Started button to begin
Add details about the business — business structure, location, and payroll schedule. Users need to complete a FEIN Assignment Form (Form CP575)
Set up a bank account
Add employees
Set up state tax for the business
Sign and select Start
-
Go to the Payroll Page
Then select the Run Payroll button
In the Pay Period section, choose an available period in the dropdown
Then select Continue
In the Hours and Earnings section, review your employees’ information
If needed, select an employee to edit their Hours, Additional Earnings, Reimbursements, and Payment Method, then select Confirm
Next, select Save and Continue
In the Review and Submit section, review the Business Pays and Debits, as well as Employee Take Home sections as needed
Select Submit Payroll to start processing the payroll, and the payroll run will appear in the Payroll History list on the Payroll page
Outcome
Final design
After the team and I aligned on the design direction, I’ve designed: the Payroll page, a flow for running payroll that consists of 3 simple steps, and a Payroll Report. For the run payroll flow, I leveraged progressive disclousure (interaction design technique) and the existing design components.
By prepopulating data (i.e. employees, pay rate, hours, taxes, payment method) based on the information given in the company onboarding flow, we managed to reduce the cognitive load and speed up the process of running payroll.
To see the design in a greater detail, you can view the prototype. Note: the prototype has limited functionality and it doesn’t showcase the full user experience.
Design system
I’ve improved the table component by introducing more columns to support the need for flexibility and surfacing more information. The result is a scalable component that is used on the Payroll page and throughout the Run Payroll flow.
Additionally, I’ve contributed to the iconography by designing feature-specific icons that help users identify actions and navigate the interface more intuitively.
Design principles
Unfold Like an Onion
Adapt to the Task
Maintain Flow
Speak Human
Set Expectations
Don't Add, Evolve
Screens
Payroll - Get Started
Payroll
Run Payroll - Step 1: Pay Period
Run Payroll - Step 2: Hours and Earnings
Run Payroll - Step 2: Hours and Earnings - Edit Pay Modal
Run Payroll - Step 3: Review and Submit
Payroll Submitted
Payroll Item
Payroll - More Actions Dropdown
Payroll Journal Report
Reports - Payroll
Result
Impact
The new payroll feature delivered a significant impact on both customers and the company, as evidenced by impressive success metrics.
30,000.000
customers impacted
89%
adoption rate
92%
engagement rate
Metrics
Adoption rate (89%) was calculated by the proportion of users who interacted with Payroll out of the total eligible user base, since launch.
Engagement rate (92%) was calculated by tracking users who performed meaningful actions in Payroll, such as running payroll and payroll reports, per month.
Data points (via FullStory):
Segments (to filter users)
Event Funnels (to track feature interactions)
Dashboards & Trends (to visualize and validate engagement)
Project Details
Project details
Role: Product Design, User Research
Client: FreshBooks
Team: Product Designer, Design Leadership, Product Manager, Engineering
Tools:
Design: Figma, Zeroheight, Miro
Project management: Jira, Confluence
Research: UserInterviews.com
Analytics: FullStory, Looker, Pendo
Year: 2023-2024
Link: FreshBooks.com