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.
Resume
Back to top
itsemitang@gmail.com
Emily Tang © 2024