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.

 
2018-01-19_19-24-18.png
2018-01-20_13-00-06.png
2018-01-19_19-26-53.png
2018-01-20_12-58-27.png

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

2018-01-19_19-44-07.png
2018-01-19_19-47-07.png
2018-01-19_19-47-07.png

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.