— CAPSTONE PROJECT
Refresh
— ROLE
UX Researcher
UX/UI Designer
— DATE
12 Weeks
(Sept – Dec 2022)
— TOOLS
Figma
— PLATFORM
iOS
Growing up, I was never taught much into financial literacy space and how to manage money. I would search through YouTube and look up resources to teach myself and always wondered if there were people in the same boat.
I wanted to challenge myself and dedicate my capstone project to design a platform that would help people that find it difficult to budget their money and who were also never taught much into financial literacy.
Full Prototype
Introduction
Overview
As someone who was in the position of feeling overwhelmed when it came to thinking about my money and was never even educated much as a student about financial literacy, I wanted to create a platform for people in similar situations to guide them. I wanted to challenge myself to dive deep into the financial area and look for areas to make this process as easy as it could be.
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
2/3 Canadians under the age of 35 feel that their financial habits can be improved. Not saving money (54%) and overspending/living beyond their means (36%) are the most common habits that they feel needs improvement.
As I looked into this problem space, it’s clear that many young adults want to improve their financial habits but they haven’t been equipped with ways on how to actually improve it thus leading them into overspending and living beyond their means.
Secondary Research
Moving into the research phase, I found many enlightening points which helped me focus in on what I could try to solve for users.
1. 48% want to make reducing or eliminating debt through regular payments a priority. At the same time, however, the younger generation seems to be struggling to balance short-term and long-term saving.
2. Most Canadians have financial goals, but 3 in 10 (27%) feel that they are off track.
3. 1 in 6 Canadians (17%) could benefit from having a budget. Some of the reasons for not budgeting include not having enough time or finding it boring (9%) or feeling overwhelmed about managing money (6%).
4. A sample of 71 participants from the University of Alberta, ages 18-34, completed a survey about their recent spending behaviours, knowledge of personal finance, and attitudes towards money. Participants had low levels of financial literacy and numeracy, and most did not receive formal financial education.
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 better understand the problem space, I connected with users who don’t have experience with budgeting. After conducting three 1:1 interviews, using an Affinity Map, I organized the insights gained from my interviews into motivations, behaviors, and pain points.
Key Insights
From our findings from each interview, we developed 3 key insights and themes where we could find a user-centric problem.
1. Sticking To It: There’s so many factors when it comes to budgeting and it makes it hard to stay disciplined with it for the long run.
2. Don't Know Where To Start: Wants to start somewhere but feels nervous and anxious doing it by myself due to the lack of experience and resources.
3. If I had a tighter budget I would consider utilizing tools, but I still want to learn more: Doesn’t feel the need to utilize tools due to situation but feels that they can learn more as they were never taught much growing up.
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 get a better understanding of their journey.
By defining the stages of their experience with handling money and attempting to budget through a paycheque, I would be able to pinpoint the ideal moments of opportunity where I could intervene with a digital solution.
Ideate
After identifying key moments where I could intervene, I moved into the ideation phase of problem-solving where I began to explore User Stories and Epics to see how users like Mary might use digital solutions to make budgeting an easy process for them.
User Stories
I began by authoring 20+ user stories that capture the functional needs of the targeted user.
From the user stories, I organized them into epics and chose 2 of them to focus in on for my task flow. The first being our primary core epic and the second being our secondary core epic.
Transition Into Task Flows
From our 2 core epics, I was able come up with solutions to solve through a design.
Goal setting is key for my targeted user as they can set certain goals for themselves to help guide them, which will be key as someone who doesn't utilize a budget much often. This will also help in knowing what they want to learn more into with the financial literacy learnings.
This also creates an opportunity to guide them in knowing what they want to learn more about with the financial literacy learnings task flow where they'd be able to access those budgeting and literacy resources.
Primary Task Flow
Secondary Task Flow
Prototypes
Sketches
I began my preliminary sketches based on my primary and secondary task flow and a UI inspiration board I created, which includes the features and functionalities throughout various budgeting and learning apps. After various iterations, I refined the best ideas into solution sketches.
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 we developed our mid-fidelity prototypes, I was ready to put it through usability tests and receive feedback for improvements.
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
With the Prioritization Matrix, I started to implement the suggested improvements I knew would be the most impactful by weighing the value brought to the user and the effort required to implement them.
Problem: Users were confused as to why they had to input a salary to create an account.
Solution: Move it to the goals section, which salary correlates to.
Problem: Users were confused to why they created their own budget/saving goal before filling their expenses and savings.
Solution: Move the screen to after the expenses.
Problem: Users were confused about the original inputs.
Solution: Rename the input fields and created lighter boxes for the mid-fi.
Problem: Having no name for the resources section confused users as they didn’t know what page they’d be on.
Solution: Add a title for pages, and improved card detail.
Refine
Brand Development
With testing done and having an improved greyscale prototype, I was ready to bring the design into High-Fidelity by developing and applying a brand and visual identity.
When defining the brand identity, I wanted to keep a feeling that would make users feel calm and relaxed when going through the Refresh app. Based of our persona, I focused on users who have never used an app to track their financial budgeting and never learnt much about financial literacy.
With the detail that goes into an app like this, we wanted to keep it very minimal and give an easy-going/welcoming feel to it which our adjectives represent.
To further define the brand identity, I listed ‘More A than B’s’ to clarify what my brand aims to be compared to what it does not.
Brand Name Exploration
When thinking about my brand name for the app, I went back to the users I interviewed and thought about how they truly felt about the idea of budgeting. I wanted to reflect the adjectives above and ultimately decided on the name Refresh. I believe it represents people who want to start fresh on their finances and literacy and ties into what my app is about.
Moodboard & Colors
Brand Adjectives
Based of our persona, I focused on users who have never used an app to track their financial budgeting and never learnt much about financial literacy.
With the detail that goes into an app like this, we wanted to keep it very minimal and give an easy-going/welcoming feel to it which our adjectives represent.
High Fidelity Prototype
The Prototype
At last, it was the moment when it all came together.
I began applying my branding to my wireframes, and the visual identity of Refresh started coming into play. I wanted to have a relaxed and welcoming tone for the user while they go through the onboarding process, and I hoped to achieve that with the colour usage and feedbacks throughout. Most screens have a very minimal touch to it through onboarding with the hints of our blue colour, and when you get into the dashboard and learnings, you see more of the app come to life.
Key Features
Input Goals
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
A lot of users may not know how to start a goal, and we give them an option of choosing a preset.
Access Learnings
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 had it ready to send out, I knew there was much more to add onto this. I’ve only just scratched the surface – there is so much more to explore in this problem space of budgeting and financial literacy, and there is much more from a functional standpoint to be built out before Refresh could go to market.
Some flows to consider:
- A community/chat flow.
- Incorporating rewards for completing learnings.
- Develop a fully functional budgeting system.
Once again, there is so much to this space and I’m going to devote my time to make this the best possible user-centric digital solution for my problem space.
Key Learnings
Throughout the journey of creating Refresh, I knew it would be a challenging area to design for as budgeting and financial literacy can be so personal for people. I'm grateful to have stuck with it and embark on this challenging journey.
One huge, but obvious learning was to always have the user at centre when designing. There's so many times I pictured having a certain layout and brand identity but it just wouldn't work for this project, but when you learn to create for the user, it comes out better than you can imagine and getting that satisfaction from seeing your design work for your problem space, how might we question, persona, etc. is an unimaginable feeling.
There's many more learnings I could go on about during my UX/UI process for this capstone project. Overall, I'm glad I had a challenging but fun process.