BUDGET BOOST; A BUDGET TRACKING APP
Budget boost is a budget tracking app that allows users to view and manage their finances. It was part of an internship training I did in India where I learned the fundamentals of UX/UI, including, spacing, organizing elements, primary and secondary buttons etc.
Overview
This project stemmed from going back to basics and learning the fundamentals of UX/UI design. BudgetBoost is an all-in-one banking app that empowers users to achieve financial stability and control. Users can effortlessly create and manage budgets, gaining a clear understanding of their income, expenses, and saving goals.
This project aimed to understand the smaller details of UX/UI design, such as spacing, alignment, hierarchy, and the use of accent colors/elements through designing low to high-fidelity wireframes.
Project
-
Internship with Canvs, an Indian UX/UI design agency
Tools
-
Figma
-
Miro
What I Learned
This project showed me that UX/UI is so much more than aesthetics. In fact, the smaller details are what make the bigger difference. I learned to make the habit of asking "why?" after every design decision to ensure it is the best solution. After several iterations and going back and forth with great designers from Canvs, this hands-on internship program made me realize that design is best achieved when open to feedback. I was taught to never be attached to early designs because things can change fast. The continuous feedback and iterations made me a better designer.
USER RESEARCH
Survey
Demographic
-
Ages 22-34
-
Male and female
-
American and Asian
Professions
Participants
-
Banker
-
House wife
-
Student
-
10 people
Insights
1. People who are new to banking find it difficult to manage their money and understand all the various features offered.
2. People just want a simple banking app without the bells and whistles
3. The navigation in banking apps can be strenuous, easier flow and fewer clicks are beneficial for users to have a better user experience
4. Numbers can be intimidating, visuals are helpful to break that overwhelming feeling.
USER STORIES
User Flows
Why User flows?
-
It serves as a blueprint for the user experience.
-
It helps the designer understand the sequence of steps a user takes to accomplish a specific task.
-
It ensures that the UI is designed to meet the user's needs and expectations.
-
It provides a smooth and seamless user experience.
-
Without a clear understanding of the user's journey, the UI can be disjointed and confusing.
Creating a user flow helps designers to:
-
Determine the optimal UI layout
-
Identify the most important features to include in the UI
-
Identify opportunities to improve the user experience
-
Identify potential areas for innovation.
This user flow identifies how a user would see credit card details such as how much they need to pay and by when. This user flow also addresses how to pay your credit card bills and how to see all your credit cards laid out for people who have multiple cards.
In doing this user flow I realized the most important displays I needed to design are the home page with general card details, More in-depth details about each card such as transactions and statements, Payment flow, and all credit cards laid out.
Wireframes
Low Fidelity
Home Page
Pay Bills
Credit Card Details
Pay Bills- Filled out
Statements
Subscriptions
See All Cards
Payment Successful
Major Changes
Home Page
Wireframe
Final Design
- I realized making the first credit card visibly bigger was unnecessary
- Bank apps have Ads, I needed to make space for that
-I found it helpful for the top right-hand corner of every credit card to mention when the payment is due. The red stands out and is easy to spot. however, it only turns red if the payment is due in less than 7 days.
- I realized for the cash rewards, 'see rewards' and 'redeem rewards' would take the user to the same page so I made the 'redeem rewards' button bigger and more noticeable.
Successful Payment
Wireframe
Final Design
- When the 'payment successful' note covers the whole page, it disrupts the flow. Users can be confused about how to return to the home page
- Although all my wireframes don't have color, the green in the final design feels rewarding and reassuring.
Subscriptions
Final Design
Wireframe
- I realized used would like to have more quick information about their subscriptions like the next charge and date. In the final designs, I added that right at the top so users can scan their subscriptions and understand what companies are charging them.
- I thought grouping subscription charges into months would be helpful to see what has already been charged this month and what will be charged in the future. Some companies charge at the beginning of the month while others charge at the end. This will help users keep track.
Credit Card Details
Final Design
Wireframe
- Progress bar didn't need to be that thick
- Highlighting the "latest bill' tab could be more elegant; instead of creating a huge box, just highlighting the tab with the accent color makes it look cleaner
- Adding "today" and "yesterday" in the transactions help keep track of charges
- Primary and Secondary buttons are helpful for users to make decisions
Context
Displays
