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

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.


Decimal is a budgeting app designed to improve users' financial health. Taking inspiration from Mint, Decimal aims to provide a more user-centric approach by adding features that allow users to easily input incoming and outgoing funds, organize expenses into categories, and set 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.


UX Researcher
UX Designer


80 Hours

Competitive Analysis


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 some initial research to understand better how and why people budget. Through this research, I discovered that while there are various tools people use to budget, the two primary tools used are budgeting apps and spreadsheets.

Interestingly, many individuals still prefer to input their transactions into spreadsheets manually. This made me wonder what it is about these 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 and their 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.


Secondary research
Competitive analysis
User interviews

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.


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 Application Map
User Flow

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.

Application Map
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 Flow
User Flows


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.


Med-Fi wireframes
UI kit
Hi-Fi prototype

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


During my user research, I discovered that some people prefer to enter their transactions manually into a spreadsheet to help them stay aware of their spending habits and stick to their budgets.

As a result, it's essential to provide users with a way to input their transactions into the app manually. Since users will frequently be inputting their transactions, it's critical to ensure that the process is painless and easy to use.


Including a simple CTA with a plus icon in the bottom navigation bar, present in all contexts, will help promote learnability and reduce the learning curve for adding transactions. Its position in the center of the bottom navigation bar ensures it's inside the thumb zone, making it easily accessible to both left-handed and right-handed users.


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 app'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's
Dashboard screen


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


I incorporated a feature allowing users to create custom budget categories to which they can assign their transactions to. With this feature, users can assign a unique name and color to these categories, enabling them to organize their budgets in a way that makes sense to them.

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


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.


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.


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 2: Add a transaction by taking a picture of a receipt.


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.


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 3: Add a new budget category.


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.


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.




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.

Old category screen
Figure 3
New category screen
Figure 4

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 red for the overspent categories.

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