Easy Budget

Personal finance app

Role

Role

Ui/Ux Designer

Duration

Duration

2 Month

Tool

Tool

Figma/ Figjam/ Marvel

About

About

Most individual does not have a systematic way to manage their personal finance this often result in poor financial habits.

The challenge is to design a user-centric budget app that not simplifies the process of tracking the income and expenses but also empowers users to make informed financial decisions and achieve financial goals.

Most individual does not have a systematic way to manage their personal finance this often result in poor financial habits.

The challenge is to design a user-centric budget app that not simplifies the process of tracking the income and expenses but also empowers users to make informed financial decisions and achieve financial goals.

Problems

Problems

Through research I discovered that the main problem was overspending, resulting from:


💥 Unforeseen events.


🤔 No, clarity regarding once own finance.


🧑🏻‍💻 No, systematic way to track expenses.

Through research I discovered that the main problem was overspending, resulting from:

💥 Unforeseen events.

🤔 No, clarity regarding once own finance.

🧑🏻‍💻 No, systematic way to track expenses.

Solution

Solution

Conscious spending was the key to helping users with their personal finances.

This solution was achieved through:

👁️ Providing clarity through visual representation of users personal finance.

💸 Encourage and promote saving within the app to make it easier for user to save.

📈 Creating a smooth way to track ones expense.

This solution was achieved through:

👁️ Providing clarity through visual representation of users personal finance.

💸 Encourage and promote saving within the app to make it easier for user to save.

📈 Creating a smooth way to track ones expense.

Design Process

Design Process

I followed a designed process that relied heavily on user interviews to gain as much insight as possible, followed by rapid feedback, iterations and testing.

I followed a designed process that relied heavily on user interviews to gain as much insight as possible, followed by rapid feedback, iterations and testing.

Affinity Map and Synthesising the problems

Affinity Map and Synthesising the problems

After the initial rounds of interview was conducted, I then prepared pared an affinity map to help synthesize the problem

After the initial rounds of interview was conducted, I then prepared pared an affinity map to help synthesize the problem

Branstorming -> Sketching

Branstorming -> Sketching

My thought process

How can I create an app that improves the financial habit of a user by helping them avoid over spending, keeping track of their daily expenses and encourage saving and investment?

How can I create an app that improves the financial habit of a user by helping them avoid over spending, keeping track of their daily expenses and encourage saving and investment?

Avoid over spending

Avoid over spending

Why is the user struggling with overspending?

Why is the user struggling with overspending?

● Unforeseen events

● No clear picture of their finance

● No systematic way to manage budget

● Small expanses slips through crack

● Unforeseen events

● No clear picture of their finance

● No systematic way to manage budget

● Small expanses slips through crack

Track expenses

Track expenses

Why is the user unable to track their expenses?

Why is the user unable to track their expenses?

● No systematic way to track their expenses

● No clarity (mental calculation)

● Payment are made in different modes

● Small expenses slips through

● Most users make payment from their phone

● No systematic way to track their expenses

● No clarity (mental calculation) Payment are made in different modes

● Small expenses slips through

● Most users make payment from their phone

Encourage saving/ investment

Encourage saving/ investment

Why is the user struggling to save/ invest?

Why is the user struggling to save/ invest?

● Having a single bank account

● Discouragement due to low income

● Hard to keep track of multiple account

● Having a single bank account

● Discouragement due to low income

● Hard to keep track of multiple account

Budget Creation

Budget Creation

● Allowing user to create budget that with different categories

● Helping user with different categories available with different icons

● Providing visual chart and graph for effective communication

● Showing their financial health via red, green and yellow lights signifying different health metrics

● Allowing user to create budget that with different categories

● Helping user with different categories available with different icons

● Providing visual chart and graph for effective communication

● Showing their financial health via red, green and yellow lights signifying different health metrics

Overspending

Overspending

● Create an emergency fund

● Provide a clear visual to help understand how much a user can spend/ avoid

● Introduce a warning feature when user reaches their limit

● Create a systematic way to look at their finances.

● Create an emergency fund

● Provide a clear visual to help understand how much a user can spend/ avoid

● Introduce a warning feature when user reaches their limit

● Create a systematic way to look at their finances.

Expense tracking

Expense tracking

● Provide a quick and intuitive way to keep track of their finances via..

● Create a widget that user can easily access, to track expense

● Provide categories where users can choose from

● Let user make payment and from different categories of budget

● Make the process in as minimum step as possible.

● Provide a quick and intuitive way to keep track of their finances via..

● Create a widget that user can easily access, to track expense

● Provide categories where users can choose from

● Let user make payment and from different categories of budget

● Make the process in as minimum step as possible.

Saving

Saving

● Let user directly save in the app

● Make the saving automatic

● Let user link their bank account and auto debit a certain amount on a specific date

● Provide different categories for different users

● Let user directly save in the app

● Make the saving automatic

● Let user link their bank account and auto debit a certain amount on a specific date

● Provide different categories for different users

Below are few initial sketches for the designs concept and flows:

I introduced a step wise booking process, with 2 thing in mind

Maintain a visibility of system status, taking away any kinds of ambiguity. These lowers drop off and user become more willing to participate.

Progressive disclosure of information allows user to be less overwhelmed with the sheer volume of information, making the interface easier to digest

Low- fidelity design

Low- fidelity design

Early design concept put into low-fidelity design for better structure and realization.

Early design concept put into low-fidelity design for better structure and realization.

Final Design

Final Design

Simple to use with sophisticated function

Final Design #1

Final Design #1

Screen in-depth: Home Screen

Final Design #2

Final Design #2

Screen in-depth: Expense Screen

Final Design #3

Final Design #3

Screen in-depth: Expense Screen

Final Design #4

Final Design #4

Onboarding

Final Design #5

Final Design #5

Registration/ Sign in