Routines Mobile Experience
Overview
As the lead product designer, I focused on designing the mobile experience for the entire Routines product, prioritizing usability and mobile-specific design principles. Informed by data-driven insights, I conducted user research to understand user behaviors, and pain points. Through iterative design cycles, I crafted intuitive user flows, refined wireframes, and prototypes to ensure a seamless and engaging mobile interface. Collaborating closely with cross-functional teams, I incorporated feedback to create an elegant and functional mobile experience for users to effortlessly manage their Routines.
Learn more about HMBradley Routines.
Final Designs
BEFORE
Credit home page
AFTER
The Process
OPPORTUNITY
Introduce our new product to the mobile app
With the creation of an entirely new product - Routines - we needed to provide the optimized experience for our mobile app to increase engagement while always prioritizing usability and visual clarity.
ANALYZING USER DATA
Because we launched first on web, I was able to gather data from the wider team about how users were engaging with Routines to answer the questions, "What is working?" "What is confusing?". Some of the most common behaviors we were seeing were that 67% of customers were more comfortable creating from templates rather than from scratch, and only 15% of existing users had engaged with the product at all.
DESIGN GOAL
Create clear and intuitive navigation across the product
Since the Routines product was brand new and quite different than anything in the banking space, it was essential that desired actions were simple, navigation was intuitive, and the ability to explore and learn was available at any point in the flow.
SCOPE PROJECT REQUIREMENTS
Iterative releases with extensive testing
Working directly with our team's frontend engineer, we scoped out how each iteration would be rolled out to the customer, starting with just viewing existing Routines, and adding more and more features such as searching, filtering, creating, editing, and creating from a template.
COMPETITIVE ANALYSIS
Analyze how other institutions tackle this problem; What works and what could be better
I researched the way that other financial institutions show the same information we wanted to clarify. Not to my surprise, many of the big banks like Bank of America and Chase struggled with showing too much information. Making it indigestible to the average user (myself included).
USER FLOWS AND INFORMATION ARCHITECTURE
Organize and structure each element of the problem into a digestible flow
Because there are so many puzzle pieces that make up a credit account, it was important that we were displaying them in an organized and structured way. Finding your statement balance in the middle of your list of dining transactions would be confusing. Writing out the main user flows someone would take (making a payment, setting up auto-pay, etc) plus laying out the IA of all these pieces of credit information was crucial to setting the bigger picture. It is easy to get lost in the details of a design you stare at for 8 hours a day, so having structure to step back to always helps me recalibrate.
DESIGN REVIEWS
Recording explainer videos for async feedback session
It is not always easy to put a 1 hour time slot on the calendar for all stakeholders, so I decided to use Loom to host asynchronous design reviews (3 total, 5 minute videos each!). I tagged the specific stakeholders I wanted feedback from plus posted in public channels for more visibility into what our credit team was up to. The responses were great and the feedback was valuable- arguably just as valuable compared to if we did live on Zoom.
USER TESTING
Using Maze to validate design decisions and identify user mental models
User testing!! (Likely my favorite part of the design process). Seeing the designs in action was great. There is a ton to learn from user testing and I shared the test with users from Discord (a group of HMBradley’s most engaged users who created the channel themselves) and from paid users on Maze.
Working with our director of UX Research, we created a test that would show us through user actions where common misconceptions were with the design, what was confusing, and what was crystal clear. Something fascinating was that not all click results should dictate a change to the design, but rather, some behaviors revealed a lack of education around certain topics. Credit cards are confusing! I would not call myself close to an expert even today. This user test showed us that HMBradley can educate more people about topics like statements, credit availability, and Auto-Pay.
COMPLIANCE AND LEGAL REVIEW
Review design flow and content with legal teams to satisfy FDIC laws and regulations
The last part of the process before handing off to engineers is reviewing with the legal/compliance team. At HMBradley, we have internal lawyers and also external lawyers that all must approve our work. This process includes thorough explanations of the project and all changes, balancing competing priorities between being legally compliant but also not impeding on design goals (clarity, context) for the end user, and of course doing said process in a timely manner to get this shipped!
Our process was on MarkUp with the internal legal team- a platform making it easy to make and track comments on any PDF/PNG file, and Jira with our external legal team.
ENGINEERING HANDOFF
Leading Design x Engineering handoff meeting
When the designs are approved and finalized, I schedule a live design x engineering kickoff meeting to explain the new changes + leave room for any questions. Handoff does not mean that I am no longer responsible for the designs. I always am open to answering any questions throughout the build process. Figma files are organized in a clear way to point out every new update.
Final Designs
Credit home page
Payments page
IMPACT AND METRICS
Time to first purchase down by 40%!
The simplified and improved experience with the credit account allowed users to trust the platform more, leading them to a decrease in the time to make their first purchase.
CC Payments made from an HMBradley deposit account up by 30%
Payments from the HMBradley Deposit account became more consistent, meaning there was potentially more trust in engaging fully with the HMB ecosystem and not having just one foot out the door with other financial institutions.
IMPROVEMENTS AND NEXT STEPS
In the next iteration, add educational pieces to address knowledge gaps found in testing
During user testing, it was found that there were many knowledge gaps when it came to credit related terms. Terms like available credit, total credit, remaining balance, current balance, and concepts about payments in general all were confused by many as shown in the heat maps. Empowering users to be financially literate through our platform would be a very impactful next step to this project.