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:
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.
" 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.
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
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
The combined design for Cash Withdrawal and Cash Deposit that user can easily switch for different cash needs
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
Spending Page
Saving Page
Money Transfer Page
