CASE STUDY
blueMount
Mobile app &
responsive website
Money manager and budgets
April - June 2022
CASE STUDY
blueMount
Mobile app & responsive website
Money manager and budgets
April - June 2022
Project summary
The problem
College students and young adults often struggle to understand their spending habits and have limited opportunities for savings, whether for education or other investments.
The goal
The design of an application that aims to help young adults who are working or studying on budgeting, saving, and personal finance.
The product
BlueMount is a Santiago-based organization with a focus on personal finance education. To better advise college students and young adults on budgeting and saving money, BlueMount requires a mobile app that can help this segment with expense tracking and financial planning. The target users for this app include young adults who are interested in learning how to track their expenses and save money.
My role
UX and UI Designer. Design a mobile app and responsive website for blueMount, from its conception to the final prototype.
Responsibilities
Perform interviews, generate both paper and digital wireframes, develop low and high-fidelity prototypes, conduct usability assessments, incorporate accessibility features, establish information architecture, and continuously refine designs.
Understanding the user
In preparation for the interviews, I relied on secondary sources of information, such as market research on personal finance apps, to choose my questions. I conducted interviews and created empathy maps to gain a deeper understanding of the needs of the target users.
Most of the interviewees reported feeling stressed and even embarrassed about their spending habits. Some of them mentioned they had little room for increasing their savings, even though they wanted investments in the short and middle term. Based on the feedback gathered through the research, it became clear that users would benefit from a friendly and simple way to track their spending and save money.
Pain points
Time
Organizing expenses is a time-consuming task for young adults.
Navigation
Users find budgeting apps very basic and limited in functionality, or highly complex and difficult to navigate.
Savings
Increasing savings gets exponentially hard when lacking an understanding of expenses.
Persona and problem statement
Gonzalo, who works as a junior Brand Manager, needs a user-friendly way to track his expenses, save time by avoiding the hassle of deciphering his spending at the end of each month, and effectively save money for future investments.
For Camila, a young adult balancing two part-time jobs, it’s crucial to have an uncomplicated means to keep her spending in check, set budgets to regulate it, and enhance her savings for college.
User - Journey map
By examining Camila’s user journey, it became evident that young adults like her would benefit greatly from having access to a specialized mobile app and website tailored for budgeting, expense tracking, and income management.
Competitive analysis
I conducted a competitive analysis of the four most popular personal finance applications, evaluating them across six dimensions and analyzing key elements. This analysis aimed to design an application to provide value to the targeted user segment.
Starting the design
Paper wireframe
I conducted a brainstorming exercise called Crazy 8s, which involved generating proposals to address the needs of users and gaps identified in the competitive audit of other mobile apps and websites. Then I designed and iterated proposals for each screen of the application using paper wireframes. The primary focus was to improve the process of adding, deleting, and visualizing new expenses or income. The best options were selected to create the digital wireframes.
Digital wireframes
The objective was to develop a straightforward and user-friendly flow that would help users easily add and track their transactions, alongside a summary dashboard.
I added clear action buttons, set a bottom navigation bar to improve navigation between screens, defined clear labels, and added a budget screen.
Low fidelity prototype
To conduct the usability study, I created a low-fidelity prototype that included the ability to add new transactions, both expenses and income, and finally check the budget screen. See low fidelity prototype.
Usability study findings
I conducted two rounds of usability studies. In the first one, I used a lo-fi prototype, getting insights that were used to improve the digital wireframes and create more detailed mockups. For the second study, I used a high-fidelity prototype and identified areas in need of improvement in the mockups. I conducted two unmoderated usability studies with five participants for both prototypes to gather feedback on usability.
Round 1 findings
- Users found it tedious to scroll to select a category when adding a new transaction. A search option was added.
- Users wanted to visualize information easily with charts, not only numbers.
- Users found it confusing to have an add button when selecting a category or payment method.
Round 2 findings
- Users felt exhausted with the number of options available when adding a new transaction.
- Users found it hard to read the text in clear grey, due to the low contrast with the background. Same with icons.
- Some users couldn’t complete the task of deleting a transaction by dragging the item from right to left.
Refining the design
Mockups
Color contrast for backgrounds and text was improved to comply with WCAG accessibility standards. Font sizes were increased, and options to access charts were added.
The new transaction screen was simplified, showing fewer fields and adding a “Show more” action button to access more options.
A search tool was added when selecting categories or payment methods. A new chart screen was included into the options available.
A new option was added when deleting a transaction. In addition to drag to dismiss, a new action button was added to delete the transaction in the “edit screen”.
Accessibility Considerations
Screen readers
Clear and descriptive labels were added to interactive elements throughout the app.
Icons
The design incorporates easily recognizable icons to improve action button interactions.
Contrast ratio
The color scheme and contrast ratio comply with WCAG accessibility standards
Final designs
High fidelity prototype
The high-fidelity prototype was designed to follow the same flow of actions as the low-fidelity prototype, but it included necessary design changes based on the results of the usability study. See high fidelity prototype.
Website with responsive design
Site Map
Responsive Designs concepts
Designs for a responsive website included mobile, tablet, and desktop devices.
Style guide
Spacing
Going forward
Learning
Impact
Feedback from users who tested the app was positive, with many commenting that it was an intuitive and user-friendly way to track their expenses. One user even praised the app, saying that the blueMount app was an easy and educational tool to learn about personal finance, manage expenses, and save money.
What I learned
Throughout the design process, I discovered that although the problem I was trying to solve was challenging, by following each step of the process and keeping the specific needs of the users in mind, I was able to develop practical and valuable solutions.
Next steps
New studies should be conducted to assess the effectiveness of the app in helping young adults with budgeting and saving money.
Consider adding more educational tips on personal finance and integrating a prize system to encourage savings and reduce expenses within the blueMount app.