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.
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.
Design a prototype to enable budget and expense tracking to improve financial literacy in young adults.
UX Research, Usability Testing, User Flow Mapping, Wireframing, and Prototyping
Figma, InVision, Zeplin
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.
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:
of young adults feel that they lack knowledge in personal finance matters
of young adults want to improve their financial literacy
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.
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.
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.
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
Graphs and Charts
Clean and Minimalistic
White with pops of color
Trustworthy and Transparent
Modern and Futuristic
Using my inspiration, sketches, and task flow, I started creating grayscale mid-fidelity wireframes to allow for easy prototyping, fast testing, and quick iterations.
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.
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
I collected all my observations and synthesized the results into a matrix in order to identify the severity of user frustrations within each task.
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.
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
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
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
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)
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.
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)
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.