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 Transcations from a File.

Feature Explained

What is Bank Reconciliation?

Bank Reconciliation (Bank Rec) allows business owners and accountants to match any bank transactions to any FreshBooks Entries in their account so that the cash balance on the balance sheet matches their 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. Connect a business bank account
2. Set an Opening Balance
3. Match each transaction in the bank account to entries in FreshBooks
4. Add, edit, delete or undelete transactions as needed
1. By comparing the transactions that the business owner has entered into FreshBooks to the source of truth (money that has actually left your bank acount), we ensure that their accounting books in FreshBooks are 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

Problem Definition

No ability to add multiple transactions at once

Previously, in FreshBooks, business owners and accountants could only add transactions manually, one by one. This was a cumbersome process for scaling users who had multiple transactions as they wanted to add them in bulk. The lack of functionally has also put a strain on customer support.

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

Improve the transaction management experience for scaling business owners and accountants.

Plan

Make the process of importing transactions quick, efficient and intuitive.

Process

Design thinking

Due to a tight timeline for this project, the team and I had to scale down the design thinking process, leaving out the user research aspect of it (user interviews and testing).

However, we leveraged existing data and insights from prior customer feedback, metrics, 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

• UX audit

• Personas

• Journey mapping

• Competitive analysis

Ideation

• User flows

• Wireframes

• High-Fidelity design

Prototyping

• Prototyping

Implementation

• Final design

• Design handoff

Discovery

UX audit

Conducting a UX audit helped us identify gaps in the customer experience.

Journey mapping

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 your computer
6. Match the fields to the columns from your file using the dropdown (e.g., Date should match to the Date header inside your 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

Outcome

Final design

For the import experience, this feature leveraged an existing UI component — a modal, which already existed in FreshBooks’s design system. The rationale for using the modal was to enable users to maintain the flow in order to complete it without leaving the page.

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

Note: the prototype has limited functionality.

Design principles

Unfold Like an Onion
Adapt to the Task
Maintain Flow
Speak Human
Set Expectations
Don't Add, Evolve

Import From File - Match Modal - 1 Column Amount Format

Import From File - Match Modal - 2 Columns Amount Format

Import From File - Match Modal - Amount Spent - Dropdown

Import From File - Match Modal - Filled State

Import From File - Imported Transactions

Bank Reconciliation - Matching Transactions

Bank Reconciliation - Matched Transactions

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.

Result

Impact

The new Bank Rec feature had a big impact as reflected in the success metrics, and customer feedback, following its release.

30,000.000

customers impacted

82%

adoption rate

90%

engagement rate

+40

net promoter score

Metrics

Adoption rate (82%) was calculated by the proportion of users who interacted with the Import Transcations from a File feature out of the total users who have access to Bank Reconciliation, since launch.
Engagement rate (90%) was calculated by tracking users who performed meaningful actions while importing transactions from a file, per month.
Data points (via FullStory):
- Segments (to filter users)
- Event Funnels (to track feature interactions)
- Dashboards & Trends (to visualize and validate engagement)
Net promoter score (+40) was calculated using feedback gathered through Pendo surveys delivered in-app and via email. Most users rated the experience a 9 or 10, citing the streamlined transaction import process as a key strength.

Customer feedback

“FreshBooks’ bank reconciliation tools work continuously and in real time instead of requiring manual reconciliation.”

— Senior Analyst | Business Owner

Project Details

Project details

Role: Product Design

Client: FreshBooks

Team: Product Designer, Design Leadership, Product Manager, Engineering

Tools:

Design: Figma, Zeroheight, Miro
Project management: Jira, Confluence
Analytics: FullStory, Looker, Pendo

Year: 2023

Link: FreshBooks.com