Startup
Responsive Web App
UX Design, Product Strategy, Product Management, Inclusive Design, User Research, Discovery Workshop
Wireframes, High Fidelity Designs, Style Guide, Product Roadmap, Story Map, Personas
We kicked off the project with a discovery workshop to better understand our client’s goals: what problem are they trying to solve with this tool? Who is using it? What issues are they experiencing with the current software? How can we improve it? What does success look like? Next, we took a step back to help our client create a product roadmap for other monetization strategies for the SPENDiD brand overall, which includes a Rest API and B2B tools, in addition to the consumer budgeting tool.
Once we solidified the project’s goals, we began with a round of benchmark testing to better understand issues with the existing demo app. To help us better understand specific improvements that we needed to make, we conducted user interviews and observed them using the app. Through those interviews, we identified some areas of concern. People were confused by the SPENDiD, Savings, and Lending scores, which were presented in a numerical and alphabetical format (example: SPENDiD score: 2.3 B+). People weren’t sure what the numbers meant, or what scale was being used. They often asked “was 2.3 high, or low? If it’s a low score, how can I make it higher? What’s making it low to begin with? What do these scores mean?” In addition to the scores themselves, the score tiles changed colors (green = good, red = bad). We found that the colors, accompanied by low grades, was causing people to feel shame about their current financial situation. We also discovered that the form labels were causing a lot of confusion.
In our redesign, we wanted to equip people with the information they needed to improve their financial health, but also eliminate feelings of shame or frustration. This shame or frustration can cause people to abandon a tool altogether, even if it’s presenting important information. To achieve this, we combined and simplified the scoring tiles into a single “SPENDiD score” that is based on a 0-100 scale, using a gauge chart for added visual reinforcement. Then, we eliminated the red color from the scores entirely. For the form labels, we focused on making the language easier to understand, minimizing the chance that someone could enter incorrect information into one of the fields, negatively impacting their budget analysis. Finally, we tweaked the language on each budget category, ensuring that people had a clear understanding of the steps they needed to take to address any issues SPENDiD identified with their current budget.
We then performed a second round of testing to ensure our new designs solved the issues we identified in the first round. After another round of tweaks, we created an all-new experience for the SPENDiD web app that was mobile-first, intuitive to use, and provided clear next steps on improving financial health.