The image featured at the top of the about us page #1

case study

FIG

a personal finance app that helps users manage all aspects of their personal finances, including tracking daily expenses, customizing spending budgets and savings goals, and paying bills.

Timeline

I  Oct. 2021 - Feb. 2022

Role

I  Lead UX designer

Problem Statement

FIG users need an intuitive way to monitor daily finances, budget effectively, set achievable savings goals, and track bills to avoid late fees and protect their credit scores. The app’s success will be measured by a 20% increase in user savings within three months and a drop in late payment fees to 3% compared to their previous payment history.

Competitive Analysis

I conducted a competitive analysis of popular finance apps to understand the market, identify strengths and weaknesses in existing solutions, and uncover opportunities to create a user experience that sets FIG apart from competitors.

Cash Flow Overview

Set Budgets

Set Savings Goal

Make Payments

​Intuitive UX/UI

Mint

YNAB

NerdWallet

FIG

Strength

Multi-factor authentication

Alert and reminder tools

Calculates net worth

Easy linking accounts

Able to set budget

Weaknesses

Limited functionality

Disorganized dashboard

Difficult to use and navigate

Confusing registering process

Too many distractive ads

Opportunities

Keep all accounts up to date

Better organization and overview of each transactions

Able to make payment and overview  upcoming bills

Threats

Mint helps users track their spending after, YNAB lets users plan their spending ahead of time

Mint & NerdWallet are free with ads,  YNAB is ad-free with monthly fee

User Interview

Building on market insights, I conducted user interviews to explore behaviors, frustrations, needs, and goals. This process provided a deeper understanding of what users need in a finance app.

overview

Sessions

Dates between Oct. 07-09, 2021

Length approx. 30 Min.

Test Method moderated Interview

Tool zoom meeting

Participants

All sessions were recorded based on the participant’s consent.

3 demographic questions

12 targeted questions

Amelia

F / 25

Customer Support Rep

San Jose, CA

Evans

M / 26

Business Analyst

Napa, CA

Karla

F / 31

Food Supply Manager

Berlin, Germany

Interview Analysis

BEHAVIORS & ATTITUDES

I use a banking app. It lets me see the overview of the recent transactions and payments. It is quick and simple. — Karla

I use my mobile app to check my checking balance everyday. — Amelia

I feel safe using money apps because they have two factor authentication enabled. — Evans

NEEDS or GOALS

I want a finance app with features for bill payment, financial overviews, budget setting, and expense tracking. — Amelia

I need a quick and easy way to check my finance daily. — Evans

I want to create budget for my monthly expense. — Karla

FRUSTRATIONS

I often forget to pay my bills on time. — Karla

Sometimes I set a savings goal but forget to contribute to it. — Amelia

I’m concern for the security issue with finance app. — Evans

Key Takeaways

What do users want from personal finance apps?

•  Finance overview

•  Quick and simple to use

•  Ability to set budgets and savings goal

•  Ability to pay bills

Design Personas

Based on research, I created design personas, Madison and Benjamin, to represent user behaviors, challenges, and goals. This helped me prioritize functionality and view the product from the user’s perspective.

“an impulsive spender”

Madison

22 / Single

Junior Graphic Designer

Annual Salary: $45K

Brooklyn, NY

Behaviors

Orders coffee every morning.

Browsing and shopping on the Internet  spontaneously.

Goes out with friends on Fridays.

Challenges

Wishes to put aside money every month, but does not know where to start.

Saving is difficult, as her salary is low and she lives in NYC.

Needs / Goals

Set budgets for her expenses.

Needs a reminder before her budget reaches the limit.

The ability to create multiple categories for her budgets to be in control of spending.

“an ambitious goal setter”

Benjamin

35 / Single Dad

Physical Therapist

Annual Salary: $92K

Columbus, OH

Behaviors

Often ends up not having enough funds to do what he had planned.

Hasn’t been able to spend quality time with her daughter  because of a lack of savings.

Challenges

Often ends up spending impulsively, and not having enough money for what he truly wants.

Feels insecure about not having much savings.


Needs / Goals

Wants to take a family trip to Jamaica.

Wants to set up a recurring deposit to the savings goals so that it is automatic.

Wants to modify the goal, in case it’s needed.


Task Analysis & User Flows

User flows for Madison and Benjamin outline step-by-step processes to complete their tasks, from entry to success. This approach provided a holistic view of the app, clarified necessary pages, and defined actions to accomplish tasks effectively.

Madison’s Objective

As an impulsive spender,

I want to set a budget for my expenses in the public transportation category,

so I can accumulate and have some savings each month.

Benjamin’s Objective

As an ambitious goal setter,

I want to set a savings goal for the rainy days,

so I can feel more financially secure and gain financial freedom.

Open Card Sorting

Following user interviews to define needs and goals, I conducted an open card sorting to shape FIG's information architecture. This helped me understand users' thought processes and create intuitive, user-friendly flows and organization.

overview

Sessions

Dates Oct. 18, 2021

Length average of 8 min. per participant

Test Method digital open card sort session

Participants

5 participants

Tool

optimalworkshop.com

I conducted an open card sort with 5 participants using 20 content topics. Participants grouped topics into their own categories, which I analyzed and consolidated into final categories. The chart below illustrates how topics were grouped into the final structure.

Information Architecture

After open card sorting and refining categories, I designed the app’s information architecture, focusing on simplifying the site map to minimize user clicks and improve navigation.

Low to Mid Fidelity Prototype

Based on research, I created a low-fidelity prototype to outline key functionalities. I then developed a mid-fidelity prototype with clickable buttons and detailed user flows to refine the design.

Overview

Accounts

Payments

Budgets

Usability Testing

I conducted user testing with six participants using the mid-fidelity prototype, identifying strengths, weaknesses, and collecting feedback to improve the design while gaining valuable user perspective.

overview

Sessions

Dates between Nov. 15-18, 2021

Length approx. 15-45 Min.

Test Method moderated remote

Tool zoom meeting

Participants

All sessions were recorded based on the participant’s consent.

4 demographic & 4 targeted questions

Conducted 3 task scenarios

Andrew

M / 26 / Single

Real Estate Paralegal

Brooklyn, New York

Leah

F / 23 / Single

Law Graduate

Memphis, Tennessee

Brody

M / 36 / Married

Product Manager

Berlin, Germany

Olivia

F / 28 / Married

Psychology Counselor

Copenhagen, Denmark

Peter

M / 32 / Single

Graphic Designer

Denver, Colorado

Christine

F  / 32 / Married

French Translator

Cincinnati, Ohio

result

problem

Can’t make a payment from the dashboard.

“Make a payment” font is too small.

Want to have an option to not to have a time limitation on the Goals.

The last few steps in the Make a Payment process are confusing.

Not sure about the bars under Accounts on the dashboard.

It’s unclear if its accounts and budgets are on the monthly.

Unclear on what the colors reflect on the Bills and Payments sections on the calendar.


recommendation

Implement a “Make a Payment” FAB on the dashboard.

Increase the font size to improve visibility and usability.

Add an option to remove the time frame from the goal, giving users more freedom and control.

Refine the steps with a confirmation page at the end to clarify the steps.

Remove the bars or make it more clear with the bars.

Clearly state whether it’s monthly, weekly, etc.

Make the obvious colors, for example, red for overdue bills, green for paid.

major

minor

Preference Testing

After usability testing, I conducted preference testing to understand my target market’s mental model and incorporated their feedback into the high-fidelity prototype.

overview

Sessions

Dates Nov. 30, 2021

Length approx. 45 Min.

Test Method live Internet session

Participants

26 participants age from 18-40

Tool

usabilityhub.com

result

  1. Onboarding Page

This is an intro page for the finance app. Which one do you prefer?

A

38%

10 out of 26

A feels unbalanced compared to B.

I like the cleanness and the sharpness of the design.

Background color feels jarring.

B

62%

16 out of 26

B is easier to read and it delivers the point more clearly.

B draws user’s attention more.

B is cleaner and visually more balanced.

I tested which introduction page users preferred, as these key interaction points influence whether users stay or leave the app. My goal was to create impactful, visually striking pages to retain users.

  1. Account Page

This is an account page for the finance app. Which one do you prefer?

A

27%

7 out of 26

Not having the logos leaves a cleaner interface.

A looks simple and less intimidating.

The page is already quite full, and adding the logos provides too much confusion

B

73%

19 out of 26

I like the little icons before the name of the companies. It makes it more engaging and enjoyable.

The logos next to each account category make an easier scanning.

B makes me feel the 'financial app' vibe more than A

I tested two versions: A without product logos and B with logos. Surprisingly, most users preferred B, stating that the logos enhanced their app experience.

Design Revisions

Leveraging usability and preference testing results, along with Material Design and WCAG guidelines, I refined the prototype to ensure universal accessibility and user-friendliness.

Previous

1

Not meeting WCAG Success Criterion 1.4.3 for contrast.

2

Using delicate, thin strokes on icons reduces clarity and legibility.

3

Varying icon sizes impair visibility.

4

The CTA button is too small to click comfortably, impairing usability.

revised

1

Color contrast was enhanced following WCAG guidelines to ensure the app is universally accessible.

2

Revised icon graphics to be bolder and simplified text labels for improved clarity.

3

Revised the circles as keyline shapes to maintain consistent visual proportions for the product icons.

4

Enlarged the CTA button to 56x56 dp, as recommended by the Material Design Component Guidelines.

Design Documentation

Below are examples of my design documentation, illustrating my thought process and app guidelines. My goal was to create an engaging, friendly, and intuitive app with simple pages and clear, straightforward language

color

primary

text, animation, logo, buttons

secondary

text, animation, logo, buttons, graphs, ground

accents

animation, graphs, sliders

Typography

intro page header

page title

page subtitles, logo, dates

page subtitles, logo, dates

page subtitles, card titles

body subtitles, buttons

body text headers, card titles, emphasized text

body text

tab menu buttons

body caption

progress tracker text

UI COMPONENTS

logo

data input field

buttons

primary

secondary

tab menu

FAB

toggle

calendar button

iconography

navigation bar

enabled

pressed

High Fidelity Prototype

After iterative testing and revisions, I finalized a high-fidelity prototype featuring clear user flows, interactive elements, and clean visuals, prioritizing simplicity and intuitive navigation.

Introduction

To provide a delightful user experience, I designed the onboarding with purposeful, engaging animations that guide users through key features and clearly communicate the app’s core value.

onboarding

To streamline onboarding, I minimized friction by requiring only an email, password, and phone number for verification. Users can also register quickly via social media. For added security, I integrated Face ID as part of a multi-factor authentication flow.

Overview

The financial overview provides a snapshot of cash flow, bills, budgets, and goals. Users can tap into detailed views or use the floating action button (FAB) to quickly link accounts, make payments, or add new budgets and goals.

Accounts

The My Account page provides a snapshot of the user's cash, credit cards, loans, and investments. Users can view detailed activity by selecting individual accounts or see all recent transactions in one place. A FAB makes it easy to link new accounts.

Accounts

The My Account page provides a snapshot of the user's cash, credit cards, loans, and investments. Users can view detailed activity by selecting individual accounts or see all recent transactions in one place. A FAB makes it easy to link new accounts.

Bills & Payments

The Bills and Payments page gives users a calendar view of upcoming and paid bills, making it easy to track due dates, monitor payment history, and make payments in one place.

Budgets

Users can track their spending, set budgets by category and sub-category, and view detailed breakdowns. A FAB allows them to quickly create new budgets. Budgeting helps users control expenses and stay aligned with their financial goals.

GOALS

The My Goals page allows users to set, edit, and track their savings goals with clear visual progress indicators. Integrating goal-setting into a finance app helps users stay motivated, prioritize spending, and build better financial habits over time.

Please click here for the clickable prototype

What I have learned

Throughout the design process, I gained valuable experience turning research into a high-fidelity prototype. It was rewarding to see an idea come to life through thorough research, user testing, and feedback. Seeing the product from the users' perspective shaped a user-first design and an intuitive experience. This process has been inspiring, and I will continue refining the app based on user feedback

Thank you for watching

SmartStreet

HOA financial services platform

Aurum

design systems

DeepStack

payment processing platform

GoodNeighbors

real estate platform

Kantora

user research platform