Budge -Budgeting App
Budgeting Made
Simple
UX Design -Case Study
Industry: Finance
User Interface/User Experience
Design Concept
Overview
Budgeting is fundamental for several reasons;
-
It helps you to control your spending: By creating a budget, you can identify areas where you may be overspending and make adjustments to your spending habits. This can help you to avoid overspending and accumulate debt.
-
It enables you to save money: A budget can help you to allocate money towards your saving goals, such as an emergency fund or a down payment on a home.
-
It helps you to plan for the future: Budgeting allows you to plan for future expenses, such as a car repair or a child's education. It can also help you to plan for long-term financial goals, such as retirement.
-
It provides financial stability: By keeping track of your income and expenses, you can ensure that you have a consistent and reliable financial foundation. This can provide peace of mind and reduce stress related to financial issues.
In summary, budgeting is important because it helps you to make informed decisions about your money, achieve your financial goals, and achieve financial stability to avoid overspending and accumulate debt.
The Challenge
Creating a budgeting app can be a challenging task, as there are couple factors to consider.
One of the main challenges is ensuring that the app is user-friendly and easy to navigate. The app should be able to guide users through the budgeting process and provide clear and concise information about their financial situation.
Another challenge is ensuring that the app is accurate and reliable. The app should be able to accurately track and categorize a user's expenses and income, and provide accurate reports and insights about their financial situation.
​
Overall, creating a budgeting app involves balancing user-friendliness and accuracy, to provide a comprehensive and effective tool for managing personal finances.
Target Audience
Budgeting apps are typically aimed at individuals and households who are looking to manage their personal finances more effectively. This can include people who are trying to save money, pay off debt, or achieve specific financial goals, such as buying a home or saving for retirement.
​
Budgeting apps can also be useful for small businesses and freelancers who need to track their income and expenses in order to stay financially organized and profitable.
​
In general, the target audience for a budgeting app is anyone who wants to take control of their financial situation and make informed decisions about their money. This can include people of all ages, income levels, and financial backgrounds.
My UX Design Process
Empathize
Define
Ideate
Prototype
Test
Understanding the needs, motivations, and behaviors
of the users through activities such as observation, interviews,
and analysis.
Define the problem that needs to be solved and create a point of view that reflects the user's needs and goals.
Generate a variety of ideas for solving the problem and improving the user experience.
Creating a physical & digital representation of the design solution in order to test and iterate on the idea.
Gather feedback on the prototype from users and use this information to refine and improve the design.
Initial Design Concepts
During the ideation phase of the design process, I created paper wireframes to explore and refine my ideas for the Budge app. These wireframes served as a starting point for the next phase of the process, in which I created digital wireframes that would be used for user research and testing. This research helped to inform the final look and feel of the app, as we were able to gather valuable insights from users about their preferences and needs. The resulting digital wireframes provided a clear direction for the development of the Budge app and ensured that the final product was tailored to the needs of our target audience.
Paper Wireframe
Digital Wireframe
User Research: Summary
During the user study, several key findings were consistently mentioned by participants. These findings are highlighted below:
"Cluttered homepage"
The homepage has too much information resulting in confusion and overwhelming for users, leading to a negative experience. When there is too much information or too many options presented on the homepage, it can be difficult for users to find what they are looking for and decide what action to take next. This can lead to frustration and increased bounce rates, as users may choose to leave the app rather than trying to navigate through the clutter. Additionally, a cluttered homepage can make it difficult for users to understand the purpose or value of the app, as they may not know where to focus their attention.
"Chart on summary page is too small"
Initially, I had planned to display 12 columns (representing 12 months) on the vertical view of the chart. However, upon further review and analysis through user testing, I found that this approach may not provide the best user experience. To improve readability and reduce clutter, I implemented a design in the mockups where only half of the columns are visible at a time, with an enlarge view button that allows the user to view the full chart if desired. This modification also enhances the mobile experience, as it prevents the need for horizontal scrolling or zooming to view the data.
"Fiscal year unstated"
As I designed this app, my primary focus was on helping users effectively manage their budget by tracking their income and expenses in real time. However, during user testing, a participant suggested the ability to view and compare previous years' budgets. This feedback prompted me to consider the long-term use of the app and the potential value of additional features such as historical budget comparison. As a result, I made the decision to prominently display the fiscal year on all pages (Home, Expenses, Income, and Summary) to ensure that users are aware of which year they are adding data to and can easily access past budget information if desired. This change not only addresses the needs of the user who provided the feedback, but also enhances the app's functionality and usability for all users.
Mockups: Main User Flow
The Budge app includes two primary user flows, as illustrated in the accompanying images. The top half shows the process for adding a purchase, while the bottom half demonstrates how a user can input their income. By navigating to the Summary page, users can easily see their total saved balance by subtracting their expenses from their income. This simple math allows users to quickly and easily track their budget and make informed financial decisions.
User flow to input income
User flow for adding a purchase
The Summary page of the Budge app combines and displays data from both the Expense and Income pages, providing a comprehensive overview of how the user is spending and earning money. The visual representation (growth chart) helps users to understand and track their financial habits, empowering them to make informed decisions about their budget.
Prototype
Experience the Budge app firsthand by testing out the prototype! Simply click the button below to access the homepage and begin exploring the app's functionality; This is a great opportunity to get a feel for how the app works.
If you have any thoughts or suggestions on how to improve the user experience, please don't hesitate to let me know by clicking here.
What's Next?
The Budge app is currently a design concept for a budgeting app, but the response from the user research has been overwhelmingly positive. 100% of the participants in the study expressed interest in the app and indicated that they would download it once it becomes available.
As a result of this feedback, I have a software developer colleague in the process of turning this design into an actual app for mobile devices. More info coming soon; stay tuned!
Thanks for checking out my case study! I highly recommend to check out my other UI/UX Designs. Click here to view my design concept for a flight booking app.