Money management APP
A money management app that aims to improve financial literacy. Stash was created as my capstone project during my time at BrainStation and showcases how I incorporate my past in Business & Finance with my future in design.
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 solution that teaches users to budget and track their expenses to help improve financial literacy
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"
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
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 young adults regularly keep track of their expenses or budget their spendings? Why or Why not?
I then analyzed their shared insights and frustrations and divided them into key 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.
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.
User persona
Experience map
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?
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.
User journey
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
Using my inspiration, sketches, and task flow, I started creating grayscale mid-fidelity wireframes to allow for easy prototyping, fast testing, and quick iterations.
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
I collected all my observations and synthesized the results into a matrix in order to identify the severity of user frustrations within each task.
Results from the 1st round of testing
Results from the 2nd round of testing
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
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
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
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.
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
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.
View prototype
