Automating Saving Habits
From zero to one, crafting a process automation product in the banking sector
Type: Work, HMBradley
Duration: 4 months, 2022-2023
Role: Lead product designer
Background
Founded in 2019, HMBradley is a fintech startup and an online bank that encourages saving. Initially, HMBradley offered an annual interest rate surpassing market standards, making us a primary savings choice for many users. Yet, with the Federal Reserve's rate hikes beginning in March 2022, the company confronted diminishing competitiveness and necessitating a strategic shift.
Facing these challenges, executives shifted our company's focus: enhancing automated financial services and repositioning our online banking product as the primary operating account* for users. This shift paved the way for the launch of Routines in early 2023, a new product vertical within HMBradley's online banking suite.
*Primary operating account refers to the main bank account that a user would use for their everyday financial activities. This includes managing their income (like salary deposits), handling regular expenses (like bill payments), and possibly linking to other financial tools and services.
Routines
Our product mission extends from our value proposition:
Assist users in automatically executing good saving behaviors.
What is good saving behavior?
Our initial research suggests that good saving habits differ among users, yet certain best practices are widely recognized. One such practice is the 'Paycheck Split' or 'Pay Yourself First' approach. Individuals with healthier financial status typically invest more time in planning. A key principle in personal finance is to prioritize saving immediately after receiving a paycheck, followed by bill payments, and then other spending.
How does Routines achieve its product mission?
Routines enables users to create custom financial management automations by choosing triggers and actions. For instance, Routines simplifies financial planning with Paycheck Split Routine and automates fund transfers.
I led a three-person product design team through the end-to-end design for Routines, ensuring high-quality and systematic design, swift implementation and market validation. In the forthcoming article, I'll explain how I tackled different design challenges at different stages of the roadmap, illustrated through two case studies:
Case Study 1
Routines Parameter Summary: Designing the core components of Routines with optimal customizability, scalability, readability, and reusability.
Case Study 2
Templates and Routine Creation Flow: Highlighting use cases to convey user value and streamlining the creation of Routines.
Designing the core components of Routines with optimal customizability, scalability, readability, and reusability.
Routines Parameter Summary
Case Study 1
From challenges to design strategies
Through in-depth stakeholder discussions and studying best practices in the Robotic Process Automation (RPA) market, I pinpointed three key design challenges. For each, I developed corresponding strategies to address them.
Challenge
Diverse user needs and scalable design. Good saving behavior varies among users, prompting the product team to envision Routines as a flexible, customizable product that fosters user creativity. Recognizing the varied needs, the tech team is also committed to progressively expanding Routines' capabilities. This situation calls for a design that's not just adaptable to current needs but also capable of evolving to meet future demands and improvements.
Strategy
Customizability and scalability. Utilize modular design thinking to ensure Routines are customizable and scalable.
Challenge
Abstractness of Routines. Introducing Routines as a novel concept poses the challenge of clearly explaining its mechanism and functionality to new users.
Strategy
Readability. Design Routines with a clear visual presentation, ensuring its mechanism is easily understood and effectively communicated.
Challenge
Pressing deadlines and limited resources. The executives are looking forward for a quick Beta launch to test our new strategy and product with actual users. Our team started small, just three people: a product manager, a designer, and a developer. So, effectively managing design and development costs is crucial.
Strategy
Reusability. Focus on enhancing design reusability to reduce development costs.
From strategies to design iterations
Defining the core structure of Routines
In designing Routines as a customizable and scalable product, I started by distilling diverse use cases into a universal form. Collaborating with the product manager and developer, we evaluated Routines' potential applications and agreed upon a universal 'When-Then' framework to encapsulate all Routines. I then mapped the key use cases onto this framework to ensure scalability and to identify its fundamental building blocks.
The principle behind Routine's design is straightforward: 'When a specific trigger happens, then execute predetermined action(s).' Both triggers and actions contain customizable parameters, fitting into the simple formula:
Routine = Trigger + Action(s)
Take the Paycheck Split use case as an example: 'When income is deposited into my Deposit Account, automatically distribute it to different accounts or plans as per pre-set proportions.' This modular design allows users to mix and match various triggers and actions, forming personalized saving strategies. It also offers customization through the detailed definition of parameters within triggers and actions.
Visualizing Routines
After defining the product form, I concentrated on the Paycheck Split use case, exploring ways to visually represent the mechanism of Routines. I considered two main design approaches: Parameter Summary and Flowchart. After consulting key stakeholders and evaluating these options for scalability, readability, and reusability, the Parameter Summary approach was selected for its superior scalability and reusability.
Scalability: The Parameter Summary outperforms flowcharts with its flexible natural language format. Unlike flowcharts, which are ideal for illustrating money movements, the Parameter Summary accommodates the broader range of Routines' use cases. For instance, it works well representing use case like 'When receiving a transaction named HMBradley payroll, automatically categorize it as income.'
Readability: The Parameter Summary offers a slight edge over flowcharts. Its textual format is more precise and less ambiguous, making it easier to understand, especially for users not familiar with flowcharts.
Reusability: The Parameter Summary shows a significant advantage. It conveys more information in less space, enhancing its reusability across different UI components.
Final Design
The Parameter Summary clearly describes tasks using natural language, enabling users to quickly understand the mechanism of Routine. Different colors were used to distinguish between Triggers and Actions, reinforcing the concept of Routine = Trigger + Action(s). In the design, special emphasis was placed on the customizable parameters, highlighting key information.
Subsequently, I developed a set of components based on the Parameter Summary and integrated them into our design system. I worked with a developer to integrate these components into our front-end codebase right from the start of the development process. This early integration enabled a quick reuse in later design and development phases.
Results
During our internal and Beta tests, we saw significant user engagement with the Parameter Summary. This was clear from both our user session data and usability tests. We interviewed 23 people and found that 83% use the Parameter Summary to understand what each Routine does. Also, users rated the UI's clarity at 4.6 out of 5, reflecting strong satisfaction with its clarity and functionality.
The design demonstrated high scalability while we are rolling out new triggers, actions, or adding new customizable parameters to existing ones, effortlessly accommodating additional trigger and action types without major overhauls.
The Parameter Summary component, originally designed for the the Routines creation flow, were successfully reused in 6 other major modules. This reuse led to a 30% reduction in overall development cycle. For instance, a similar module like Routines templates page typically required 2 weeks to design and 1 week to code, but with the pre-built components, it is designed and coded in 2 weeks. It significantly accelerated our processes, leading to substantial labor cost savings.
My role in case study 1
Developed and defined key design challenges. Prioritized strategies to tackle them and planned design roadmaps and metrics accordingly.
Identified the core structure of the product experience and designed key components to visualize it.
Advocated for a components design approach to reduce design and development costs by 30%.
Case Study 2
Highlighting use cases to convey user value and streamlining the creation of Routines.
Routines Templates and Creation Flow
Problem identification
In the initial iteration of the Routines Minimal-Viable-Product (MVP), users create a Routine from scratch by selecting triggers and actions and detailing their parameters. While prototyping this 'Create from Scratch' flow, I started to question if relying solely on user customization could result in a steep learning curve. Can most users intuitively create a Routine and effectively choose their Triggers and Actions? While the current flow offers freedom, it might necessitate a more guided alternative.
Hypothesis validation
I brought my concerns to the team and proposed validating them before the Beta launch. We aligned on adjusting the product roadmap to test this issue during the internal testing phase, extending the test to include non-staff participants. The design team supported this testing phase with user studies.
Before - Make a Routine from scratch
Testing revealed that a significant number of users had not created their first Routine weeks into the test. Creation flow’s conversion rate and average Routine created per user were lower than expected. Among the Routines that were created, many were for basic tasks like categorizing transactions. Follow-ups interviews showed that many users hadn't thoroughly explored Routines' capabilities and were unaware of how it could assist in moving funds. Feedback indicated that many were unsure about what kind of Routine to create. Most users were less concerned about system flexibility and more interested in seeing use cases relevant to them. This confirmed the initial hypothesis: the extensive freedom offered indeed resulted in a steeper learning curve for many users.
Design solution
Based on the test results, we revised our Routines Beta Roadmap to prioritize the Routines template, simplifying and streamlining the Routine creation flow. This change aimed to lower the learning curve, reduce entry barriers, and improve Routine adoption and conversion rates.
After - Make a Routine by applying a template
The new Routine creation flow, compared to the original “Create from Scratch” method, guides users through template-based initiation, simplifying and intuiting the process. Consider the Paycheck Split example, where the template streamlined its creation process from over 40 steps to just 7. I led the design team in adding a Routine Templates page and producing the first batch of templates based on previously defined use cases. Users begin at the Routines Templates marketplace to choose and try preferred templates. These templates, by pre-filling most parameters, expedite Routine creation and confining customizability to where it is most necessary. I designed the template UI using the existing Parameter Summary components to accelerate the design and development pace.
Templates marketplace screens
To further remove user friction I redesigned and incorporated empty state prompts for certain parameters. For instance, in the Paycheck Split use case, if a user hasn't set up a Saving Plan, the Summary control offers guidance to assist in the creation process, smoothing any hurdles in the flow.
Create a Plan while creating a Routine
Results and impact
The introduction of the Routine Templates significantly improved Routines metrics.
Routines Adoption Rate multiplied by about 3x.
Routines' daily active users multiplied by 1.47x.
Routines created per user rose by 183%.
58% of Routines were created from templates.
The conversion rate for the creation flow +21%.
These metrics show that the launch of Routine Templates was a success. Adoption rates tripled, showing more HMBradley users are using Routines. Growth in DAU and Routines per user indicates strong engagement. The fact over a half of Routines were created from templates and the increasing conversion rate The mention of over half of Routines being created from templates, coupled with the increase in conversion rates, highlights their effectiveness in making routine creation easier. Overall, these metrics reveal that templates are not only widely used but also inspire users to create and personalize their own Routines.
The empty state optimization also proved fruitful. 32.8% of users created a brand new plan while using a Routine template, and among these, 12% created their first Savings Plan through Routines. This highlights the template designs' success in boosting user engagement for both Routines and HMBradley’s overall ecosystem.
User feedback has been positive. It sparked lively discussions and excitement in the HMBradley user community, indicating strong user engagement. Many find the templates inspiring and enjoy experimenting with them, either by testing them directly or using them as a starting point for their own custom routines.
My role in case study 2
Identified potential user problems and established validation methods supported by quantitative and qualitative data.
Influenced the product roadmap and release plan from an user experience perspective.
Designed key user flows and components.
Led a design team of two, overseeing resource allocation, requirement prioritization, and output review.
The purpose of design iterations is to identify and validate hypotheses. Designing something new, especially in a fresh field like Banking and Robotic Process Automation, is all about navigating ambiguity. You're not always sure where you're heading. The main thing I learned? Prioritize and align on what matters early on and stay flexible. I focused on nailing down a few key design decisions, then refined and validated them. Along the way, I kept an open mind, ready to switch gears based on what the users told us and what the data showed. This approach was essentially a systematic exploration, figuring out what works and what doesn't, step by step.
Takeaways
Using a modular design and a design system, go fast by going slow. In the early stages of a project, it's tough to push for a component-driven approach because the company often prefers to see quick results. Building a design system might seem like a delay. However I found that creating reusable components early pays off. It cuts down the workload later and speeds up the entire project. When I encountered pushback on using a design system, I started small with highly reusable components and showed their benefits gradually. This approach helps the team see the value and gets them on board with the design system over time.
High customizability and targeted use cases can coexist effectively. I've noticed that users often gravitate towards content that resonates with them and look for intuitive use cases, especially when they first encounter a new product. Working on Routines, I learned that while highly flexible products offer great freedom, this can sometimes be overwhelming. In a product's early stages, drawing in users with clear, specific use cases tends to work better. As users get more comfortable, encouraging them to explore and customize in their own way becomes more valuable. This strategy strikes a balance between providing initial guidance and allowing later customization, meeting the needs of both new and experienced users.
Skills utilized
Project and stakeholder management, roadmap planning, task allocation, user research, define design strategy and metrics, user flow design, key component and interface design, design system, usability testing, user interview, user data analysis.
