Project Overview
Payroll
Payroll is an embedded, full-service solution that enables business owners to pay their employees on FreshBooks.
-
FreshBooks is a leading accounting software for small and medium-sized businesses. It’s a SaaS platform accessible on both desktop and mobile. The company was founded in 2003, and is based in Toronto, Canada.
-
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 (Internal Revenue Service) 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
Eventually, a noticeable number of owners began disconnecting the integration with Gusto, which contributed to a higher churn rate
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 map
• Competitive analysis
Ideation
• User flows
• Wireframes
• High-fidelity design
Prototyping
• High-fidelity prototype
Testing
• Usability testing
Implementation
• Final design
• Design handoff
Discovery
UX audit
I 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 applying the laddering technique during user interviews with 10 participants, I gained a deeper understanding of users’ underlying needs and motivations. Generally, most participants expressed that payroll is not their area of expertise, and they 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 map
I created a journey map that visualizes the user’s experience with 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 I 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 5 participants from diverse user segments, evaluating a payroll run experience using a prototype. The task success analysis revealed that participants enjoyed the experience, leading to a high satisfaction score. They noted that it was a big improvement over the previous experience.
However, one participant expected even more functionality, such as an option for custom pay period dates.
Additionally, one participant experienced some friction due to the wording used (i.e., payroll statuses), which was later addressed in the final design by providing in-app education.
Positive feedback
A simplified experience by having just one platform
An easier and more streamlined process
It met or exceeded their expectations of how payroll run should work
Neutral/Negative feedback
In Step 1 (Pay Period), the absence of custom pay period option
On the Payroll page, the differentiation between “Submitted” and “Processing” payroll statuses
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
-
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
-
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.
Outcome
Final design
After successful validation through user testing, I finalized designs for the Payroll page, the Run Payroll flow, and the Payroll Journal Report.
In the Run Payroll flow, I reduced cognitive load and streamlined the process by leveraging progressive disclosure and prepopulating key data (i.e., employees, pay rate, hours, taxes, payment method) based on setup information.
To see the design in a greater detail, you can view the prototype.
Note: the prototype has limited functionality.
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.
Accessibility
By pushing back on the use of a hover-based Quick Actions menu in the Payroll History table that was initially considered (to access actions such as canceling a payroll run or downloading a payroll receipt), I ensured accessibility on touch devices like tablets and phones, where hover interactions aren’t supported.
Design principles
Adapt to the Task
Maintain Flow
Speak Human
Set Expectations
Don't Add, Evolve
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
Submitted Payroll Run
Payroll - More Actions Dropdown
Payroll Journal Report
Reports - Payroll
Result
Impact
The new Payroll feature had a big impact, as evidenced by impressive success metrics, and both quantitative and qualitative feedback.
40,000+
MAU (monthly active users)
89%
adoption rate
92%
engagement rate
+47
NPS (net promoter score)
Metrics
Adoption rate (89%) was calculated as the percentage of users who have interacted with Payroll, out of the total number of users who have added Payroll to their subscription, since launch.
Engagement rate (92%) was calculated based on users who performed meaningful actions in Payroll, such as running payroll and payroll reports, per month.
Net promoter score (+47) was calculated using feedback gathered through Pendo surveys delivered in-app and via email. The majority of respondents gave a 9 or 10, praising the ease of use, speed, and reliability of the new payroll solution.
Customer feedback
“FreshBooks Payroll has been a reliable, efficient and user friendly tool for managing my team's payroll. It simplifies the process, ensures compliance and integrates perfectly with my accounting system.”
Global Transformation Director | Business Owner
Project Details
Project details
Role: Product Design, User Research
Company: FreshBooks
Team: Product Designer, Product Manager, Engineering
Framework: Agile
Tools:
Design: Figma, Zeroheight, Miro
Project management: Jira, Confluence
Research: UserInterviews.com
Analytics: FullStory, Pendo, Looker
Year: 2024
Platform: Web
Link: FreshBooks.com