Project Overview


Bank Reconciliation

Bank Reconciliation is a platform in FreshBooks where business owners can effortlessly import and manage all their transactions so they’re able to keep their books organized. I’ve designed a new feature — Import Transcations from a File.

Bank Reconciliation

Feature Explained


What is Bank Reconciliation?

Bank Reconciliation allows business owners and accountants to match any bank transactions to any FreshBooks Entries in their account so that Cash Balance on a Balance Sheet matches their actual Bank Account Balance. This is optional for users, and can be done anytime, or on a daily, weekly, or monthly basis.

    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.

UX Strategy


UX strategy

Vision

A platform where business owners can effortlessly import and manage all their 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

• Personas

• Journey mapping

• Competitive analysis

Ideation

• User flows

• Wireframes

• High-Fidelity design

Prototyping

• Prototyping

Implementation

• Final design

• Design handoff

Discovery


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 essential features offered by most competitors although their solutions often lack user-friendlies which often results in business owners not feeling confident enough to perform these actions.

Ideation


User flow

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

Wireframes

Wireframes were built following the final user flow, leveraging the existing UI components that appear on the Bank Rec page with the new feature in mind.

Solution


Easily import all transactions

A platform where small business owners can effortlessly import and manage all their transactions, no matter what bank or credit card they’re using so they’re able to keep their books organized and know exactly where they stand.

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

    1. Get the account statement (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.

Add Bank Transaction - Import From File

Import From File - CSV File - Selected

Import From File - Match Modal - 1 Column Amount Format

Import From File - Match Modal - 2 Columns Amount Format

Import From File - Match Modal - Matched

Import From File - Imported Transactions

Result


Impact

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

1,000.000

customers impacted

82%

adoption rate

90%

engagement rate

Info


Project details

Role: Product Design

Client: FreshBooks

Team: Product Designer, Product Manager, Engineering

Tools: Figma, Zeroheight, Miro, Jira, Confluence, FullStory

Year: 2023

Link: FreshBooks.com