Budget It 

The Project

CareerFoundry UI Course Design Project

The Budget It project gave me experience creating user Interface designs from doing initial market research to high fidelity mockups.  I learned step by step how to go from sketching design on paper to making them into a realistic set of wireframes that are ready for development.

The Challenge

Create a simple to use budgeting app that allows user to easy track their monthly finances without a bulky and unnecessary features.

Key Goals:

  • Research other applications that are already in the market

  • Determine user flows to determine the overall flow of the application

  • Iterative design wireframing

  • Determine and create branding and UI elements for final user interface designs

The Solution.

An app for both Android and IOS users that will them to manage and track their monthly finances.

Tools & Techiques Used:

Pen and Paper - Sketches of First Designs

Balsamiq - Low/Grayscale Fidelity Wireframes

Sketch - Grayscale/Final Designs

Prototyping - Marvel and Prottapp


Table of Contents

01.Research Process

I examined several existing budget apps already on the market and evaluated how they managed and tracked financial information.  I realized that I wanted to create a simple app that was not complicated to use and gave the user only what they needed to manage basic monthly finances.


02. Sketching


The first step in my user interface design process is to sketch out the interface on paper. I used Prottapp.com to create a paper prototype to have users test design before deciding on final layouts.

03. Paper Prototypes


  Using an app like Prottapp.com is great way to have users test your design before deciding on any final designs.

Budget It Paper Prototype

04. User Flows


Using Prottapp.com,I created user flows that show how the application will work


05. Low Fidelity Wireframes


Low-fidelity wireframes were created with Balsamiq to show further show user flows and the layout of Android and IOS.  

06. Medium Fidelity Wireframes

07. High Fidelity Wireframes


Final user interface designs are created based on previous wireframes, and branding and UI patterns that were created for Budget It Android and IOS Apps.


08. Observations

Budget It is a simple budgeting app that will allow users to manage and track their monthly income and spending, set savings goals and manage debt.

  • Designing for iOS and Android platforms have very design principles. It was important to understand specific interactions between elements for each platform.

  • Many budget apps are overbloated with too many features making it hard track your financial status.