PROJECT OVERVIEW

Bank Reconciliation

Bank Reconciliation is a platform in FreshBooks where business owners can effortlessly import and manage their bank transactions so they’re able to keep their books organized.

I’ve designed a new feature: Import Transactions From File.

Bank Reconciliation - Import From File

Bank Reconciliation - Import From File

FEATURE EXPLAINED

What is Bank Reconciliation?

Bank Reconciliation allows business owners and accountants to match bank transactions with FreshBooks entries to ensure the balance sheet reflects the actual bank account balance.

This is optional but highly recommended for users. It can be done at any time or as part of a daily, weekly, or monthly routine.

    1. By comparing the transactions that the business owner has entered into FreshBooks to the source of truth (money that has actually left their bank account), they can ensure their accounting books in FreshBooks are as accurate as possible

    2. Makes the business owner’s workflow a lot easier, so they don’t have to create journal entries in order to have an accurate balance sheet (e.g., to allocate certain cash transaction to a separate bank account and to get them out of petty cash)

    3. If a business gets audited, one of the first things that auditors will do is to compare owner’s bank statements against their general ledger (what they entered in their accouting software) to see if something is missing or added in to make sure their books are accurate and not fraudulent. Reconciled transaction make the audit process a lot smoother because the owner has already matched everything up in their bank account

    1. Connect a bank account

    2. Set an Opening Balance

    3. Start matching

PROBLEM DEFINITION

No ability to add multiple transactions at once

Previously in FreshBooks, business owners and accountants had to enter transactions manually (one at a time), which was a slow and inefficient method for handling multiple entries. This limitation caused friction, discouraging users from reconciling transactions regularly.

Adding Transactions in Bank Rec - Before

UX STRATEGY

UX strategy

Vision

A platform where business owners can effortlessly import and manage their bank transactions so they’re able to keep their books organized.

Goal

Help business owners quickly and confidently import and manage bank transactions, increasing adoption, engagement, retention, and task success.

Plan

Make the process of importing transactions quick, efficient, and intuitive, reducing friction and ensuring accuracy.

DESIGN PROCESS

Design process

Due to a tight timeline for this project, the team and I had to scale down the Design Thinking process, leaving out some aspects of user research such as user interviews and testing.

However, we leveraged product analytics, insights from customer feedback, and survey results.This enabled us to develop a hypothesis that guided us toward a solution that addressed issues users were experiencing with Bank Rec.

Discovery

• Analytics review

• UX audit

• Personas

• Journey map

• Competitive analysis

Ideation

• User flows

• Wireframes

• High-fidelity design

Prototyping

• High-fidelity prototype

Implementation

• Final design

• Design handoff

DISCOVERY

UX audit

Conducting a UX audit helped me identify gaps in the customer experience related to adding bank transactions.

Journey map

When creating a journey map, the goal was to illustrate specific pain points that users face when trying to add multiple transactions on the Bank Rec page. I identified opportunities and quick wins to streamline their workflow.

Competitive analysis

Bulk import and transaction management are common features among competitors, though many solutions fall short in terms of user-friendliness, which can lead to business owners feeling unsure about using these tools effectively.

IDEATION

User flow

The user flow shows a straighforward and quick process of adding multiple transactions.

Wireframes

Wireframes were created based on the final user flow, using UI components from the design system while incorporating the new feature.

SOLUTION

Easily import all transactions

A platform where business owners can effortlessly match transactions from their bank account with records in their FreshBooks account, no matter what bank or credit card they’re using so they’re able to keep their books organized.

By having the ability to import a CSV file into FreshBooks, business owners can now easily manage their Bank Reconciliation transactions to keep their books well organized.

Note: Bank Reconciliation is only available on Plus, Premium, and Select plans while Trial users can access the feature for 30 days.

    1. Get the account statement (CSV file) from the bank

    2. Adjust the CSV file for importing if necessary

    3. In FreshBooks, go to: Accounting, click on the “x left to match” link next to the Bank Account you want to reconcile in

    4. In Bank Rec, under Unreconciled Bank Transactions, click on the Add Bank Transaction button and then Import From File

    5. Select a CSV file from the computer

    6. Match the fields to the columns from the file using the dropdown (e.g., Date should match to the Date header inside the file)

    7. Once you’re done matching and specifying the Date Format, click on Import Transactions

    8. New transactions will be added and you can start reconciling them. If the new transactions are from before the Opening Balance Start Date, the Start Date will need to be adjusted to include these new transactions before they can become available for matching

Adding Transactions in Bank Rec - After

DESIGN

Final design

To preserve the user’s workflow, the import experience is presented in a modal, enabling completion without leaving the current page. After importing a CSV file, users remain in the modal to match columns from the right side with the corresponding fields on the left using input fields.

You can view the prototype to explore the design in more depth.

Note: the prototype has limited functionality.

Design principles

  • Adapt to the Task

  • Maintain Flow

  • Speak Human

  • Set Expectations

  • Don't Add, Evolve

  • Inclusive by Design

Challenges and trade-offs

Helping users recover from errors

The uploaded CSV file may contain the following problems:

  1. The CSV file itself is corrupt

  2. There are no header columns in the file or one header column is missing

  3. The file is larger than 5 MB

To help users recover from these errors, the system surfaces a toast message after upload that explains the issue and suggests next steps. This approach is consistent with FreshBooks’ system-wide messaging patterns and provides clear, immediate feedback.

However, resolving these errors requires users to leave FreshBooks, fix the file in an external tool, and then return to complete the flow. While this goes against the FreshBooks principle of Maintain Flow, it represents a trade-off: these errors come from outside the system and cannot be predicted or prevented within the product.

The images below show the user flow for importing a CSV file and matching transactions.

Bank Reconciliation - Unmatched

Bank Reconciliation - Unmatched

Add Bank Transaction - Import From File

Import From File - CSV File - Selected

Import From File - CSV File - Selected

Import From File - Match Modal - 1 Column Amount Format

Import From File - Match Modal - 1 Column Amount Format

Import From File - Match Modal - 2 Columns Amount Format

Import From File - Match Modal - 2 Columns Amount Format

Import From File - Match Modal - Amount Spent - Dropdown

Import From File - Match Modal - Amount Spent - Dropdown

Import From File - Match Modal - Filled State

Import From File - Match Modal - Filled State

Import From File - Imported Transactions

Import From File - Imported Transactions

Bank Reconciliation - Matching Transactions

Bank Reconciliation - Matching Transactions

Bank Reconciliation - Matched

Bank Reconciliation - Matched

Bank Statement - CSV File - Example

Bank Statement - CSV File - Example

Note: The “Description” and “Category” columns are optional but can be included in the CSV file before importing to improve matching accuracy.

IMPACT

KPIs

The new Bank Rec feature made a strong impact following its release, reflected in key success metrics and positive customer feedback.

30,000+

monthly active users

82%

adoption rate

90%

engagement rate

92%

retention rate

85%

task success

+40

net promoter score

How we measured success

  • Adoption rate: 82%
    Percentage of users who interacted with the “Import Transactions from File” feature after gaining access to Bank Reconciliation (post-launch).

  • Engagement rate: 90%
    Percentage of active users performing meaningful actions within the import workflow monthly, such as uploading files and mapping transactions.

  • Retention rate: 92%
    Percentage of users who continued using the “Import Transactions from File” feature month-over-month, based on active feature usage.

  • Task success rate: 85%
    Percentage of users who successfully completed a transaction import each month.

  • Net Promoter Score (NPS): +40
    Based on in-app and email surveys, where most respondents rated the experience 7-10, highlighting the streamlined import process.

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

Customer feedback

“Importing transactions used to take forever and required multiple steps. With the new feature, I can upload my file and have everything reconciled in minutes. It’s a huge time-saver.”

Business Owner

PROJECT DETAILS

Project details

  • Role: Senior Product Designer, UX Researcher

  • Company: FreshBooks

  • Industry: Finance

  • Market: B2B, SaaS

  • Team: Product Designer, Product Manager, Engineering

  • Frameworks: Design Thinking, Agile

  • Tools:

    • Design: Figma, Zeroheight, Miro

    • Project management: Jira, Confluence

    • Product analytics: Fullstory, Pendo, Looker

  • Year: 2023

  • Platform: Web

  • Link: FreshBooks.com