QuickBooks
Payments
Redefining how SMBs understand their payment status, gain fee transparency, and get paid
Role
Lead product designer
Team
PM partner
Developer partner
Skills
UX/UI Design
Visual Design
Prototyping
Duration
12 weeks
A primary source of truth
The Deposit List is the primary source of truth where business owners 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 contributions
I designed a new framework and refreshed interface for the Deposit List using new design system patterns and introducing new features shaped by usability testing and feedback through deep customer research and a collaborative iterative approach,
Problem
Business owners are having a difficult time tracking and understanding when they will receive their deposits.
Goal
Help customers better understand where their money is and when they are getting paid?
Outcome
↑125%
in unique daily page visits
↓20%
decrease in support tickets related to deposits
Creating a new framework
I improved information architecture by designing a new mental model for how information could be understood and located using updated design system components. High-priority information is presented up front on the main table. Granular information can be accessed by clicking into a row to open more details.
Tables
Toggle between two tables and view their deposits on either a "batch-level" or "transaction-level."
Flexible information organization
This new experience provides an easier way for business owners to see their deposits. The table can toggle back and forth between information about deposits and individual transactions, so customers have options to flex the table as they need.
Drawers
Click into line items to open a drawer to view more detail around the status of their deposits.
Accordions
Expand and collapse accordions to gain further insight into the transactions inside a batch.
Track money movement
The new deposit activity tracker gives users a more transparent insight into the progress of their deposits, providing confidence in understanding when their money was, is, and will be.
Click to see before
Where we started…
Discovering opportunities
Through customer interviews, I discovered the top pain points when customers try to learn about their deposit statuses,
Methodology
10+
moderated, customer interviews
70+
feedback submissions via Qualtrics
“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
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..
Initial explorations
After 100+ divergent explorations and multiple rounds of feedback, I narrowed on 3 key concepts.
Through a competitive analysis and capturing analogous experiences inside the QuickBooks ecosystem, I created 4 low-fidelity concepts to map out new frameworks.
These frameworks leverage out-of-the-box patterns to ensure a scalable framwork that is unified with the product ecosystem.
Concept 1
Concept 3
Concept 4
Constraints and tradeoffs
"What if…"
I collaborated with the design systems team to test and validate each proposal. Through feedback with stakeholders, I discovered that these iterations would not support all levels of information.
My team and I were constrained by the technical constraints of the design system patterns and the engineering partner's bandwidth.
Iteration 1
Iteration 2
Iteration 3
Final framework
Given the tradeoffs we needed to make, I landed on this final framework that leveraged customer familiarity with the product to have successful information architecture, as well as feasible to build within time constraints.
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.
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.
Emily Tang © 2024