— CAPSTONE PROJECT
Refresh
— ROLE
UX Researcher
UX/UI Designer
— DATE
12 Weeks
(Sept – Dec 2022)
— TOOLS
Figma
— PLATFORM
iOS
Many individuals struggle with managing their personal finances due to a lack of accessible and intuitive budgeting tools. Financial literacy remains a significant challenge for people of all ages, often leading to debt, stress, and poor money management. Existing solutions are either overly complex or fail to address diverse financial needs.
I led the end-to-end design direction of Refresh, a capstone project for BrainStation, that empowers users to build better financial habits by providing personalized budgeting tools, educational resources, and actionable insights.
The Design Process
Empathize:
Problem Space | Secondary & Primary Research
Define:
Persona | Experience Mapping
Ideate:
User Stories with Epics | Task Flows
Prototypes:
Sketches | Low-Fi Wireframes
Testing:
Usability Tests | Feedback
Refine:
Brand Development
Empathize
Problem Space Discovery
Two-thirds of Canadians under 35 feel their financial habits could be improved. The most common areas they struggle with are not saving money (54%) and overspending or living beyond their means (36%).
This highlights a clear issue: many young adults recognize the need to improve their financial habits but lack the tools or guidance to make meaningful changes. As a result, they often fall into patterns of overspending and financial instability.
Secondary Research
To better understand the problem space, I conducted research that uncovered several enlightening insights, guiding me toward potential design opportunities:
- 48% of young adults prioritize reducing or eliminating debt through regular payments, but many struggle to balance short-term and long-term saving goals.
- Despite having financial goals, 27% of Canadians feel they are off track, highlighting a gap between intentions and execution.
- 17% of Canadians could benefit from budgeting, yet barriers such as lack of time or interest (9%) and feeling overwhelmed (6%) prevent them from starting.
- A survey of 71 participants (ages 18–34) at the University of Alberta revealed low levels of financial literacy and numeracy. Most participants lacked formal financial education, which impacted their confidence in managing money.
These findings highlighted key user pain points and opportunities to create tools that are intuitive, engaging, and empowering—helping young adults build sustainable financial habits.
Design Challenge
How might we provide young adults with simple budgeting and literacy resources so that they feel less overwhelmed when it comes to improving those habits?
Primary Research
To gain a deeper understanding of the problem space, I connected with users who have little to no experience with budgeting. I conducted three 1:1 interviews and used an Affinity Map to organize the insights into key themes: motivations, behaviours, and pain points.
This approach helped me better understand user needs and identify areas where design solutions could be most impactful.
Key Insights
From our interviews, we identified three key insights and themes that helped us define the user-centric problem:
- Sticking to it: Users find it challenging to stay disciplined with budgeting due to the many factors involved, making long-term adherence difficult.
- Don’t know where to start: Users want to begin budgeting but feel anxious and unsure, lacking the experience and resources to get started on their own.
- Consideration of tools: Users may not feel the immediate need for budgeting tools due to their current financial situation, but they are open to learning more—especially since they never received financial education growing up.
These insights revealed key barriers and opportunities for designing a solution that could support users in starting and maintaining their budgeting journey.
Define: Persona
With my secondary and primary research complete, I synthesized that to create the persona which portrays my target user. Mary Jane will help guide me in design decisions as I’m focusing on a user-centric solution.
Experience Mapping
After developing my persona, Mary, I created an Experience Map to better understand her journey.
By outlining the stages of her experience with managing money and attempting to budget on a paycheque-to-paycheque basis, I was able to pinpoint key moments of opportunity where a digital solution could effectively intervene and support her throughout the process.
This allowed me to identify areas where design could make a meaningful impact on her financial journey.
Ideate
After identifying key moments of opportunity, I moved into the ideation phase, focusing on problem-solving. I explored User Stories and Epics to better understand how users like Mary might interact with digital solutions that make budgeting easier.
This phase helped me brainstorm potential features and functionalities that would address her pain points and align with her needs, ensuring that the solution would be both user-friendly and effective.
User Stories
I began by drafting over 20 user stories to capture the functional needs of the target users.
Next, I organized these user stories into epics and selected two key epics to focus on for the task flow: one as our primary core epic and the other as a secondary core epic.
This approach allowed me to prioritize the most critical user needs while ensuring a comprehensive exploration of the solution’s capabilities.
Transition Into Task Flows
From the two core epics, I developed design solutions to address the key user needs.
Goal setting emerged as a crucial feature for the target user, allowing them to set personalized goals that guide their budgeting journey. This is particularly valuable for users who don’t frequently budget, as it provides direction and a sense of purpose.
Additionally, the goal-setting feature creates an opportunity to support users in identifying areas where they want to improve their financial literacy.
By incorporating a task flow that provides access to relevant budgeting and financial literacy resources, users can continue learning and building confidence in managing their finances.
Primary Task Flow
Secondary Task Flow
Prototypes
Sketches
I began my preliminary sketches by referencing the primary and secondary task flows, along with a UI inspiration board I created. The board included features and functionalities from various budgeting and financial learning apps.
After multiple iterations, I refined the best ideas into solution sketches, focusing on creating an intuitive and engaging user experience that addressed the key pain points identified in earlier phases.
Primary Task Solution Sketches
Secondary Task Solution Sketches
Wireframing & Prototypes
After creating my solution sketches, I was ready to start translating my sketches into mid-fidelity wireframes. By developing greyscale wireframes, it allows me to see my digital solution from a function standpoint. Having the greyscale wireframes also allowed me to quickly test and iterate functionality before moving into high-fidelity wireframes.
Testing
After developing the mid-fidelity prototypes, I was ready to conduct usability tests to gather feedback and identify areas for improvement. This testing phase allowed me to observe real users interacting with the design, ensuring that the functionality aligned with their needs and providing valuable insights for refining the solution.
Usability Tests
With the initial prototype built, I conducted 2 rounds of usability testing with 10 different individuals to get feedback while they completed the tasks necessary to go through the flow of onboarding and accessing a learning resource.
After each round of testing, the feedback and insights from the testers were prioritized using a Design Prioritization Matrix. This allowed me to assess the effort it would take to fix and the value it would bring to the user.
Round 1 Matrix
Round 2 Matrix
Design Changes
Using the Design Prioritization Matrix, I began implementing the suggested improvements that would have the most impact. By weighing the value these changes would bring to the user against the effort required to implement them, I was able to focus on the most critical updates to enhance the user experience.
Problem: Users were confused about the need to input a salary when creating an account.
Solution: Relocate the salary input to the goals section, where it directly correlates with setting financial goals, providing users with a clearer context for its relevance.
Problem: Users were confused about creating their own budget or saving goal before entering their expenses and savings.
Solution: Move the goal creation screen to after the expenses section, ensuring that users have a clearer understanding of their financial situation before setting goals.
Problem: Users were confused by the original input fields.
Solution: Rename the input fields for clarity and introduce lighter box designs in the mid-fidelity wireframes to improve visual hierarchy and reduce confusion.
Problem: The lack of a title for the resources section left users unsure of which page they were on.
Solution: Add clear page titles and enhance card details to provide better context and improve navigation clarity.
Refine
Brand Development
With testing complete and an improved greyscale prototype, I was ready to bring the design into high-fidelity by developing and applying a cohesive brand and visual identity.
When defining the brand identity, I aimed to create a calming and relaxing experience for users interacting with the Refresh app. Based on our persona, I focused on users who are new to budgeting apps and have limited financial literacy.
Given the complexity of the app, I opted for a minimal design approach to maintain an easy-going, welcoming atmosphere. The visual identity was crafted around adjectives that represent this feeling, ensuring the app feels approachable and intuitive for new users.
Brand Name Exploration
When selecting the brand name for the app, I revisited the insights from the user interviews and reflected on how they truly felt about budgeting. I wanted the name to embody the adjectives that represent the app’s calming and welcoming nature. Ultimately, I chose the name Refresh, as it symbolizes a fresh start for users with their finances and financial literacy. This name aligns with the app’s purpose and resonates with users who are looking to take control of their financial journey.
Moodboard & Colors
Brand Adjectives
Clean Modern Natural Comfortable Light Relaxed Detailed Welcoming
Based on our persona, I focused on users who are new to using budgeting apps and have limited knowledge of financial literacy. Given the complexity of an app like this, I aimed to keep the design minimal while ensuring an easy-going, welcoming feel—qualities that align with the adjectives we chose. This approach ensures the app remains approachable for users who are just starting their financial journey.
High Fidelity Prototype
The Prototype
At last, it was time for everything to come together.
I began applying the branding to my wireframes, and the visual identity of Refresh started to take shape. My goal was to create a relaxed and welcoming tone for users as they navigated through the onboarding process, achieved through thoughtful color usage and intuitive feedback. Most screens during onboarding maintain a minimalistic design with subtle hints of our signature blue, while the dashboard and learning sections bring the app to life with more vibrant visual elements.
Key Features
Input Goals
Recognizing that many users may not be familiar with budgeting and finance, I provided preset goals to help guide them through the process. These starter goals offer a clear direction and make it easier for users to begin their financial journey with confidence.
With many users not being familiar with budgeting and finance, I gave them some preset goals to start them off with to help guide them in the process.
Create a Saving Goal
Since many users may be unsure of how to start a financial goal, we offer the option to choose from preset goals. This makes it easier for users to get started and provides a clear path toward achieving their financial objectives.
Access Learnings
Through research and user interviews, we discovered that many users had never been taught financial literacy. To address this, we created a tailored section within the app specifically designed to help users develop their financial knowledge and skills.
Through research and user interviews, we discovered that many users were never taught financial literacy. We gave them a tailored area for them to help them develop this.
Future Considerations
As I completed the prototype and prepared it for launch, I realized there is still much more to explore. This is just the beginning—I’ve only scratched the surface of the budgeting and financial literacy space. There’s still a lot to build from a functional standpoint before Refresh is ready for the market.
Some future flows to consider include:
- A community/chat feature.
- Incorporating rewards for completing learning modules.
- Developing a fully functional budgeting system.
There’s so much potential in this space, and I’m committed to refining and expanding this solution to create the best possible user-centric experience.
Key Learnings
Creating Refresh was both an exciting and challenging endeavour, as budgeting and financial literacy are deeply personal topics. Despite the challenges, I’m grateful for the opportunity to embark on this rewarding journey.
One key takeaway was the importance of keeping the user at the center of the design process. There were times when I envisioned certain layouts or brand identities that seemed like a good fit, but they didn’t align with the users’ needs.
By prioritizing the user’s perspective, the final designs turned out better than I had anticipated. Seeing how my solutions addressed the problem space, personas, and “how might we” questions was incredibly fulfilling.
There were countless lessons learned throughout the UX/UI process for this capstone project, and I’m proud to have navigated a process that was both challenging and enjoyable.