MOBILE APPLICATION

Decimal

An iOS app that helps users set budgets, effortlessly input their transactions, and customize the overall app to fit their needs.

View Prototype

Decimal Thumbnail 2
⚡️ NOTE

This is one of the projects I completed for Designlab's UX Academy. Despite not being a real app, the research is genuine, as well as my mentor's and student's feedback. I'm proud of this project and just wanted to be transparent with you.

Overview

Decimal is inspired to improve people's financial health by creating a budgeting app. Inspired by Mint, Decimal intends to give a more user-centric approach to their app, adding features that help users effortlessly input incoming and outgoing funds, organize expenses into categories, and set up financial goals.

The goal was to determine how people budget and design an iOS app centered around their needs and wants. Good research was essential for this project.

Competitive Analysis

Research

Research Goals:

  • Determine why people are motivated to set a budget.
  • 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, writing on paper, budgeting apps, etc.
  • Uncover frustrations that people have with budgeting applications.

Secondary Research

My research began by defining my objective. I conducted some general research on how and why people budget. Like other financial endeavors, budgeting is complex and involves substantial effort to succeed. I quickly discovered that people use various tools to budget, but the main two are budgeting apps and spreadsheets. 

Surprisingly, many people still prefer inputting their transactions into spreadsheets. This made me wonder — what about spreadsheets makes them such an efficient budgeting tool? Do users like the ability to customize their spreadsheets? Is there some psychological component of manually inputting each transaction that motivates them to stay on budget?

Competitive Analysis

Based on what I gathered during my initial research, I needed to understand popular budgeting apps' features. This led me to create a competitive analysis of the four most popular budgeting apps with the hope that I could uncover missing features that would benefit my app.

Competitive Analysis
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.

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. 

User Persona
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.

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 Flow
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.

Decimal Sketches
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.
Decimal Wireframes
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

Solution

The inclusion of a simple icon in the tab bar will be present no matter the context. This will also promote learnability and, in turn, lessen 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.

Decimal Logo
The geometric-like icon signifies precision and accuracy, which ties back to the intent behind the financial recording. 
Brand Colors
I chose purple as the primary color because purple tones tend to convey a sense of relaxation and stability.
Homepage Sketches
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
Onboarding Screen
Onboarding screen
Onboarding Screen
Dashboard 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

Custom tags 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 Transaction Modal
Add a Transactions modal
Add A Transaction Modal
Horizontal scroll feature (Add a Transaction modal)
Camera Screen
Camera Feature (Add a Transaction modal)
Transactions Page
Transactions page
Categories Screen
Categories page
Add A Category Screen
Add a Category modal
Dark mode screen
Dark mode
Light mode screen
Light mode
Notifications
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.

Old Transaction screen
Figure 1
New add a transaction screen
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.

Old category screen
Figure 3
New category screen
Figure 4

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.

More Projects