Case Study:
Harmony App Design
Project Overview
The Problem
Most young adults never learned how to effectively manage their money and have a general lack of knowledge about budgeting and saving.
My role
UX designer leading the app and responsiveUX designer leading the app and responsive website design from concept to delivery.website design from conception to delivery
The goal
Design an app that will educate young adults on of money management and savings.
Responsibilities
Conducting research, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
The product
Harmony is an app based tool that helps people learn about how to budget and save their money based on their personal spending habits. Harmony’s primary target users include young adults who are wanting to bulk up their savings or make a large financial commitments.
Project duration
September 2021
Understanding the user
To better understand the user, I utilized Financial Capabilities’ research centered around young adults and their money saving habits. From their research, I derived that most interview participants reported wishing they were taught saving and budgeting skills in school. The majority of participants do not recall ever receiving any advice or tips about money management strategies.
Persona & problem statement
Kyle is a busy full-time worker who needs a way to manage his money, because he would like to move out of his parents’ house.
Starting the design
Paper wireframes
I started the design process by using paper wireframes to come up with as many ideas as possible. My main focus was determining the best way to display all the information on the page so users can learn about their spending habits.
Digital wireframes
Usability study findings
1. Goal Page
Users struggled to understand what was on a specific goal’s page, because there was too much information.
2. Adding a goal
Users felt the ending of the sequence to add a goal was quite abrupt and they were unsure whether the goal was added or not.
3. Homepage
Users did not instinctively scroll to the right while looking at the budget goals section of the home page
After completing paper wireframes, I made digital wireframes which helped me to understand the user pain points within the design to improve the user experience.
I created a low fidelity prototype, which you can view here, in order to start user testing. The usability study consisted of 5 participants. Here were the main findings:
Refining the design
Mockups
I changed the budget goals section to a more intuitive scroll. Users will now scroll up and down instead of side to side.
I removed the second graph on the specific goal page in order to cut down on the information the user needed to digest.
Accessibility considerations
1. Buttons
Clear labels for interactive elements that can be read by screen readers.
2. Color
Colors were chosen to meet accessibility standards
A/B testing
Light mode
My goal for the A/B testing was to determine which color made the best impact for the user and to determine which menu option is the least distracting.
Design System
Responsive web design
Site map
Digital wireframes
The goal for the digital wireframes for the responsive web design was to have a seamless transition from device to device.
Going forward
Takeaways
Impact
Users shared that the app was easy to use and would make budgeting and saving easier. One quote from user feedback was “having everything on one screen helps me see the full overview of my spending.”
1.
Conduct research on how successful the app is in reaching the goal to help users budget and save effectively
What I learned
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were useful.
2.
Add more tips and tricks for users to learn more about saving money.