Designing an Automatic Budget Calculator

Olayinka Fadare
5 min readAug 17, 2019

I documented my journey to becoming a UI/UX designer almost two years ago. You can read about it here.

This is a case study on a little project I worked on for a design test.


High fidelity image of an automatic budget calculator app

About the mobile app

The mobile app is an automatic budget calculator. It is called BudgetY. This is a tool that collects information about a person in a form or quiz format, the result is then generated based on the data that had been collected from the person in the form or quiz.

The Goal

Automatically calculate a user’s budget based on the data imputed by him/her.

Goals & Tasks

User Goals

  1. Enter data
  2. See 10 budget categories important to them
  3. See budget amount
  4. See budget percentage

User Tasks

  1. Enter information such as income, age, marital status, gender and number of dependents

Design Duration

This design took me 8 hours. I spent a lot of my time on user research in order to come up with a seamless experience for the users.


This section takes a deep dive into understanding the users by conducting user interviews, forming user stories and articulating user journeys and app requirement.

User Interview

I interviewed 4 user categories

  1. Single
  2. Married
  3. Users with dependants
  4. Users without dependants

The aim of this interview is to get an idea on what users spend money on; to get a list of 10 expenses common among these set of users and to enable me allocate the accurate percentage to each of these items.

Key Findings

  1. Users are conscious of the fact that they need to manage their money efficiently and to keep themselves in check.
  2. Most of the users have the savings category as their largest budget category.
  3. Most married people have at least one dependant, and the “dependant budget” is often the second largest category.
  4. Many of the users have more than 10 budget categories lined up monthly.
  5. Some users want to see a visual representation of their budget.

Quote from a user; “It is more stimulating for me when there is a visual representation of my budget. That way, I can easily understand how I’ll spend my money”

User Priorities

  1. See 10 budget categories important to him/her
  2. See budget prices and percentages
  3. See total price of budget

User Stories

User stories helped to understand context, motivations and desired outcome

  1. When I launch the app, I want to see a brief text explaining the app, So I can understand what the app does
  2. When getting into the app, I want to be able to enter some data, So I can calculate my budget
  3. When getting into the app, I want to be able to enter some data, So I can calculate my budget
  4. When getting budget, I want to see ten budget categories, their prices and percentages, So I can know how to spend my money

User Journey

The steps users take before, during and after their involvement with the app

  1. User gets income alert
  2. User pulls out phone and launches app
  3. User enters data (income, age, marital status, gender, number of dependents)
  4. User sees 10 budget categories, amount and percentage allocated to each of them
  5. User can track expenses using an expense tracking app

App Requirements

Based on users’ goals and needs, the app should be:


  • Display accurate data and information


  • Understand user scenarios and goals


The following assumptions were made for this project

  1. The user of the app gets a steady income
  2. The user of the app is prudent

Trade Offs

A lot of trade offs were made in order to focus on the users achieving their goal; these tradeoffs were made because of time constraints(The whole project was completed in a little under 8hrs). The two most important ones are highlighted below;

  • Users cannot login or create account

Users’ top priority is to get calculated budget which can be achieved without creating an account. Users can achieve this goal as soon as the app launches

  • Tracking expenses

Allowing users to track their expenses after calculating their budget would be a great feature. Due to time constraints, this was not explored as it is not required for users to achieve their goal.


Thinking back to the four main user goals;

  1. Enter data
  2. See 10 budget categories important to them
  3. See budget amount
  4. See budget percentage

I designed some wireframes that focused on meeting these goals in this order

  • Splash screen — Shows the name of the app
  • Onboarding screens — Gives the user more information and explanation on what the app does
  • Data collection screen — Users input the necessary data
  • Budget screen — Shows the result from the imputed data
Low fidelity wireframes of an automatic budget calculator app

Interactive Prototype

To get a sense of the flow and test the experience, an interactive prototype was created for the high fidelity wireframes

Here is the link to the app

The purpose of the prototype was to:

  1. Test whether the wireframes and design flow was helping the users achieve their goal
  2. Assess whether interactions are clear and flow is linear
  3. Test and fine-tune basic animations and transitions
Prototype wires image of an automatic budget calculator app

I attached a gif file of an interactive prototype I designed with Adobe XD. It shows how a user can interact with the app.

Interactive prototype gif of an automatic budget calculator app
Interactive prototype of the BudgetY app


The design and prototyping tool used for this project is Adobe XD.

Thanks for reading.

If you enjoyed this article, let me know by leaving a comment below or by 👏



Olayinka Fadare

UI/UX Designer specialized in creating beautiful websites, mobile apps and digital interfaces with great user experience. Find me on Twitter @yinka_x