Logo design by Jo Goforth
Everyone should have access to sound saving plans. The average person doesn’t have access to a financial advisor, but now they will. With mobile saving plans, anyone can save for any life event.
This project was part of my Career Foundry Bootcamp. I was given a basic outline to create a financial app either focused on helping a user save or invest their money. Throughout this project, I created Brand Guidelines, did Competitor Research, did several rounds of user testing, and created designs from sketches to high-fidelity wireframes.
Competitor Research
To begin my work cycle I explored the current market. I analyzed six of the top savings apps to see what is currently offered to users, and what is missing that they would appreciate.
The critical aspect missing was the ability to include stretch goals and an app offering various saving plans to help meet the user's goals in different ways.
Sketches
After defining my main user journey I set out to create time-saving low fidelity sketches of my wireframes. I was able to quickly iterate versions of these wireframes, before choosing what worked the best and heading over to Figma.
Wireframes
Using Figma, I translated my first sketches into low-fidelity wireframes. At this stage, the wireframes were defined enough for some user testing. I then created a prototype of a key user flow, loading the app for the first time through creating your first project, and tested it with five potential users. Based on this testing, I made a few alternations and moved on to creating high-fidelity prototypes.
User Journey
With the goal of crafting a robust saving app, I crafted three primary user flows to create a user journey.
As a user, I need to be able to tell the tool what my savings goal is and how long I have to reach it so that I can save accordingly.
As a user, I want to be notified and rewarded when I have reached certain milestones throughout the saving period to know whether I’m on track to reach my goal.
As a user, I want to receive personalized saving plans to save money to reach my goal in time.
Usability Testing
I created a fully-functional, high-fidelity prototype of the new flows using Figma. Using the user feedback from my previous testing, I guided my designs to their new level of detail. At this phase, I again incorporated user testing with A and B testing for the color palette of the wireframes. Using the comments on the A and B testing I was able to synthesize those results to create a more welcoming and useable design.
Issue One
I continued to run into issues regarding contrast in my design.
Solution
By creating a design with a darker palette and a lighter one I was able to hear from users what worked for each design, to then create a design that adhered to the Brand Guidelines while also catering to users' needs.
UI Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that was aligned with the brand’s values and message. The key aspects of the Brand Guideline I adhered to were the tenants of clarity, precision, and friendliness. The design needed to be one that is easily understood and minimalist to provide focus. Therefore each wireframe was pared down to its essential details, while still providing robust offerings.
