banner (1).png

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.

User persona.png
CURRENT Experience Map.png

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.

Capstone User Flow.png

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

ui inspiration.jpg
card inspiration.jpg
credit card inspiration.jpg

Sketches

1.jpeg
2.jpeg
5.jpeg
6.jpeg

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.

Slide 16_9 - 1.jpg
Slide 16_9 - 2.jpg

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

testing results 1-1.jpg

Round 2

testing results 2-1.jpg

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

Frame 1.jpg

After

Frame 4.jpg

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

Frame 2.jpg

After

Frame 5.jpg

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

Frame 3.jpg

After

Frame 6.jpg

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)

moodboard.png

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:

Color Selection.png

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.

Colourblindness (1).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

wcag contrast-1.jpg
Final Brand redlines.png

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.

Final Prototype mockup.jpg

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

Desktop Content Flow.png
Desktop Content Flow Detailed.png

Mobile View

Mobile Content Flow.png
Mobile Content Flow Detailed.png

Hi-Fidelity Site

Hi-Fi Desktop Landing Page 1.png
Hi-Fi Desktop Landing Page 1.png
Hi-Fi Desktop Landing Page 1.png
Hi-Fi Mobile Landing Page 1.png
Hi-Fi Mobile Landing Page 1.png
Hi-Fi Mobile Landing Page 1.png