CHARGE: Optimize Your Finances

CHARGE lets you take control of your financial future and turn your dreams into achievable financial goals.

Project Outline
  • Academic Capstone Project | April 2023 - June 2023 (10 weeks)
  • High-Fidelity Mobile Application and Marketing Website
  • UX Tech Stack: Figma, FigJam, Google Docs, Material Design, Zoom, Slack, Google Drive
  • Role: Sole Product Designer (User Research, UI/UX Design, User Tests)

Introduction

After graduation from university and a step into the "real world", I quickly learned that I didn't know what to do with my paycheque. Do I save it, invest it, shop till I drop - what do I do?! After talking to my friends about it, turns out, I wasn't alone and no one my age knew what exactly was the right thing to do. When the chance came to choose my capstone project's topic, I knew I wanted to investigate more about financial literacy and the role money plays in young people's life.

Design Process

For this capstone project, I chose to follow the Nielsen Norman Group's Design Thinking which has the following six steps. Here's how these steps were followed in this project:

1. Empathize: User Research
2. Define: Affinity Map, Themes & Insights, HMW, Persona
3. Ideate: Sketches
4. Prototype: Low-Fidelity Prototypes (iterate after user tests)
5. Test: User Tests
6. Implement: Brand Development

Let's get started!

Problem Space

Nine out of ten Canadians between 18 and 24 are feeling overwhelmingly stressed about their financial health. Consequently, financial literacy - or the lack thereof - is a significant stressor for young adults. This stress is heightened for first-generation and young immigrants who lack social support and cannot fully take advantage of the Canadian financial system.

Empathize: User Research

Objective

Hypothesis

Behavioral Assumption

The goal of user research was to understand how our users feel about their current financial knowledge, and what their ideal personal financial management looks like.

I believe that young adults are willing to spend significant time learning about personal finance and how to meet their financial goals.

Our users spend a lot of time not only thinking about finances, but also managing it. They have robust (but inefficient) systems in place.

User Research Method
User Research Findings

Pain Points

Motivations

Behaviour

User are having difficulty applying financial knowledge to their own lives and feel like they lack a starting point

Users want to gain financial independence and “optimize [their] paycheque". In addition, users are thinking about long-term financial goals (eg. buying house, saving for a family) way more than short-term goals.

User don’t think about their finance on a daily basis and prefer it that way. Prefer the “set-it-and-forget-it” thinking.

Define: Themes & Insights, HMW, Persona
Interview Themes & Insights

Information Overload

Upward Trend

Keep It Simple

User are exhausted and overwhelmed with information only. Users now desire actionable advice and support.

Growth (ie. career, monetary) is important to the user. Momentum is key to keep the users motivated and excited about personal finance.

Users don’t like long spreadsheets and budget trackers. Hands-off approach to personal finance is ideal.

How Might We...

enable first-generation and young immigrants to craft a financial action plan so that they feel more confident in making informed decisions towards their financial goals?

Meet Kiara + Design Intervention

Kiara embodies the first-generation Canadian. Keeping her mind, there are two opportunities to help our users:

  1. improve the process of gaining financial education
  2. helping users apply and take actionable steps towards their financial goals

Our users seek more actionable advice (opportunity #2) more than wanting more theoretical financial information (interview theme #1).

Ideate: Task Selection, Solution Sketches

Task Selection

The task flow allows the user to set several long-term financial goals and ideate an action plan on how they can use their current income to meet these financial goals. The goal was the task flow was to provide the user a sense of control over their finances and create achievable financial goals.

Sketches
Solution Sketches

Goals

Current Finances

Monthly Allocation

Dashboard

Prototype: Lo-Fi Wireframes V1

Goals

Current Finances

Monthly Allocation

Dashboard

Test: User Tests, Version 3

User Test Method
User Test Key Learnings
  1. UX writing and micro-copy needs to be more clear as users were unsure about different terms, where buttons were leading them, and the purpose of some screens.
  2. Simplifying the steps users have to take complete a task on a screen is also important as it decreases the margin of error on each screen. For example, limiting the clicks the user has to take to add a new goal is important for a seamless flow.
  3. Visual consistency can decrease cognitive overload and and makes it easier for the user to scan the screen. For example, on the dashboard, having similar information in each card can help the user scan the dashboard much quicker.

Goals

Current Finances

Monthly Allocation

Dashboard

Onboarding

Goals

Current Finances

Monthly Allocation

Dashboard

Onboarding

Goals

Current Finances

Monthly Allocation

Dashboard

Implement: Brand Development

Primary Colours

According to colour psychology, dark purple represented luxury, wealth, and royalty. Thus, this was the brand colour right away so our users can feel these emotions as well. I continued to use colour psychology to determine the accent colour which was a light blue colour.

Accessibility Check

As a financial app, it's important for the application to meet the Web Content Accessibility Guidelines (WCAG) standard of AAA for text and Advanced Perceptual Contrast Algorithm (APCA) for other elements (ie. charts). Here are accessibility checks of the secondary and data visualization colours.

Adjectives

The adjective I chose describe CHARGE embodies something that is helpful and friendly but will motivate the user to be in charge of their finances and help alleviate the anxiety regarding long-term financial goals.

Mood Board

Visualizing the adjectives into abstract images, the images consistently showed a glow/burst of light element which balances friendly but motivating tone of the application. This is important as it modernizes the financial application for its users and makes it more approachable.

Wordmark

The wordmark used bold and italic letters to communicate momentum and bring excitement into a financial application for the young user base.
Aligning with the slight glow that is prevalent is the mood board, the wordmark also embodies it.

UI Library

Colour-Injected Prototype

Onboarding
Goals
Current Finances
Monthly Allocation
Dashboard

Onboarding

Goals

Current Finances

Monthly Allocation

Dashboard

Responsive Marketing Website

To bring the whole product to life, here's the responsive marketing website to highlight CHARGE's key features.

The Tarot Cards of Tech | The Power of Predicting Impact

Equity & Access: The Catalyst

CHARGE empowers its young users to break the “young, dumb, and broke” stereotypes and mindset. Personal finance is an achievable skillset and CHARGE hopes to be that entry gateway for its users who are not afraid to learn about personal finance.

Scale & Disruption: Smash Hit

As more young users utilize CHARGE to kickstart their personal financial literacy journey, there will be a wave of financially confident adults who are willing to understand and apply complex financial concepts to their lives, thus challenging the status quo about who has access to essential hidden financial information.

Key Learnings

  1. Clear UX writing requires designated time and effort to develop and test. In a financial application, the more context, the better!
  2. Users' pain points can reveal what they dislike about existing solutions (ie. day-to-day budgetings apps were a no-go).

Next Steps

  1. Add a second task flow: if a user adds another goal, how is the allocation plan impacted? How does the allocation screen change? How does the dashboard change?
  2. Since the current UI is considered "dark mode", what does a "light mode" look like?
  3. Get feedback on the UI from users. How do they feel when they're using the app?