Consumer banking
Spruce is a full-service mobile banking app that BCG incubated for H&R Block to enable new financial engagements with their customers and help people with their finances by introducing banking services.
H&R Block
Boston Consulting Group
Spruce building journey was 12 months, and it launched in the US in January 2022.
As part of the founding team, I worked on the project from end to end as a Senior Product Designer to lead UI/UX ideation and solutions.
Project Context and Team Responsibility
Project Context
It was a 12-month concept-to-launch journey to incubate this new banking product. The building journey went through 3 major phases: validating the customer needs, identifying go-to-market feature sets and building MVP experiences.
​
The project started with a 20-person team, including 2 product designers, to validate the banking idea. After validation and getting into the product-building phase, the team expanded to ~80 people with 5 product designers to cover the design deliverables.
Concept
Jan. 2021
Jan. 2022
Launch
My role and responsibilities
As part of the founding team, I worked on the project from end to end as a Senior Product Designer to lead UI/UX ideation and solutions. My contributions focus on leading user tests, identifying MVP features, defining interactive patterns, crafting the design system, and multi-stakeholder management. ​There were 6 primary MVP features built in the 12-month journey, and I led 3 out of the 6 features to bring the product to life.
Phase 1 - Concept Validation
Conduct user research and interviews to understand customer needs, define personas, and visualize user journey
Ethnographic research - As we started from a new product concept and to validate market needs, we conducted 11 ethnographic research sessions across the country to interview and listen to our targeted customers to understand their financial needs in-depth.
A diverse set of personas and financial needs emerged from the research - After ethnographic research, I drafted 4 personas based on the overarching learning to lead team conversations and ideations in clarifying the target audiences.
Made strategic decisions to narrow down and target the right audiences - After leading stakeholder discussion, I helped the team to land on 2 prioritized user personas - The Rookie and The Provider - as they are the people in the most need of financial help and have huge potential for financial growth.
Built financial journey to specify user needs and explore areas of opportunity - I drafted the user journey and collaborated with the team to align on the user needs and pain points we aim to address. More importantly, I get to define and prioritize the areas of opportunity in the feature level to lead the design team to move on to first round of feature wireframing and testing.
Convert personas' financial needs to areas of opportunity, and create wireframes to test and validate MVP features in each.
Phase 2 - Desirability Test and Define MVP Feature Set
Delivered testing materials with various fidelities and conducted multiple rounds of desirability tests to learn the desirable banking features and solutions from target audiences
After clarifying areas of opportunity through finalizing target audience financial journey, I started to collect ideas and create sketches to conceptualize area of opportunities. We used low-fi mobile sketches for the first round desirability test to gather direct user inputs and test desirability around the areas of opportunity.
Inspiration Gathering + Framing
Concepting + Value Testing
The design team and I continued to iterate the screen wireframes along the multiple rounds of the user desirability test. The screen iterations and fidelity increase are guided by user feedback and learnings that we collected along the way.
Built block sketches to ideate wireframes with options
Increased wireframe fidelity for 2nd round of desirability test
I converted identified areas of opportunity to mid-fidelity wireframes and ran moderated tests to define the MVP experience in each. The desirability test was set up in 90-minute sessions and conducted 8 sessions with people's financial situations fitting into our target audiences. Below is the Miro board I used in the desirability test to capture desirability and usability insights.
Miro board highlight - The testing wireframes and captured user insights of the "Account View" feature​
* Testing wireframes
* Testing learnings
We tested in total of 8 wireframed features mapping the areas of opportunity. Walking out of the test, we prioritized and landed on 6 features to implement for MVP launch.
Phase 3 - MVP Feature Delivery and Usability Test
Iterated the tested wireframes and redesigned with Spruce UI to conduct usability test and finalize screens
The Spending page view and its various statuses - According to the usability test, customers liked the clean and color-coded transaction line item design as it created easy visual cues to read transaction types and balance statuses fast. Future more, the bold color application and friendly UIs aligns with Spruce's innovative and customer-centric design approaches.
Default view and transactions
Additional features under spending page
Empty and no transaction view
Overdraft status of the spending page
Out of overdraft communication
An intuitive solution for money transfer that constrains users to only focus on one action at a time - The dynamic solution challenged the stereotype and built the iconic interaction patterns of the app. According to usability test results, 100% of users loved this dynamic money transfer flow, and the design speeds up transactions by 50% by allowing users to think precisely and act fast.
Money transfer key screens
Money transfer prototype and UX highlights
All-in-one money movement CTA is designed to contain various money movement activities in one place
Intuitive and dynamic solution for money transfer that constrains users to only focus on one action at a time
One creative flow to solve 2 distinct cash needs - The combined design for cash withdrawal and cash deposit allows customers to search for different cash needs easily. The entry of the ATM and cash deposit locators are the secondary features of the Spending page and customers click the "Find ATM and cash deposit locations" card to initiate the ATM/deposit locating experiences.
ATM and cash deposit locator prototype and UX highlights
Combined design for ATM cash withdrawal and cash deposit locator
Default map view to locate services nearby based on customer locations
Friendly and responsive search interactions to serve searching needs to locate services
Digital card - Digital card is a convenient feature designed for customers to display card information and use directly for online shopping to save customers efforts taking the card out of their wallet. As a side feature under the Spending page and the first feature under the Profile & Setting page, customers can click on the digital card UI to display and read card details.
Spruce implemented in mobile, tablet, and desktop experiences for customer acquisition
We were aiming to release the product to 6.6 million existing H&R Block customers. Given the large number of potential users, we launched Spruce design to various platforms and devices for easier and successful adoption. To achieve this, I built the Spruce design system that complies to 8-point system for responsive implementation, and crafted the design library for cross-feature consistency.
Mobile
Tablet
Desktop
Mobile
Tablet
Desktop
Spruce Achievements
Spruce is launched to 6.6M digitally engaged H&R Block customers on Jan. 20th, 2022.
At the 50-day launch, Spruce reached 16000 users with 30 million dollars of total user deposit.
By end of 2023, Spruce achieved 316,000 user sign-ups and 450M dollars in customer deposits.
