QuickBooks
Payments

Redefining how SMBs understand their payment status, gain fee transparency, and get paid

Role

Lead product designer

UX researcher


Team

PM partner

Developer partner

Skills

UX Design

Visual Design

Prototyping

Duration

13 weeks

CONTEXT

The Deposit List is the primary hub where SMBs can learn about their payments. It acts as an entry point for SMBs to discover when and what payments are deposited into their bank accounts and address holds or delays related to their funds.

MY CONTRIBUTION

Through deep customer research and a collaborative iterative approach, I designed a new framework for Deposit List 2.0 using new design system patterns and introducing new features shaped by customer usage and feedback.

Problem

Small and medium-sized business owners are having a difficult time tracking and seeing when their money will be enter their bank accounts.

Goal

How might we help customers better understand where their money is and when they are getting paid?

Outcome

+125% increase in unique daily users


Q2 2024 launch

Current Experience

Opportunities

Through customer interviews, I discovered SMBs top pain points when learning about their deposit statuses.

Low and slow discoverability

Customer data is hidden away in separate drop-down batches, taking extra clicks to find information.

Poor visibility of system status

Customers have no way of seeing the status of their deposits or tracking where their money is located after a transaction.

Inefficient browsing

Infinite scrolling on the Deposit List page makes it inefficient for customers to find deposits from a specific date.

Poor information architecture

Outdated patterns make the Deposit List look inconsistent with rest of the product, forcing customers to re-learn how to find information and complete tasks..

“I don’t like how everything is minimized, I don’t want to have to open multiple pages to get to the details.”

Viewing Details

Visibility of System Status

"How can I allow my customers to make payments through this system when the money is put on hold without any indication of when it will be available?"

"We need a filter here to be able to go to the exact date."

Feature/Improvement Request

Solution

Increase the utilization of the Deposit List and provide transparency around deposits.

Project Goal 1 (MVP/V1)

Improve information architecture by reorganizing information using updated design system components

Tables

Viewing deposits (high-altitude)

Toggle between two tables and view their deposits on either a "batch-level" or "transaction-level."

Drawers

Viewing deposit details (low-altitude)

Click into line items to open a drawer to view more detail around the status of their deposits.

Accordions

Viewing transaction details

Expand and collapse accordions to gain further insight into the transactions inside a batch.

Project Goal 2 (V2)

Introduce new features to assist customers in their day-to-day workflow.

Status Message

Visibility of System Status

High-altitude visibility of deposit status gets information to customers quickly.

Scalable to include an entry point for help center that empowers customers to resolve issues

Activity Tracker

Progress details

Gives customers insight into the progress of their deposits, providing confidence and transparency

Filters

Flexible viewing experience

Allows customers to customize what their deposits and transactions are shown according to their needs

Research, discovery, and empathy

10 customer interviews, 70+ qualitative feedback submissions

I drove 10 customer interviews and worked with my PM partner to collect 70+ VOCs to understand how customers use the Deposit List and create a "wish list" of what customers hope to accomplish or see.

Behavioral data points

Using the Follow Me Home method, I lead 10 user tests on the current experience with QuickBooks experts and accountants to directly observe how they perform day-to-day tasks and identify top pain points.

Cross-functional ideation

2x2 Matrix and RICE scoring

I led cross-functional workshops using the 2x2 Matrix and RICE method to help our triad prioritize project initiatives and ideate on high impact, low effort solutions.

Iterative approach and
rapid prototyping

After 100+ iterative screens over two weeks and multiple rounds of feedback, I created a new framework for the Deposit List.

Through a competitive analysis and capturing analogous experiences inside the QuickBooks ecosystem, I created 4 low-fidelity concepts to map out new frameworks.

Concept 1

Concept 2

Concept 3

Concept 4

I created 4 concepts using out-of-the-box patterns to create a scalable framework that is unified with the product ecosystem and to avoid reinventing the wheel.


QuickBooks uses multiple DataGrids across the entire product. The challenge was to determine which DataGrid fit our use case.


I designed multiple functional prototypes to test different tables to discover the best way to present both high- and low-altitude info.

Iteration 1

Iteration 2

Iteration 3

I collaborated with the design systems team to validate each proposal. I discovered that nest rows would not support all levels of information we wanted to show.


This piece of feedback helped me land on the final framework.

Final framework

The most challenging part of the project was practicing Information Architecture principles and deciding how to show granular details.


The final framework follows the Principle of Disclosure and uses three patterns to deliver relevant details at points where customers need it.

End-to-end designs

As part of an end-to-end approach, I anticipated and proposed UX solutions that considered the entire product experience from beginning to end, including system and user states.

Click to see before

Final screens

Takeaways

Present often and early

Getting feedback and presenting in front of stakeholders earlier on. in the process helps me get to high-fidelity screens that are backed by the design system and cross-function input more efficiently.

Get cross-functional

Involving PM and Engineer partners in ideation and iteration phases earlier on helps everyone stay aligned, ensuring UX solutions aligned with business goals and implementing a seamless hand-off.

Always design for the (un)happy path

End-to-end design thinking involves thinking beyond the immediate user journey. My PM partner and I captured every system and user state by going through the product ourselves and included error states in our product requirements document.

Design boldly, pivot easily

Don't be afraid to present spicy, ideal solutions. But, be prepared to pivot because the ideal solution is not always the best or feasible.

Give them their flowers <3

Thank you to my triad partners, Sam and Zander, and the QuickBooks Money Design team for their collaboration and mentorship.

LinkedIn

Resume

Back to top

itsemitang@gmail.com

  • Product Designer

  • Wordsmith

  • Cilantro defender

  • Eczema survivor

  • Oddly-specific playlist curator

  • Dehydrated cafe explorer

  • Unused notebook collector

  • Peanut hate club president

  • Lover girl

Emily Tang © 2024