Stash
UX/UI Web App Design
Responsibility
– Brand Identity
– UX Research
– UX Design
Problem statement
With a constantly increasing cost of living and inflation, how can we build an app that is able to help young adults learn about personal finances, take smart decisions with their income and save money so that they can avoid having to struggle to pay bills and afford their living expenses?
Goals
To design an interactive and engaging digital platform for young adults aged between 18 and 28 that educates them about personal finances and facilitates a way for them to save money comfortably.
Design Process
For the Stash app I started the design process with research on similar money management apps, followed by a study over the target audience which helped define personas and eventually develop the app’s Information Architecture. Next, sketches and wireframes were made during multiple design sessions, maintaining a clear and easy to use user flow. Finally, while focusing on user needs and preferences, after some iterations, high fidelity designs were built, achieving an appealing and friction-free user flow.
/Personas
/Information Architecture
Wireframes
This was the first step of the design phase. Starting with a pen and paper, I started with the design of paper wireframes of the main user flow, in which the user adds money to an existing savings plan. This paper wireframes set the base for the more polished digital ones, which I created using Figma.
Evolution
After the completion of all wireframes, some iterations and design choices had to be made. While the first designs and wireframes mainly focus on building a great user flow, this part of the design phase requires a focus on the user needs and preferences. In this case, previous research gave us insights about our users preferences:
High fidelity designs
Following the same insights discussed above, I designed the rest of the user flow and its desktop version, which have the same goals: To avoid users exiting the flow and incentivize them to keep saving money.
Conclusion
The completion of the high-fidelity prototype was the last part of my course assignment, but this doesn’t mean that this project is complete. The next step would be to repeat the design and prototype phases for all the other user flows and parts of the Information Architecture map. Next, all wireframes and designs would go through a series of tests and usability studies before being handed to engineers for the development of the app.
Thanks for following along this case study. I encourage you to check out some of my other works too. Finally, do not hesitate to contact me at hola@marcwebs.com or through my LinkedIn profile.