Flow: Rethinking Budgeting Solutions
An End-to-end Saas Project
Role: UX Researcher, Design Strategy, UX/UI Designer
Tools: Figma / InVision / Adobe Photoshop / Adobe XD / Zeplin
From July 2021-October 2021, I was working with a Toronto-based start-up company, tasked with completing an 8-week project to create a compelling and practical digital banking experience.
This experience was an end-to-end user experience design process that gave me an opportunity to apply my understanding of the core concepts of UX design toward the creation of a compelling digital solution.
Methodology
My approach to the design challenge is Human-centered design.
I leveraged design thinking approach to ensure my focus throughout the process was on the people I was designing and creating for.
I wanted my project to be technologically feasible and economically applicable, but most importantly, I needed to immerse myself in people’s lives and deeply understand their demands and needs.
I want to keep the very people I’m looking to serve at the heart of the process.
Empathize
PROBLEM SPACE
Introduction: Immerse myself in people’s lives
The majority of Canadian millennials own at least one credit card, with the average amount being 3.2 cards per person.
However, only 24% of them demonstrate basic financial literacy with the majority making erratic or costly purchasing decisions, and exhibiting significantly higher levels of overconfidence than older generations.
Almost 1 in 3 Millennials use online tools to track their spending, yet nearly 50% carry a credit card balance and are making only the minimum payments, racking up significant interest charges and affecting their credit scores.
PROBLEM SPACE - Refinement
Secondary Research
Target users: Canadian Millennials who’s between 18 and 34 years old.They are lack of financial information about interest, inflation, mortgage finances, stocks, bonds, and the time value of money, as well as handy tool of managing their money.A comparison of subjective financial knowledge scores of millennials to the scores of Generation X, Baby Boomers, and the Silent Generation reveals little difference between the generations. It is notable that objective knowledge, however, tends to increase with age, and millennials have considerably lower levels of actual knowledge than the three other generations.Millennials have significantly higher levels of overconfidence than older generations.
DESIGN CHALLENGE
HOW MIGHT WE
Target users: Canadian Millennials who’s between 18 and 34 years old.They are lack of financial information about interest, inflation, mortgage finances, stocks, bonds, and the time value of money, as well as handy tool of managing their money.A comparison of subjective financial knowledge scores of millennials to the scores of Generation X, Baby Boomers, and the Silent Generation reveals little difference between the generations. It is notable that objective knowledge, however, tends to increase with age, and millennials have considerably lower levels of actual knowledge than the three other generations.Millennials have significantly higher levels of overconfidence than older generations.
RESEARCH GOALS
Understanding the User
PRIMARY RESEARCH
To understand the “why” behind the problem, I conducted six 45-minute interviews with Canadian credit card users between the ages of 25-40. I wanted to understand, categorize and investigate their pain points, frustration and motivation, in order to help me determine themes and insights for the next step.
I used empathy mapping to extract six main themes and insights:
Define
Discovering possible solutions
PERSONA & EXPERIENCE MAP
PRIMARY PERSONA
USER EXPERIENCE MAPPING
By exploring Emma, I developed a User Experience Mapping to document the complex interactions of my persona Emma as she manages and budgets her credit cards.
By putting myself in the users' shoes and understanding their experience, including what they are doing, thinking, and feeling, I was able to identify potential opportunities where I could intervene with my digital solution.
KEY OPPORTUNITIES
Ideate
Improving healthier financial behaviour
USER STORIES & TASK FLOWS
Into the phase Ideation, some newfound insights were used to author user stories, and functionality of digital solutions. From this, one core epic and main task flow was determined.
Created user stories under 3 epics to brainstorm functionalities and features for the digital solution.
These stories were generated from the perspective of the primary persona, Emma Bathgate.
As a [user] I want to [action] so that I [benefit].
USER STORY
"As a soon-to-be graduate student with limited financial knowledge, I want to learn more about credit card terms and rules so that I can utilize them effectively without negative consequences." — Emma
TASK
Emma recently got a new iPhone 13 and needs to sign up with her new phone number and retrieve previous data. She also wants to add a new credit card that she recently applied for and start browsing data and information in the app, just like before.
Wireframes and Prototype
UI Inspiration Board
A User Interface inspiration board is a collection of ideas that express art direction, functionality, and layouts. This collection is used as inspiration and reference during the development phase of a digital solution.
A Button About UI Board
Exploratory Sketches
Exploring functionalities.
Referring to UI inspiration boards, I began using an iPad and Procreate to sketch task flows and explore digital solutions.
These sketches include most of the functionalities and layouts I want to include in the interactive prototype.
While sketching, I quickly came up with some great ideas and decided to incorporate them into my prototype. I highlighted different ideas, features, and components by drawing a small blue heart, and used red ellipses to showcase the functions I want to cover.
Wireframes
The first round of low-mid-fidelity grayscale prototypes includes all of the highlighted ideas, features, and components to incorporate into.
Developing and working with grayscale prototypes allowed me to quickly iterate and test components, layouts, information hierarchy, and screen flows before adding a visual identity.
Test
User Testing Plan
I conducted two rounds of usability tests on ten individuals to obtain practical, real-time feedback. This feedback was used to improve design, correct mistakes, and enhance the overall user experience.
The testers were asked to complete a set of five tasks while navigating through the prototype. This helped me observe how real users interacted with the app and determine whether the app's functions and features helped the user achieve their goals.
HIGH-FIDELITY PROTOTYPE
To optimize the user experience, I incorporated my brand's visual identity into the prototype, and carefully balanced color ratios, added animated elements, and reorganized information hierarchy. I encountered more challenges than I expected, and iterated through multiple rounds of incorporating feedback from friends.
Finally, I developed the final UI prototype and accompanying UI library that utilizes Brad Frost's Atomic design system, ensuring a professional and well-designed product.
Key Features
Looking at the high-fidelity prototype, there are three main functionalities that Flow offers:
1.Consolidate all your credit cards in one place.
Simplify your financial life by consolidating credit cards from different financial institutions into one place. During user interviews, we discovered that managing cards and accounts from different institutions can be frustrating, leading users to keep all services within one bank, even though it's not the best choice.
With Flow, you can effortlessly connect all of your cards by logging in and authorizing access. This allows you to securely view your entire financial picture in one place.
2. Make informed decisions with visualized data.
Streamline the process of comparing credit cards with Flow's Smart Data Visualization. Users reported that comparing credit cards is often time-consuming and tiresome, and they need a solution that can help them choose the best offer for their situation.
Flow makes data and information easy to understand, eliminating the confusion of due dates, APRs, and balances. You can make informed decisions based on clearly visualized information.
3.Stay on top of your accounts with monitoring and tracking.
Flow empowers you to manage your credit cards effectively by monitoring and tracking your accounts in real-time. Our user interviews revealed that many users were unaware of late fees, forgotten subscriptions, and unauthorized transactions.
With Flow, you can stay on top of your accounts and get notified of any changes or issues. This helps you avoid fees and maintain financial stability.
Branding & Marketing
Building a Responsive Marketing Site
The process of building a responsive marketing website requires the following:
- Clearly communicating what Flow is and introducing its functionalities.
- Creatively delivering value to target users through storytelling, copywriting, and visual design.
- Precisely demonstrating the design process and structured approach to developing site designs.
The marketing site aims to:
- Promote the digital app
- Cultivate and inform
- Build a bond of trust.
During the exploration and consideration phase, users love to browse marketing sites to gain information and learn about functionalities. Therefore, Flow's website provides enough information to help users make decisions. This includes an introduction to the functions, testimonials, and an explanation of the most concerning matters such as privacy and security.
Next Step & Takeaway
