top of page
Spruce Header Image.png

Spruce is mobile banking for people who want to be good with money. It empowers users to build healthy financial habits every day through its features, such as customizable saving goals, automatic cash back, early paycheck options, overdraft protection, credit monitoring, tax refund allocation assistance and more.

As part of the founding team, my design work continues to shine at H&R Block Spruce Mobile Banking

My Role
Mar. 2021- Jun. 2021

In the product building process, I owned multiple work-streams and led agile design process to shape the new banking product from MVP validation to market launch. I primarily engaged in proposing design solutions, running usability tests, delivering frictionless experiences, and building design system and UX patterns for mobile, tablet and desktop environments.

Key Deliverables: Usability testing, Wireframe, UI and UX delivery, Prototype, Design implementation

In 8 months, we took Spruce from concept to launch. The 0-1 product building process:
Building flow.png
The product defining and building process


Product proposition

We listen to our users and find solutions to their needs. We believe in a future that creates equitable access to easy and affordable financial services - inspiring confidence, easing financial burden, and helping people live a better life, today and tomorrow.

Decorative Circle.png

" During the pandemic there have been some hardships. Had to pay bills and keep credit spot on. We were a little more free before the pandemic. "


- David M.

" When I have a high utility bill or a medical emergency or something like that I get a payday loan. It's convenient and I have 4 months to pay it off. "


- Josie N.

Target user community

Spruce target on people with $30-$60K household income as financial health challenges are highly correlated to income, with $30–60K providing a sweet spot of financial needs


Their financial journeys come with a range of pain points and needs, which our solutions aims to address.

User pain points.png
Learn from users and define Spruce key features

For understanding user desirabilities and prioritizing proposed financial features, I mocked a series of key user moments/screens and ran moderated testing to test target group's preferences and gather feedback. Below shows the Miro board I used for presenting multiple ideas of Account View features and capturing Desirability and Usability insights in the testings.

Information Architecture of the Spending Page Flow
Spending Flow.png
Create wireframes with options and test with users to define the MVP experience

Before we landed our branding strategy, I leveraged the existing H&R Block design system to create Spruce wireframes to get up with speed on design and test with users for preferences. Later after the branding strategy is settled, I shaped and complied the Spruce design system to all features. Below are the 2 ideas of the Spending page that I used for desirability testing.

Demonstration of some of the final key features

The onboarding flow for a smooth account creation


The spending page and its sub-flows of the View Card and Transactions

ATM Locator.png

The combined design for Cash Withdrawal and Cash Deposit that user can easily switch for different cash needs

Money movement.png

Aggregated Money Movement CTA adopted for containing multiple money moment activities in one place for simplicity and ease of use.

The responsive and guided Money Transfer design approach speeds up the transaction task by constraining users to only focus on one action at a time by minimizing irrelevant contents in the screen view. 

The banking product is delivered with mobile, tablet and desktop environments for inclusive market launch
Multiple ends.png

Spending Page

multiple ends2.png

Saving Page

Multiple ends3.png

Money Transfer Page

Spruce is launched to 6.6M digitally engaged H&R Block customers on Jan. 20th, 2022
bottom of page