Research

Research Goals:

Determine why people are motivated to set budgets.
Determine and understand the processes people use to manage their money.
Learn the reasons why some people struggle with budgeting.
Discover what tools people use for creating their budgets—spreadsheets, pen & paper, budgeting apps, etc.
Uncover any frustrations people have with budgeting apps.

‍

Secondary Research

I conducted initial research and defined my objective to understand better how and why people budget. Through this research, I discovered that while various tools are available to assist with budgeting, the two primary tools used are budgeting apps and spreadsheets.

Interestingly, many individuals still prefer to input their transactions into spreadsheets manually. What is it about spreadsheets that make them such an effective budgeting tool? Is it the ability to customize them to suit individual needs? Or is there a psychological component to manually inputting transactions that motivate users to stay on budget?

By exploring these questions and gaining a deeper understanding of user preferences and behaviors, I aimed to create an iOS app that provides users with a seamless and effective budgeting experience.

‍

Competitive Analysis

Based on what I gathered during my initial research, I needed to understand popular budgeting apps' features. To achieve this, I conducted a competitive analysis of the four most popular budgeting apps, hoping to identify any missing features that could benefit my app.

COMPONENTS

Secondary research
Competitive analysis
Survey
User interviews

Competitive Analysis of various budgeting apps

Survey & Interview results

People tend to budget more effectively if they input their transactions manually.
People seem to lose interest in budgeting if they can’t see any evidence of financial progress.
People prefer to set monthly budgets rather than weekly budgets.
People want the option to customize their budgeting app to fit their particular needs.
People want to know how much they’ve spent in specific categories within their total monthly budget.
People want helpful advice tailored to their specific budget.
People want to look back at their financial history.
People don’t want to exert much effort towards setting up a budget.
People seem to be frustrated when budgeting apps miscategorize their transactions.

View Full Document

Problem Statement

Many people (young and old) struggle with budgeting and tracking finances. The advent of budgeting apps has helped improve the financial health of many Americans. However, these apps often miscategorize transactions and are often excessively complex.

Define

Next, I funneled the insights and observations from the research into a user persona that represents the user's needs and wants. This would serve as a reference tool when designing the app later on.

COMPONENTS

User Persona Application Map
User Flow

Christopher's user persona

Application Map

It was now time to think of how users might navigate the app to accomplish their goals. Keeping the information architecture as simple and concise as possible was necessary since most users would use this regularly to input their transactions.

Application Map

User Flows

Before sketching and building wireframes, I wanted to understand the user flows of users attempting to accomplish specific tasks. The series of tasks chosen would highlight the app's key features.

User Flows

Design

After creating the user flows, the next step was to begin sketching some low-fidelity wireframes. I drew a few key screens I would need to include in the app.

COMPONENTS

Med-Fi wireframes
Logo
UI kit
Hi-Fi prototype

Low-Fidelity wireframe sketches

Mid-Fidelity Wireframes & Prototype

Creating mid-fidelity wireframes helped me present my ideas more clearly and gain a clearer perspective on how users might use the application. While constructing these wireframes, I kept my user's needs and frustrations in mind.

I then made a prototype and conducted usability tests with three participants. I gained the following insights from the tests:

Users responded positively to the "Add a Transaction" and the "Add a Category" modals.
The input modals were intuitive for users.
Users were unsure of what the "+" button meant.

Mid-Fidelity Wireframes

⚡️ CHALLENGE

During my user research, I uncovered that people prefer to manually input their transactions into a spreadsheet because it helps them remain money conscious, helping them stay within their budgets.

‍

There needs to be a way for users to input their transactions manually. More importantly, this process must be consistent across the app and painless since users will frequently be inputting their transactions.

✅ SOLUTION

Including a simple plus icon in the tab bar, being present no matter the context, promotes learnability and, in turn, lessens the learning curve for adding transactions. Being centered in the bottom tab bar puts it inside the thumb zone, making it easily accessible to most users regardless if they are left-handed or right-handed.

Branding

Due to the large amounts of data displayed in the app, the primary objective of Decimal's brand was not to draw attention to the brand itself but rather to establish a non-overwhelming user experience.

The geometric-like icon signifies precision and accuracy, which ties back to the intent behind the financial recording.

I chose purple as the primary color because purple tones tend to convey a sense of relaxation and stability.

Making this UI Kit allowed me to plan out the website's structure and remain consistent throughout the design process.

High Fidelity Screens

I applied the visual elements from the UI Kit to the Mid-Fidelity wireframes. As a result of my research, I decided to go with a dark UI to prevent users from becoming overwhelmed by too much information at once. I also added the option for users to select a light UI to offer a more customized experience for users.

Onboarding Screen

Dashboard

⚡️ CHALLENGE

Due to the data-heaviness of budgets, users have a tendency to get easily overwhelmed. If a person can't comprehend what they a looking at, they will lose interest. There must be a way to reduce the users' mental bandwidth when they are digesting their budgets.

✅ SOLUTION

Users have the option to customize their budget categories by selecting a color unique to that budget. This enables users to set up their budgets in a way that makes sense to them and also gives them a sense of control. Users can also edit their categories simply by tapping a category in the Category screen.

‍

Add a Transactions modal

Horizontal scroll feature (Add a Transaction modal)

Camera Feature (Add a Transaction modal)

Transactions page

Categories page

Add a Category modal

Dark mode

Light mode

Notifications

Test

With the high-fidelity screens prepared, the next step was to put them through some usability tests to gain further insights into their usability. These user testing sessions involved interviewing five people who resembled my user persona. Three of the test were conducted in person, and the rest were done remotely, using a prototype I created in Figma. Users were instructed to complete three different tasks.

Task 1: Add a transaction to a budget.

TASK INSTRUCTIONS

You just spent $15, filling up your car with gas. I want you to add this transaction to your budget. I want you to name the transaction “Gas at Speedway”, input an amount of $15, and select cash as the payment type.

‍

TASK NOTES

Consistent design and placement of the "+" button has positively impacted the app's usability. All of the users thought the onboarding screens were helpful in explaining how to use the app, and there seemed to be very little friction between users and their goal of inputting a transaction into the app. The only user pain point was that there was no label for the payment method section.

TASK COMPLETION RATE

100%

‍

Task 2: Add a transaction by taking a picture of a receipt.

TASK INSTRUCTIONS

I want you to add the same transaction again but this time, add it by taking a picture of a receipt using the camera feature.

‍

TASK NOTES

No significant issues were reported during the testing of this task. The placement of the camera icon and the overall process were intuitive for all of the users. The users thought this feature could be helpful, especially when entering many transactions in sequence.

TASK COMPLETION RATE

100%

‍

Task 3: Add a new budget category.

TASK INSTRUCTIONS

You just returned from a night out with some friends at the bar. I want you to go to your categories page and add a “Bars & Nightlife” category to your budget.

‍

TASK NOTES

The testing of this task revealed no significant issues. Users were able to input their information fast and intuitively. However, users requested that the individual category meters display more of their color.

Additionally, one user had trouble selecting the correct color swatch with their thumb. I have since increased the sizes of these color swatches. All of the users mentioned that the process was painless and that they liked the idea of color-coding their categories.

TASK COMPLETION RATE

100%

‍

Iterations

While the users successfully completed the tasks asked of them, I uncovered some areas of improvement. Below are the significant changes I made to my high-fidelity screens.

Figure 1

Figure 2

⚡ Problem (Figure 1)

The issue with the "Add a Transaction" modal was the lack of a label for the payment methods section.

‍

✅ Solution (Figure 2)

My solution was to add a label to the payment methods card.

⚡ Problem (Figure 3)

Users requested that the individual category meters display more of their specific category color.

‍

✅ Solution (Figure 4)

My solution was to make the meters for each category the same corresponding color. This led me to make the numbers in the "Spent" column a red color for the overspent categories.

‍

Figure 3

Figure 4

Next Steps

The design process is iterative, and there's always an opportunity to improve my designs. The next step for this project would be to execute another round of usability tests and continue designing more screens to showcase even more user flows.

What I learned

The goal of the Decimal app was to help users budget more effectively and allow them to gain control of their finances. This project taught me the importance of listening to my users and hearing their stories. In interviews, individuals shared how they budget and the frustrations they encounter along the way. These stories were much more powerful than a simple one-line answer to a question. By listening to my users' stories, I uncovered valuable insights, such as the preference for using spreadsheets over budgeting apps because of the ability to customize them and make them their own.

Another thing that I learned was the importance of making prototypes feel real. I did three of the five usability tests in person, giving each participant a phone with the prototype. I discovered that navigating the prototype on an iPhone gave them a more authentic experience. If I could have done something differently, it would be to conduct all of my usability tests in person with the prototype on an actual phone.

MOBILE APPLICATION

Decimal

⚡️ NOTE

Overview

ROLE

TIMELINE

Research

Research Goals:

Secondary Research

Competitive Analysis

COMPONENTS

Survey & Interview results

Problem Statement

Define

COMPONENTS

Application Map

User Flows

Design

COMPONENTS

Mid-Fidelity Wireframes & Prototype

⚡️ CHALLENGE

✅ SOLUTION

Branding

High Fidelity Screens

⚡️ CHALLENGE

✅ SOLUTION

Test

Task 1: Add a transaction to a budget.

TASK INSTRUCTIONS

TASK NOTES

TASK COMPLETION RATE

100%

Task 2: Add a transaction by taking a picture of a receipt.

TASK INSTRUCTIONS

TASK NOTES

TASK COMPLETION RATE

100%

Task 3: Add a new budget category.

TASK INSTRUCTIONS

TASK NOTES

TASK COMPLETION RATE

100%

Iterations

⚡ Problem (Figure 1)

✅ Solution (Figure 2)

⚡ Problem (Figure 3)

✅ Solution (Figure 4)

Next Steps

What I learned

More Projects