STASH OVERVIEW
Project Brief
Stash is a mobile money management platform that consolidates financial information in an easy-to-understand way.
It allows users to connect accounts from various financial institutions, track their spendings, create budgets, and more.
Problem
Many young adults are not taught basic personal finance skills in school. This issue leads to a lack of financial confidence and a fear of seeking out financial information, which in turn prevents them from making proper financial decisions.
Goal
Design a prototype to enable budget and expense tracking to improve financial literacy in young adults.
Responsibilities
UX Research, Usability Testing, User Flow Mapping, Wireframing, and Prototyping
Tools
Figma, InVision, Zeplin
RESEARCH
Discovery of Problem Space
Throughout my academic career, I noticed that schools don’t teach personal finance. Even as a finance student myself, my classes mainly revolved around corporate concepts... yet no one ever taught us how to manage our OWN finances. This resulted in many of my peers feeling uncomfortable with the topic, saying things like:
"I feel embarrassed asking questions about my finances because I feel like I should know it already"
I hypothesized that a mobile platform that makes financial information easy to understand will motivate young adults to make better-informed decisions.
Secondary Research
Before diving into my design solution, I had to step away from my own biases, so I conducted secondary research and user interviews to learn more about people's frustrations. Through research, I found that:
74%
of young adults feel that they lack knowledge in personal finance matters
73%
of young adults want to improve their financial literacy
49%
of young adults have never made a budget
User Interview Insights
I conducted interviews with young adults between the ages of 18-30. By using a decontextualized method of research, I was able to better understand their attitudes and interactions within the personal finance realm. I wanted to uncover insights to questions such as:
-
Are young adults using existing personal finance apps? Why or Why not?
-
Where do young adults currently get information on personal finance? Is it reliable?
-
Do you adults regularly keep track of their expenses or budget their spendings? Why or Why not?
Here are their shared insights and frustrations divided into themes:
Lack of Knowledge
Most young adults are not taught basic personal finance skills in school. This issue leads to a lack of confidence in managing their own money, which prevents them from making proper financial decisions.
Desire to Learn
Most young adults want to increase their financial literacy. They resort to online research or asking friends and family to learn. This behaviour may lead to inaccurate or outdated information.
Fear of the Unknown
Some young adults feel embarrassed to seek out financial information. This fear acts as a barrier to entry and prevents them from managing their money in forms such as investing or trading.
SYNTHESIS
Persona & Experience Map
Using the data gathered, I was able to get a better sense of my target user. With this research, I crafted a persona and experience map in order to drive my designs for the target users and identify opportunties in which to focus my digital solution.
Design Challenge
The findings from my research showed that the lack of confidence came from not knowing where to start as they were simply never taught. With my persona and experience map laid out, it was clear that young adults want to improve their financial literacy and take charge of their personal finances. With this idea in mind, I refined my project question:
How might we improve financial literacy in young adults so that they feel more confident managing their personal finances?
User Journey / Task Flow
I developed a user flow and task flow diagram to visulize how a user might interact with my design solution.
The user flow below shows my target user viewing their financial activity as a subtask then creating a budget as their main task.
IDEATION
Inspiration
I then looked for inspiration in existing apps, as well as dribbble and behance. I focused on looking for existing UI components and functionalities that I wanted to include.
Features & Elements
-
Dashboards
-
Graphs and Charts
-
Progress bars
-
Transaction summaries
Gestalt Principles
-
Common Region
-
Figure/Ground
-
Proximity
-
Similarity
Overall Feel
-
Clean and Minimalistic
-
White with pops of color
-
Trustworthy and Transparent
-
Modern and Futuristic
Sketches
PROTOTYPING
Wireframes
Using my inspiration, sketches, and task flow, I started creating grayscale mid-fidelity wireframes to allow for easy prototyping, fast testing, and quick iterations.
USER TESTING
Usability Testing: 2 Rounds
With the grayscale wireframe and prototype above, I conducted two rounds of usability testing. All participants were given a scenario and asked to complete a set of tasks.
The results from the first round were used to justify design changes for my second wireframe iteration. Then, the results from the second round of testings were used to create a third grayscale prototype.
Evaluation Tasks
-
View account balances
-
View transactions for the BMO credit card
-
View spendings by category
-
Create a budget for Food & Drinks, Entertainment, Gas & Fuel, and Clothes
-
View your created budget
Testing Results
I collected all my observations and synthesized the results into a matrix in order to identify the severity of user frustrations within each task.
Round 1
Round 2
Notable Changes
Initially, there were some minor hiccups around the 'create a budget' task as well as some major complaints as users struggled with understanding the content and language on the homepage.
Homepage revisions
-
Restructured the top portion of the home page to be more legible
-
Moved credit score section
-
Expanded the balance trend graph as many users found value in the chart
-
Redesigned the graph to include a vertical indicator that is draggable, and updated label designs
-
Redesigned the Cash Flow section
Before
After
Set Budget revisions
-
Replaced the slider function in favour of an input field to allow for more flexibility and customization
-
Redesigned the budget categories for a more intuitive experience
-
Placed more emphasis on the "total budget" section by utilizing a progress bar
-
Added a "Repeat" selection feature to allow users to create budgets for varying time periods
Before
After
Budget Goals revisions
-
Expanded the "Your total budget" to provide more value for users
-
Replaced pie chart in favour of a progress bar style chart for better usability
-
Redesigned the categories for a more intuitive experience
-
Compartmentalized the categories and added icons to allow for better legibility
Before
After
BRAND DEVELOPMENT
Moodboard
For my moodboard, I searched images by keywords, colors, feelings, and other modes of inspiration. I was then able to compile images that represented the mood that I wanted my app to embody, such as:
-
Futuristic elements through technology and structure
-
Clean, fresh feelings with white space
-
Modern colors associated with technology and wealth (purples and blues)
Style Guide
Gathering inspiration, I created a style guide for Stash's brand and mobile application. This design system includes color, typography, buttons, icons, components and more. Here are some of the basics:
The biggest challenge I had with color was in following accessibility guidelines when designing my graphs and charts. These visualizations of data use a lot of color to distinguish categories, meaning I had to ensure appropriate contrast that worked for people with varying degrees of color blindness.
.png)
Original
Protanopia
Deuteranopia
Tritanopia
I used the baseline WCAG 2.0 level AA contrast ratio of 4.5 : 1 for normal text and 3 : 1 for large text to ensure an appropriate amount of contrast between my colours and text
When designing for iOS, I had to ensure that my app icon would follow any guidelines or suggestions made for apple products. For example, Apple recommends app icons for iPhones to be 60x60 pt or (180x180 px @ 3x)
FINAL SOLUTION
Hi-Fidelity Prototype
With the visual identity of my brand developed, I began injecting color, icons, and imagery as well as other elements to my refined prototype. After multiple iterations, I finally arrived at my final design.
RESPONSIVE SITE DESIGN
To represent promoting my digital solution to my target audience, I created a responsive marketing site for desktop and mobile viewing.
Content Flow Diagram
I made a content flow showcasing the elements I wanted and where they would be positioned within their corresponding sections. This diagram helped me plan my layout as I was able to resize and restructure the elements as well as visualize how elements would change between their desktop and mobile view.
Desktop View
Mobile View
Hi-Fidelity Site
