PROJECT OVERVIEW

Payroll

Payroll enables business owners to run scheduled team payments directly in FreshBooks.

  • FreshBooks is a leading accounting platform for small and medium-sized businesses. It’s a SaaS platform available on both desktop and mobile. 30M+ businesses in 160+ countries have used FreshBooks so far. The company was founded in 2003, and is based in Toronto, Canada.

Payroll

PROBLEM DEFINITION

Payroll Disconnected from Accounting

From the start, FreshBooks offered a seamless way to pay contractors within the platform. Contractors could invoice business owners, receive payment through FreshBooks Payments, and have transactions automatically reflected in the books.

Employee payroll, however, remained outside the platform. Because employee wages, taxes, and deductions aren’t invoice-based transactions, businesses had to manage payroll through a separate system. For businesses with both employees and contractors, this meant managing workforce payments across two different workflows.

This created a fragmented financial experience, increasing reconciliation effort and limiting FreshBooks’ visibility into one of a business’s largest recurring expenses. It also left a gap in FreshBooks’ vision of being an all-in-one financial platform for small and medium-sized businesses.

Key Problems

  • Fragmented workforce payments: Business owners could pay contractors in FreshBooks but had to use a separate system for employee payroll.

  • Disconnected payroll and accounting: Employee payroll data and expenses lived outside FreshBooks, creating manual reconciliation and potential errors.

  • Incomplete financial visibility: Payroll expenses were not part of FreshBooks’ complete, real-time view of the business.

UX STRATEGY

UX Strategy

Vision

A platform where business owners can confidently manage their team, pay both employees and contractors accurately, and gain clear financial insight as their business grows.

Goal

Drive adoption, engagement, retention and task success of payroll within FreshBooks by making it the default way to pay employees and contractors.

Plan

Reduce payroll complexity by simplifying setup, payroll runs, and payment tracking, enabling business owners to manage employee and contractor compensation seamlessly within FreshBooks.

DESIGN PROCESS

Design Process

I led the end-to-end user research and design process to create a user-centered experience for FreshBooks customers, aligned with key business goals.

User Research

  • User interviews

  • Journey map

  • Competitive analysis

  • Usability testing

Design

  • User flows

  • Wireframes

  • High-fidelity design/prototype

  • Final design

  • Design handoff

USER RESEARCH

User Interviews

By applying the laddering technique in interviews with 10 participants, I uncovered users’ underlying needs and motivations around payroll. Most participants shared that payroll is not their area of expertise and preferred a system that could handle the process end-to-end within FreshBooks.

Overall, payroll was perceived as complex and typically managed through external tools. While business owners wanted to remain largely “hands-off” with administrative work, they still valued visibility and control over payroll runs. They also expressed a strong preference to avoid switching between systems, favoring a single, organized platform for managing both accounting and payroll.

Note: to protect the identities of participants, generic images/names are used here.

Journey Map

I created a journey map that visualizes the previous run payroll workflow, highlighting key experience gaps, pain points, and user goals.

Competitive Analysis

Competitive analysis showed that most competitors already offer payroll in their core markets, signaling a clear industry shift toward integrated payroll solutions.

DESIGN

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.

USER RESEARCH

Usability Testing

I conducted usability testing with 5 participants from diverse user segments, focusing on the payroll run experience in a prototype that included two tasks:

  1. Run Regular Employee Payrol

  2. Find the Payroll Run

Qualitative Findings

Positive Feedback

  • Participants described the user flows as “easy” and “smooth”, highlighting its clarity and simplicity

  • It met or exceeded their expectations for how payroll should work

Neutral/Negative Feedback

  • One participant expressed a need to set custom pay period dates in Step 1 of the Run Payroll flow

  • One participant experienced friction understanding the payroll statuses (“Submitted” and “Processing”) on the Payroll page

Quantitative Findings

  • The design achieved a high task success rate, with 4 out of 5 participants completing both tasks accurately and efficiently

    • One participant was unable to complete Task 1 after getting stuck at Step 1 of the Run Payroll flow

  • Satisfaction scores were high (4.6/5), indicating that participants perceived the new experience as a meaningful improvement over the previous one

Note: to protect the identities of participants, generic images/names are used here.

SOLUTION

Payroll Simplified

FreshBooks Payroll is a payroll solution available to U.S. customers as an add-on to FreshBooks subscriptions, offered across Lite, Plus, Premium, and Select plans (with a free first month included).

It enables unlimited payroll runs for both employees and contractors, automatic tax filing and payments, direct deposit, and generation of tax forms (W-2s). Each payroll run is automatically recorded in the platform, ensuring financial reports and bookkeeping remain accurate and up to date.

Key Improvements

  • Single platform experience: Business owners can now manage payroll for both employees and contractors within FreshBooks without switching tools.

  • Simplified payroll workflows: Employee onboarding, payroll setup, and pay runs are streamlined into an intuitive, end-to-end process.

  • Connected payroll and accounting: Payroll transactions are automatically recorded in FreshBooks, reducing reconciliation effort and potential errors.

  • Complete financial visibility: Payroll is reflected in real time, giving business owners a complete view of their business finances.

    1. On the Payroll page, select Set Up Payroll

    2. Add details about the business: business structure, location, and payroll schedule

    3. Set up a bank account

    4. Set up employees

    5. Set up state tax for the business

    6. Sign documents (Direct Deposit Authorization, Form 8655)

    Learn more

    1. On the Payroll page, select Pay and choose Employees or Contractors

    2. Select a Payroll Type

    3. Select a Pay Period

    4. Hours and Earnings: edit employee details if needed

    5. Review and Submit: review Business Pays, Employee Take Home, and Debits

    6. Select Submit Payroll

DESIGN

Final Design

After validating the designs through user testing and aligning with the team on the solution, I finalized end-to-end flows for Set Up, the Payroll page, Run Payroll, the Payroll Journal Report, and Settings.

For the Run Payroll flow, I minimized cognitive load and streamlined the process by leveraging progressive disclosure and prepopulating key information (such as employees, pay rates, hours, taxes, and payment methods) based on setup data.

To see the design in a greater detail, you can view the prototype.

Note: the prototype has limited functionality.

Design System

I redesigned the table component to remove the legacy four-column limit, enabling flexible, scalable layouts that surface more information as needed. It's now used across 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 Payment 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

Unfold Like an Onion

Start as simple as possible, and gently reveal information only as it's needed. Where the choice presents itself, complexity should be opt-in. Customers can choose to turn on advanced options.

Adapt to the Task

Give frequent tasks priority and keep 'set-it-and-forget-it' tasks out of the way. Implement experiences that acknowledge different volumes; the needs of a customer with 10 Invoices are different than a customer with 1000, adapt the experience to suit each.

Maintain Flow

Surface only the options relevant to the task at hand. Enable customers to complete a workflow without leaving the page.

Speak Human

Be straightforward yet conversational, it shouldn't sound robotic or impersonal. Don't include jargon, or complicated phrasing. Where complicated terms are required (e.g., Accounting terminology), incorporate in-context help.

Set Expectations

Avoid surprises, customers should know what results will come out of their actions and feel in control. Provide customers with insight on where they are in the process and any effect on their clients before they take the action.

Don't Add, Evolve

Features should fit into the larger FreshBooks puzzle. Experiences should feel like a natural extension, increasing functionality instead of adding on top. Where a feature relates to another area of FreshBooks, the connection should be obvious.

Inclusive by Design

Build inclusive experiences across design and code that meet diverse needs, validated through accessibility audits, testing with assistive technologies, and direct feedback from people with disabilities.

Challenges

Table Constraints

During the ideation process for the Payroll page, I identified that the legacy table component’s four-column limit would not meet user needs and would not scale to support payroll workflows. This concern was later validated through usability testing.

Despite engineering concerns around grid constraints and delivery risk, I advocated for prioritizing validated user needs and long-term product usability over short-term implementation convenience.

The images below show the table component in the design system, the Set Up flow, the Payroll page, the Run Payroll flow, and the Payroll Journal Report.

Design System - Table Component

Design System - Table Component

  • Payroll - Get Started

    Get Started

  • Payroll - Set Up

    Set Up Payroll

  • Set Up Payroll - Step 5: Business Controller Details

    Set Up Payroll: Business Controller Details

  • Set Up Payroll - Step 5: Sign Documents

    Set Up Payroll: Sign Documents

  • Payroll - Direct Deposit Authorization

    Sign Documents: Direct Deposit Authorization

  • Form 8655

    Sign Documents: Form 8655

Payroll

Payroll

Payroll - Pay Dropdown

Payroll - Pay Dropdown

Payroll - Run Employee Payroll - Step 1: Pay Period

Run Employee Payroll - Step 1: Pay Period

Payroll - Run Employee Payroll - Skip

Run Employee Payroll - Skip

Payroll - Run Employee Payroll - Step 2: Hours and Earnings

Run Employee Payroll - Step 2: Hours and Earnings

Payroll - Run Employee Payroll - Import Time

Payroll - Run Employee Payroll - Import Time (hourly employees only)

Payroll - Run Employee Payroll - Step 2: Hours and Earnings - Edit Pay

Run Employee Payroll - Step 2: Hours and Earnings - Edit Pay

Payroll - Run Employee Payroll - Step 3: Review and Submit

Run Payroll - Step 3: Review and Submit

Payroll - Submitted

Payroll - Submitted

Submitted Payroll Run

Submitted Payroll Run

Payroll - More Actions Dropdown

Payroll - More Actions Dropdown

Payroll Journal Report

Payroll Journal Report

Reports - Payroll Journal

Reports - Payroll Journal

IMPACT

KPIs

The new Payroll feature quickly became a core part of the product experience, driving strong adoption, engagement, and retention, along with high task success and positive user sentiment.

40,000+

monthly active users

89%

adoption rate

92%

engagement rate

95%

retention rate

+47

net promoter score

88%

task success

How We Measured Success

  • Adoption rate (89%): Percentage of users who interacted with Payroll after adding it to their subscription (post-launch).

  • Engagement rate (92%): Percentage of active Payroll users performing meaningful actions monthly, such as running payroll and payroll reports.

  • Retention rate (95%): Percentage of users who continued using Payroll month-over-month, based on active Payroll usage.

  • Task success rate (88%): Percentage of users who successfully completed a payroll run each month.

  • NPS (+47): Based on in-app and email surveys (majority of respondents rated 9-10), with feedback highlighting ease of use, speed, and reliability.

Usage metrics were tracked via FullStory, and survey feedback was collected using Pendo.

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.”

Business Owner

PROJECT DETAILS

Project Details

  • Role: Senior Product Designer, UX Researcher

  • Company: FreshBooks

  • Industry: Finance

  • Market: B2B, SaaS

  • Team: Senior Product Designer (me), Product Manager, Engineering

  • Framework: Agile

  • Tools:

    • Design: Figma, Zeroheight, Miro

    • User research: UserInterviews.com, Condens

    • Project management: Jira, Confluence

    • Product analytics: Fullstory, Pendo, Looker

  • Year: 2026

  • Platform: Web

  • Link: FreshBooks.com