Ambii

When it comes to personal finance and budgeting, having the right tools, applications, and tips can make all the difference. That's why I designed Ambii—to help Millennials save on their daily expenses in a mobile-friendly way.

Case Study
BrainStation, Toronto
UX Design Capstone Project
2022

Project Type
Capstone

Timeline
10 weeks
February to April

My Role
UX Research
UX/UI Design
Branding

Tools
Figma
Illustrator
Invision

Project Overview

High-level Description

To help young adults who suffer from financial stress, this project aims to understand what are their struggles are. We also strive to discover what changes are needed to alleviate their financial woes while uplifting their money gains.

Objectives

Education, organization and confidence of young adults in managing their own finances. Setting realistic goals which result in personal and financial growth.

Target Audience

  • Millennials + Generation Zers
  • Those that experience financial stress
  • Young adults with any type of income

Constraints

  • Frequency of users and potential fall off
  • Connecting to existing financial institutions
  • Need for clear privacy policy and terms of use

Indicators of Success

  • Testimonies
  • Active users on app

Problem Space

Though millennials are more educated than prior generations, they struggle more financially and are paid less.Young adults have more outstanding debt in larger amounts than the generations before.

The education system fails to bring awareness to personal finance and proper budgeting which is key to survive and flourish in the current economy.

How Might We

The ‘How Might We’ phrasing is a design question. It enables divergent thinking, catalyzes ideation and helps teams generate a range of potential solutions to a given problem. I will look to transform the problem space identified into design opportunities.

How might we help Millennials manage personal finances so that they can feel more confident in their financial future?

Persona

Combining all aspects of my research with my themes and insights allowed me to gain a better understanding of the problem space and better evaluate who I'm designing for.

Persona Experience Map

Finding Opportunity

Experience Map

The ability to visualize and understand an experience, allows us to look deeper into the nuances of user behaviour. Using the experience map, I can more clearly see where Vivien's largest pain points are.

Let's take a look at what Vivien is experiencing and find opportunities to make a positive change for her!

Persona Experience Map

User Stories & Epics

I author user stories to better understand her perspective in motivations, pain points and behaviours.

The formula is as follows:

As a + I want + So that

  • As a financially stressed young adult, I want to see all my finances in one place / on one platform so that I can keep my financial information organized and easily accessible.
  • As a financially stressed young adult I want to budget from my mobile device so that I can conveniently manage my finances on the go.
  • As a financially stressed young adult I want to prioritize certain financial goals so that focus on what is important to me and my future.
  • As a financially stressed young adult I want to set specific saving and realistic goals so that I can have a tangible goal to work towards and view my growth.

Core Epic

After deliberating over the stories, the core epic that was chosen was to adjust spending in a user’s personal finances.

This core epic covers more of the problem space, by showing a flexible budget that’s already been set up which encourages my persona to keep saving.

Task Flow

Creating a task flow lets us see how our friend Vivien would navigate the app to complete a particular task.

Task: Reallocate car loan funds into new budgets within your finance system.

Task Flow

Sketches

Referencing my UI inspiration board, I began sketching the layout and interface for my core epic that captured the features and functionality my target user might expect.

You can check out the sketches enlarged and with full annotations here in Figjam.
Sketches

Low Fidelity Wireframes

Lofi Wireframe

Low-fidelity prototyping is a simple and quick way to translate high-level design concepts into tangible and testable artifacts.

We don't mean that the product is not visually appealing. Instead, we mean that the prototypes are simple in terms of functionality and interface. The first and most important role of lo-fi prototypes is to check and test functionality rather than the visual appearance of the product.

Usability Testing

I conducted two rounds of usability tests to see if my wireframe reflected the task at hand in a comprehensible and intuitive way.

You can read the full session's output here.

Scenario

Summary: Not a new user, been using the app for a few months.Familiar with banking apps but first time keeping up with a budget.

Goal: Congratulations, you’ve recently finished paying off a car loan. Please navigate to the car loan screen to reallocate these funds into new budgets within your finance system.

Visual Identity & Branding

When exploring visual identity, I wanted to focus on something that was encouraging and happy.

Link to full InVision mood board.

I used this “A more than B” list of comparitive adjectives to clarify and narrow down the intended visual identity of my brand.

  • More summer than winter.
  • More ocean than mountain.
  • More energetic than calm.
  • More refreshing than rustic.
  • More fun than serious.
  • More free than attached.
Mood board

Naming Process

The naming process was a lot of back and forth debate between myself, peers, friends and family.

I wanted to convey light and fun vibes. Something short and easy to remember.

Naming process

App Icon Inspiration

I took a lot of inspiration from bold, clean, geometric and abstract logomarks.

Logo Inspiration Board

Logo and Wordmark Exploration

I had trouble narrowing down the top three choices so I decided to sketch logos and word marks for all of them.

I then took those sketches and digitized the logos and tried different fonts for the word marks.

Naming process
More Logo Explorations

Exploration Continued

After more deliberation, Ambii was chosen for it’s short and memorable name. I also chose to stick with the rocket ship imagery for the logomark since we want our  finances shooting up!

The logomark was paired with multiple font options to explore which would serve the brand best.

Branding Typography

Roboto

Primary Typeface
Roboto is a geometric sans-serif typeface that is thoughtfully designed for a wide range of devices, sizes and resolution. The application's styling enables webfonts to work without modification in environments where other fonts may appear pixelated.

VAG Rounded

Logo & Marketing Typeface
VAG Rounded is stylized header sans-serif font. It has an approachable personality and easy going shapes.

High Fidelity Prototype

The culmination of research, wireframing, testing and branding have bore fruit! I'm proud to present my high fidelity prototype.

view prototype