Balance Mobile App
UI/UX Design Bootcamp
Background
In Fall of 2023, I participated in a UI/UX bootcamp hosted by GT Bits of Good. Where I had the opportunity to research a problem and conduct user research to create a mobile application prototype.
While researching we discovered that there was a gap between desktop budgeting and mobile budgeting. Although there were many mobile budgeting apps on the market, a vast amount of people preferred desktop budgeting (e.g. Excel & Google Sheets) compared to mobile budgeting. We set out to figure out why and create a mobile app that would combine the convenience of mobile budgeting with the benefits of desktop budgeting.
My Role
Responsible for research, semi-structured interviews, competitive analysis, concept sketching, wireframing, hi-fi prototyping, and user testing
Team Members
Rayann Liang
Hannah Tsai
Duration
August 2023
November 2023
Problem Statement
How can we create a mobile budgeting app that has the benefits of desktop budgeting and convenience of mobile budgeting to ensure that it can bridge the consumer gap in the market currently?
Research
Research Goals
-
Understanding user’s goals when the are budgeting
-
Learning features users hope to see
-
Identify user tendencies in certain platforms
Competitive Analysis
Mint
YNAB
EveryDollar
Excel
Budget Tracking Application
Zero-based Budgeting
Zero-based Budgeting
Tablesheet Template
Research Method
14
survey
results
5
semi-structured interviews
3
user
flows
Interview
We conducted interview sessions with five participants, each exhibiting varying degrees of engagement in budgeting
P1: Freshman at GT, pays for tuition, uses Mint once a month
P2: Recent college graduate, makes income, uses Excel once a month
P3: Junior at GT, makes income for wants, uses journaling each month
P4: Senior at GT, just started getting income, uses Google Sheets each month
P5: Freshman at GT, making income, uses Excel twice a month
_edited_edited.png)
_edited.png)
Survey
Q: How do you Budget?
Key Findings
Key Finding #1 - Users like visual and synthesized data.
We discovered through our interviews and surveys that the majority of participants use desktop budgeting or journal budgeting. Through our interviews we were able to discover that people liked paper and desktop budgeting due to the fact that they both allow for complete customization. Users have complete freedom on how they want to budget and how they want to display their data. Users specifically emphasized that Excel allowed them to create their own graphs and choose how to visualize their own data.
Key Finding #2 - Users want to get into the mindset of budgeting to control the budgeting process
We discovered that mobile budgeting was a little too “convenient”. Mobile budgeting has a lot of automatic features such connecting banking apps to the budget which allows for transactions to be automatically sorted. Many participants like categorizing transactions themselves as it allows them to see what they spent on and put it to a category of their liking.
Key Finding #3 - There should be a balance features without overwhelming the application
During participant interviews, we asked about their preference for desktop budgeting over mobile budgeting. The main reasons were a sense of being overwhelmed by the different features present in budgeting apps and their perception that Excel was easier to learn.
Design Requirements
Our Budgeting App has..
A data visualization home page
-
This page has graphs that users can choose to have complete customization of how they want to display their budgeting data
A drag & drop page to categorize transactions
-
This page allows for users to stay in the mindset of budgeting as they have to drag their transactions and drop them into the category of their choosing.
A logging page for other transactions and budget plans
-
This page offers the convenience of using previous budgeting plans which emphasizes the convenience the mobile applications can offer.
A Profile page for settings and notifications
-
This page allows for users to customize which notifications they would like to receive to customize their budgeting experience within the application.
User Flows & Wireframes
Onboarding User Flow
Creating a Budget Plan User Flow
Lo-Fi Wireframes for the User Flows
Final Product
Onboarding
We have two unique features on our application such as the customizable homepage and the drag & drop for transactions. So we created an onboarding process right after users sign in to help people better utilize our app.
If users are already signed in they will skip the onboarding process and immediately login to the app.
Home Page
The home page is the initial point of entry for users upon logging in which provides a comprehensive overview of their budgeting data. It offers complete customization options, allowing users to choose the positioning and selection of graphs based on their preferences.
Drag & Drop
Our application's primary function is an intuitive drag-and-drop system for organizing transactions. This is where users will manage transactions from their banking accounts by dragging & dropping transactions it to a category of their choosing. In addition to drag & drop, we've incorporated a matching feature designed to cater to users with accessibility needs. This feature allows users to tap on a transaction and tap it to the appropriate category.
Users are also able to view transactions by categories or all the categorized transactions all together.
Log
This page is where users can add offline transactions and create budgets. To enhance the convenience of our mobile budgeting app we included the ability to reuse previous budgets. Ensuring maximum customizability, users can edit any aspect of budgets and transactions according to their preferences.
Profile Page
Following the model of other mobile budgeting apps, we've a dedicated profile page. This page is where users can manage their accounts, notifications, and access help resources. Recognizing the common issue of users is feeling overwhelmed by notifications, we've implemented a feature that allows users to selectively customize their notification preferences.
Reflection
This is the first time I have fully defined the scope of the problem, performed user research, and created wireframes. Previously only having experience UI projects, so engaging in a project that emphasized both UI and UX was truly eye-opening and interesting. I gained valuable insights into the research process and learned how to effectively conduct user research, which greatly enhanced my understanding of the UI/UX project workflow.
I learned a lot about time management during this project, as it was the first time my partner and I collaborated on such an extensive UI/UX project. Given the vastness of the budgeting topic, we aimed to cover every aspect we discovered. However, we quickly realized that 10 weeks were insufficient to fully develop all our ideas. So we made the decision to prioritize the most crucial elements of our application for further development, ensuring that our work reflects the core aspects of our vision. Through this experience, we were able to work efficiently under time constraints, allowing us to showcase the best possible version of our application during our timeframe.