Bud is a fictional budgeting app exploring design concepts and principles learned during my internship at WillowTree

Objective

For this project, I wanted to create a product to reflect what I learned during my two summers at WillowTree as a Product Design Intern. I dedicated my research to budgeting because the topic was relevant
to the project team I was a part of this past summer.

Overview

Time: Summer 2019
Duration:  4 weeks
Skills:  UX/UI, Research, Design Systems,
High Fidelity Visual Design
Tools:  Sketch

During my internship at WillowTree, I had the amazing opportunity to learn about the process of designing products in an agency setting. I got to work one-on-one with my mentor daily to pitch ideas and develop designs for Fortune 500 clients. With creating designs for clients whose applications and websites can touch millions of people, I learned the importance of accessibility in products such as ensuring high color contrast, creating for flexible typography, and designing for screen readers.

This playful exploration of a budgeting app, Bud, is a personal project I took on towards the end of my internship to reflect on some of the things I learned at WillowTree the past two summers. Specifically, I dedicated my research towards budgeting because of its relevancy
to the project team I worked with this past summer. Thanks to WillowTree for allowing me to explore not only through client work but also with my own personal project too!

Intention

To begin the research process, I took a deeper look into current and well-used budgeting apps specifically catered towards college-aged and young adults. I focused on two apps, Clarity and Mint and their flows for viewing, creating, and tracking budgets.

Clarity: Your AI-powered financial champion

• 4.7 stars in App Store
• 4.2 stars in Google Play Store


Mint: Budget Tracker & Planner

• 4.7 stars in App Store
• 4.5 stars in Google Play Store

Research

"Shows you all your spendings in all your accounts
but doesn't help you actually budget."

While both of these apps have been highly rated for their beautiful interface, there were some areas that users believed needed refining. Since I did not have access to Clarity and Mint's user studies and usability tests, I took to the App Store and Google Play Store to read reviews. I also asked some of my peers at WillowTree (some have used one or the other, some have not used either) to see what they had to say about the functionality of the products. Across both Clarity and Mint, the main frustrations lie in the density of the information shown and difficulties with the budgeting function. The additional features seem to take up too much space for those who solely want to budget and the user experience for the budgeting flows are not glanceable.

"I was pretty excited to download this app. It connected to my bank account quickly. Unfortunately, the main reason I downloaded the app was to create a budget..."

"I want this to work, I really do, [...] so far I have gotten nowhere with making a budget
within this app."

"Shows you all your spendings in all your accounts but doesn't help you actually budget."

"2 stars until you integrate Goals into the mobile app. It is lonnnng overdue. Tired of having to log on via the web browser to update and view Goals. It can not be that hard to at least integrate a read only view in the app to at least SEE the goals."

Insights

To better understand these frustrations I found, I analyzed Clarity and Mint's user flows.

Once a user logs into Clarity and completes the onboarding flow, they will land on the dashboard which reveals their financial overview using separate a card format. The card information varies from account balance and transactions to other features such as monthly spending and ads. Clarity is praised for its aesthetic and friendly design (I agree!) however, to create, view, or track a budget, a user must scroll to the budget card (on my experience, it is 9 cards down) to be able to do so. The app does not allow you to sort the cards to your liking, so if a user relies on Clarity to budget, they need to scroll to the budget card in order to view that information. Once the budget card is selected, the user may view the budget, but only  from this week or last week. Clarity does not allow the user to budget by their time preference or personalize their budgeting categories.

To sum it up:

1) Not glanceable
2) Can only create, view, and track on a weekly basis
3) Cannot customize categories

Clarity

Similarly to Clarity, Mint was information and ad filled, except in a carousel swiping format. Mint also does not allow the user to remove information they feel is irrelevant to their financial health. The amount of swiping necessary to find a specific section may seem overwhelming to a user because there is no specific indicator as to where the user might be on the carousel expect for when they first open the app.

"It seems almost infinite. I could keep swiping and swiping forever, and still wouldn't be able
to find what I need."


While Mint is also praised for its beautiful interface, the layouts on the "Overview" tab are all visually similar, making it tougher for a user to be able to identify which card is for budgeting vs. transactions vs. savings. Once a user finds and taps on the "Budget" card, it will take them to the budget overview where they can view, edit and add budgets. Unlike Clarity, Mint has a myriad of categories users can choose from, however, the option to create your own category is not available. Mint also only tracks monthly budgets. Visually, the typographic hierarchy could be pushed to better specify categories as well. The user may also access their budgets from the the secondary navigation at the top of the screen.

To sum it up:

1) Not glanceable
2) Can only create, view, and track on a monthly basis
3) Cannot customize categories

Mint

Considering all the reviews and research conducted, I began thinking about the visual design of this new product I was creating. It was important to design each element in a clear, concise and hierarchal manner that allowed budgets to be glanceable. To make each category appear more differentiated, I created a new card design that provides three indicators for the user to associate with each category/budget with: category title text, a color and an icon. The card design also shows a progress bar and the current amount spent in large type, with the amount of days left and amount left to spend in smaller type. This allows the user to be able to quickly look at what they have already spent, and associate any of the three indicators with that specific category. The overall visual design is simplistic, helping users focus on customizing, viewing, and tracking their budgets.

Visual Design

Bud--Your Budget Pal is the personalized budgeting app fit for your lifestyle. Its simplistic interface enables users to swiftly glance and understand their financial budget health. Bud allows users to be able to create custom categories and select preset (or create their own!) colors to associate with their budgets. Users also can view their daily, weekly, and monthly overall spending in relationship to their current amount spent in each category. Additionally, Bud breaks down the transaction activity within each category so users can understand how their money is being spent. For those who want to focus solely on budgeting, this app is
made for you.

Bud--Your Budget Pal

Once a user signs up, they can begin creating budgets by tapping the "+" button on the dashboard screen. A sheet will appear from the bottom and from there, the user can select a category, budget amount, and color to complete a budget. The check mark above the "Budget Amount" section indicates if the user is within their recommended range based off of their connected bank account, income, average spending, etc. When a user has completed creating a budget, they can tap "Done" to return to the dashboard or "Create Another Budget" to continue adding more categories.

Create Budget

If a user chooses to create another budget, the "Create Budget" sheet will appear, along with the amount and category that the user has already budgeted for. This enables the user to view what they previously set up with the color, icon, and dollar amount indication. As the user continues to create more budgets, the budgeted category cells will be added to the top of the sheet for quick viewing.

Add Another Budget

When a user has completed creating budgets, they can return to the dashboard screen by exiting the modal or tapping "Done."  The graph at the top of the dashboard reflects the user's overall spending across all categories. A user may tap on a budget card to view how much they've spent in that category in relationship to their overall spending. They may also "Edit" the budget and view recent transaction activity within the category by tapping on this card.

View +  Edit Budget

It was really wonderful being able to take on my own project while learning about how to design for clients at WillowTree. I had the opportunity to participate in weekly critiques with the entire design team to present my work and at the end of my internship, I was able to
pitch Bud as its own individual product. While creating this project, I was reminded to have fun with it and push the visual aesthetics of what people might associate with finance while practicing inclusive design principles. As a graphic design major, a lot of what I design is visually driven. This project allowed me to think of visual design in a new way and be able to comprehend how visual design functions and what it might mean to potential users. Thank you to my mentor, Natasha, for guiding me along the way and to the design team to all the endless support and feedback.

Takeaways