budget(ish) Web App
Brooke Jackson
User Experience Designer

budget(ish) Web App

Creating a budgeting app that encourages young adults to make informed choices about their money


Create an interactive web app developed in Ruby on Rails that solves a common problem for college students.


budget(ish) Web App


We sent out a survey that received responses from over 125 people between the ages of 18-26. We found that:

  • only 23% of those surveyed knew how much they spent in the previous 7 days
  • 77% of the young adults surveyed track their spending by checking their bank account

We sent out a second survey that later informed the terminology we used in the set-up form.

"I just kind of hope and pray it works out."



To understand the characteristics of our target demographic, we interviewed 10 young adults about their spending habits and budgeting needs.

We found that young adults:

  1. Want convenience and flexibility
  2. Have irregular schedules/income
  3. Need to be held accountable for their money
  4. Feel overwhelmed when starting a budget 

budget(ish) Web App

Persona: Type A

Our first persona was a “Type A” personality. “Brianna” would be drawn to stability and organization. For her, starting a budget is a daunting task since she does not know a lot about budgeting and is afraid of failure.

budget(ish) Web App

Persona: Type B

Our second persona was for “Type B” personalities. “Drew” would be a user that is really looking for easy ways to stick to his budget. He wants something that’s quick, easy-to-use, and doesn’t hold him back from having fun.


User stories written before designing and developing the application.
User stories written before designing and developing the application.
budget(ish) Web App

Wireframes and User Testing

We used wireframes to do initial usability testing using a prototype in Axure.

At the end of each sprint, we conducted guerilla user testing with students to make improvements before development.

budget(ish) Web App

Mockup: Overview

Users could quickly add, subtract, and transfer money on the overview screen, whether on mobile or desktop. We wanted to shift away from spreadsheets, so the money is in list view and easy to scan for our busy, young adult demographic.

budget(ish) Web App

Mockup: Spending History

We wanted young adults to be aware of their spending habits, so we created a page that keeps track of all of their purchases. Users can get a quick view of their spending habits by looking at the pie chart.

budget(ish) Web App

Mockup: My Savings

We wanted to encourage young adults to save by providing a way for them to watch their money increase over time.