Best Budget
Designed to take the stress out of money management and to help users streamline their financial goals into one app.
Brief
Tools
Figma, Miro, Figjam
Timeline
8 weeks
My Role
UX Design + Research
Deliverables
Hi-Fi mobile prototype
Managing finances and creating budgets can be stressful, no matter what your income is. Viewing statements with multiple banks can be hard to paint a clear picture of personal finances and creating a budget for specific goals can be time-consuming. Security is also a must for users to feel confident when entering sensitive information.
Challenge
User-centered design hi-fi mobile prototype
Simple, yet effective budgeting experience
Design tailored to user needs and goals backed by research
Results
Project Goals
Empower users to feel financially in control
Create compact money management tool
Streamline saving goals into one app
Research & Discovery
To help build this app I conducted a few different forms of research to help have a holistic approach to kicking off my design process.
The following section include user interviews, personas, and customer journey mapping. Including these multiple forms of research lead to a strong empathetic method.
Pre-Design Interviews
To learn more about how people budget for their goals, I spoke with 3 people about their money management habits discussing a set of 10 questions. Interviews were conducted remotely and notes were recorded in Miro. After finishing the interviews I conducted a thematic analysis and discovered four key themes as seen in the second image below.
Participant interview notes were recorded into a Miro board
Below are the top four themes that came out after analyzing the participant interviews.
Interview Key Findings
People have have anxiety inducing and negative feeling arise when thinking about money management.
Participants reported that financial planning is difficult if they are not actively thinking about their long-term goals.
People are motivated to save by larger goals such as trip, buying a home, or another large expense.
Good UI matters and people expect it, especially when dealing with finances and establishing trust.
User Persona
Understanding target users was essential for me to help build a meaningful app that also was representative of the participants form the interviews. Crafting personas to empathize, design, and innovate with purpose supports a more useful design as well.
Customer Journey
Building off of the participant interviews and user persona, I created this customer journey map to help build empathy for the user experience. It additionally helped to guide me in refinding the vision for the application design.
Lo-fi Prototyping
Crazy 8 Sketches
While messy in appearance, these crazy 8 sketches help to streamline the design process and flush out ideas visually. While drawing, I kept in mind the goal of simplicity, while helping users feel safe and in control. These sketches helped me prepare for the next stage of hi-fi designs.
Pie chart screens breaks down categories similar to figure 4, but offers a different visual breakdown that makes up their spending.
These 3 screens were designed to offer a simple sign in while adding a mention of valuing user security and confidence
Users are prompted to select their financial goals to help motivate them to save for specific things.
This graph offers a view of a monthly spending at glance to help users budget the rest of the month.
User Testing
I began the user testing by evaluating the lo-fi paper prototype. Participants were asked to think out loud while completing 3 tasks while interacting with the paper prototype. Additionally, errors and task time was counted to help gather quantitative feedback on the design and ease of use.
User Testing Key Findings
Users prefer to view their finances in a horizontal bar view rather than pie chart because it is easier for them to conceptualize their finances.
Needed to add features that increase security and trust for building user trust and confidence.
Participants loved the concept of a budgeting app that was designed with specific goals in mind because they found it more fun and motivating when comparing it to their typical budgeting.
Good UI matters as people expect it, especially when dealing with finances.
Hi-Fi Prototyping
Colors were carefully chosen to help combat any negative feelings associated with financial stress that arise. Selecting the wrong colors can have a major impact on the user experience.
Psychology Behind Color Choices
Blue is consistently one of the most popular colors in the world for a reason - especially in the world of banking design. Shades of blue and green were added into the color way to promote calmness, peace, and stress management. It is associated with safety and non-threatening experiences.
Yellow and gold are cheerful, optimistic colors. Yellow has scientifically been proven to boost mood, being the color that offers the greatest punch of positivity. Gold can evoke feelings of success, winning, and power. Purple was added in to make the prototype more visually engaging and move users through their journey with intuitive Call To Action buttons.
Flow Chart Diagram
I created this user flow chart in FigJam to visualize and understand the relationship of user goals and their actions. It helps depict the sign in or sign up process in sequential orders for both new and returning users. Creating flow charts was helpful to validate the prototype design of the natural customer journey and make sure users can accomplish primary goals.
Designing the prototype in Figma
Building Trust Through Security
Asking users to link their bank information is seen as a high risk request for many people. Trust early on is essential to establish a good relationship and impression with users. The following design features were added to help users feel safe and secure:
Implementing icons check + lock makes users feel safe & their information is secure
Creating a pin code deepens security & ease during login
Adding “trusted by millions” increases user confidence that Best Budget is established and their personal information is respected carefully
The last piece of trust that is sprinkled in is the “Best Budget LLC 2022” located at the bottom of multiple main pages. Additionally, this offers credibility so users can verify that the business is legitimate via the BBB search engine.
Accessible Elements
Awareness of universal design is important to me in every project. Beyond just the scope of UI, consideration of writing and user interactions were at the forefront of my prototyping process. The following accessibility elements were included to uphold WCAG standards and craft an application targeted towards a universal audience as well:
Empty input boxes, so text does not disappear when typing. This helps make the design screen reader friendly for users with visual impairments.
UX writing: “Coaching” users. You need to help them figure out what to do sometimes and create an obvious direction.
Accessible contrast: CTA buttons, secondary, highlighted buttons, text color hierarchy
Friendly Design
The prototype was crafted with emotion design at the forefront of my consideration; based on participant research - people want to feel at ease while dealing with financial planning as it can be stressful. UX writing was thoughtfully considered to help users associate more positive feelings with the application. Colors were carefully chosen to promote calmness, trust, and optimism. Additionally, design elements were smoother and simpler to help make the app environment a heuristic experience for users to navigate
UX Writing: Users are supported through their sign-up process by use of clear language and also confirming that their bank has been linked
Color Selection: Blue was selected to promote calmness and security, yellow was selected to add a pop of positivity
Key Takeaways & Recommendations
A feature to develop would be the monthly “spending at glance” section. Moreover, I would develop the analytics feature to calculates how much you need to cut back on spending in certain categories in order to meet goals.
1.
The app was designed with the consideration of stress of budgeting and finances at the forefront. The prototype reflects that both in UI and UX elements - in future iterations I would keep going deeper on the emotion design to offer an even more meaningful customer experience.
2.
Go deeper into goal selection feature. Having the option to select multiple goals at once would be a useful feature. Also, conducting user research on primary & common goals. Plus, being able to add a “custom” categories.