Case study: A UX/UI design for a budgeting app.
Introduction
The Project:
I design an app that provides a comprehensive and convenient way to track and manage personal finances.
Device: iPhone 14 Pro
Duration
05/2023 to 06/2023
My Role
UX/UI designer — I designed a mobile app from beginning to end.
Problem
“A 2020 Intuit Survey of at least 1,500 people found that more than 60% didn’t know how much money they spent the previous month.”
Competitor Analysis
I used competitor analysis to determine competitors’ strengths and weaknesses, as well as evaluate the UX/UI design elements of competitor products.
By doing so, I can generate more ideas to create a more innovative and user-friendly design that set my product apart from the competition.
Summary
The strength that the 3 apps have in common include user-friendly interfaces, expense tracking capabilities, budget customization, syncing with financial accounts and goal setting features
One of the few weaknesses they have in common that related to user interface is: learning curve for users who are new to budgeting software.
Step 1: Understanding the users
User Research
I conduct an interview with 5 participants who are budgeting.
Primary Questions
- When did you start budgeting and why?
- What money goals do you want to reach?
- How budgeting improves your personal finances?
- What do you think are budgeting mistakes?
- What will make budgeting more interesting and enjoyable for you?
Major Insights
- People track their spending by create different categories
- The best way to display budget is using graphs
- Setting the goal visually makes most people stay motivated
- Including gamification elements, such as challenges, achievements or rewards can make budgeting more engaging and enjoyable
User Persona
Affinity Diagram
Brainstormed and organized informations of the user research.
Pain Points and Solutions
User Flow
The paths that a user follows while interacting with this app.
Step 2: Design Process
Paper Sketch
I sketched out main pages of the app based on the insights after conducting user research. This step helped me to have a more organic and free-flowing exploration of design ideas.
The app has 4 main pages, which are overview, analytics, plans and goals pages. I also sketched a step-by-step on how to set up a new account and monthly budget.
Digital wireframes
I converted my paper sketches to digital wireframes to create a detailed, interactive, and shareable representation of user interfaces, enabling better visualization and testing.
Low-fidelity Prototype
I created low-fidelity prototype to quickly explore design concepts, prioritize functionality and layout, and gather early user feedback.
Usability Study
After creating low-fidelity prototypes, I gathered feedback from users to identify usability issues, hence making informed design improvements.
To gather feedback, I asked 6 people to test the low-fidelity prototype that I just created.
Findings
- Users want to see the history of expenses that they made.
- After creating a budget plan, users also want to track their savings toward that budget.
- Users want to make planning a budget more engaging and enjoyable.
Digital Wireframes (Updated Version)
I made changes to the digital wireframes below based on the findings of the usability study.
Step 3: Defining the design
Style guide
To maintain visual consistency and ensure a cohesive and user-friendly experience across all interfaces and interactions, I created a style guide.
Color choice: Green
Green is often associated with money, wealth, and financial stability. It can evoke a sense of security, growth, and prosperity.
Key mockups
High-fidelity prototype
Here are the final user flows of the app.
Step 4: Going forward
Takeaways:
I sharpened the following skills:
- Problem statement: Clearly define the problem or challenge the budget app aims to address
- User Research & User Testing: personas, user interviews, surveys, usability study
- Wireframes and Prototypes: Showcase low-fidelity wireframes and high-fidelity interactive prototypes
- Visual Design: Display the app’s visual design, including color schemes, typography, and iconography.
I also learned about the importance of iterative user testing and incorporating user feedback throughout the design process. This step is important since it ensures that the app effectively addresses user needs and provides a user-friendly experience.
Next steps — things I would like to implement
- I would add a feature where users can set up their budget not only for the current month but also for upcoming months.
- I’m planning on making this budget app usable on different devices, especially Apple watches. It can enhance user accessibility and engagement by providing real-time financial updates and quick interactions directly from the wrist.
