September-December 2017

For students who need help budgeting their money, Budge is a spend management website that provides a simple set of budgeting tools, including a friendly chatbot to help users better manage their money. Unlike other spend management solutions like Mint, Budge is friendly and customized for college students and their needs.


The Process

Budge is a project I created in my Interaction Design class in the Fall of 2018

Research & Development

I conducted a lot of user interviews on campus. My target audience was college students. I found that students were really interested in learning how to budget, managing their finances, and investing in the stock market. Their main motives were being able to better manage the money they made while working, spending less money on food, and being prepared for life after college. Currently, most students are not budgeting or using apps like Bank of America or Mint. Some are even doing the math in their heads. Many complain that the apps are not customized and that budgeting is scary.



Using my research, I created personas. These personas reflected the interviews I conducted at my university.



I also did several iterations of a logo for my website. A lot of my initial sketches were very generic and also not very expressive of the brand I was trying to create. I decided on using two overlapping B's in the Akzidenz Grotesk typeface. I also decided on the specific shade of green based on different financial companies I had researched.

Sitemap Drafting


Based on my research, I realized I wanted to make a customizable website for college students to better budget their money. I wanted to incorporate relevant categories for college students, like Venmo. I also wanted it to be a private website, not intended for social use. Also, this would be an ad-free website, as many students complained about ads. I focused primarily on two workflows.

1. Creating a Budget: For this workflow, there is a create budget page where they can input how much they spend in various different sectors. Once this is complete, the user recieves a set of bars with budgets per month. I made sure to include venmo as a category so the college student would get better use out of this application. Once the budget is created and the user is active, the budget will appear as a pie chart on their home page.

2. A Friendly Chatbot: I also wanted to create a workflow for someone who needed more help creating a budget. For this persona, I decided to have a friendly chatbot with which the user could interact with. This workflow walks the user through a series of questions that creates a budget template based on their answers.

Both of these workflows are represented in videos at the bottom of this page!

Prototyping - Balsamiq


The first round of digital prototyping I did was using Balsamiq. Here is an example of three of the screens the user would see throughout their workflow.

Prototyping - Adobe XD


The second round of prototyping I did was using Adobe XD.

Prototyping - Final Clickable Version

I prototyped the final web application using Adobe XD. This specific classed focused more on web design, so I have a more fleshed out prototype for the desktop view. I also have a mobile view that is less functional!

Next Project: Study Up

let's get in touch!