Designing an Automatic Budget Calculator

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.

Enjoy!

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.

Process

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:

Reliable

• Display accurate data and information

Usable

• Understand user scenarios and goals

Assumptions

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.

Wireframing

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

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 https://xd.adobe.com/view/46ceea5c-c166-42cc-7cb4-d4d1b29b164a-30ff/

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

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 of the BudgetY app

Tools

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 👏