Save
Save is your personal banker—right in the palm of your hand.
Save is an application designed for users of all financial literacy backgrounds to budget and view a summary of their personal net worth and financial standpoint. Save is both a financial education hub and a personal virtual financial assistant. The application is designed to make users feel empowered and in control of their finances.
Overview:
Role: Concept Creator, UI Designer, UX Researcher
For: Springboard Capstone
Date: January 2020-August 2020
Type: Case Study
Problem Statement:
In 2017 a report by the National Endowment for Financial Education found that only one in five millennials demonstrate basic financial literacy. According to a 2020 study conducted by the Council for Economic Education less than half of the states in the U.S require high schoolers to take a personal finance course. This is the problem that Save aspires to be a part of the solution for. By being an application that presents financial information in a way that is approachable, interesting, and engaging to users.
Users
The user of this product was targeted to be between the ages of 16 to 35. Save is an inclusive app, it is there to help the sixteen-year-old who has just received their first paycheck to the thirty-five-year-old who is more established in their career, curious about their debts and assets wondering if they are on track to retirement or other financial goals.
Users
For this application, there were two main personas, Billy-Jean and John-Carlo. Billy-Jean is a nineteen-year-old gen-zer, she wants to learn about student loans, how to keep a realistic budget while being a social butterfly and she is a low-income earner. Her main occupation is being a student, but she needs help budgeting her modest income for maximization. The other persona was John-Carlo, he is the millennial who has an established career, a high-income earner, and wants to save up for a downpayment on a home or investment and his main concentration is wealth building.
UX Process and Workflow
The workflow involved working on a research plan to ensure I collected the right data. The initial research plan consisted of: the objective, “Identify potential users and find ways to present financial information in a way that is approachable, interesting, and engaging to users;” the research questions; methodologies (surveys, interview, and reviews) along with participant characteristics and recruiting methodologies. A rough schedule was included to keep progress accountable to a timeline.
A screener survey was also developed to ensure those who moved forward to future interviews were part of the target user group. Those who passed were incentivized to complete an interview that would provide better insight into what Save needed to become successful as a budgeting and financial app.
Save Research Plan
Save Screener Survey
UX Research Artifacts
What we learned from surveys, interviews, and testing
The screener survey was hosted by Typeform and shared via social media through a link and by word-of-mouth.
Qualifying respondents to the survey were contacted and 5 individuals were interviewed in-depth about their personal finance habits, we also asked questions regarding potential digital solutions that would become the Save mobile app.
Interview Script
These questions were asked to all participants to unearth their personal finance habits and knowledge for example, “Were you taught budgeting skills?”
Responses from the interviewees
Written Response from a participant
Written response from a participant
Written response and simple drawings from a participant
Reviewing the data
Once completed these interviews were reviewed, keywords and ideas were placed on an affinity map to group similar ideas and recognize their importance and the role they will play within the app. An empathy map was also created to help illustrate the feelings and relationships consumers may feel with the topic of money. This empathy map also later inspired the personas previously discussed in Users.
Save Miro Post it notes
To the left: Digital post-it notes with key responses from interviews
The first image below: Key insights from the survey, color-coded by response type.
Save Miro Affinity Map
Empathy mapping
User type 1 Empathy Mapping
User type 2 Empathy Mapping
These empathy maps were created from key insights and the personas, they were used to articulate what we know so far about users. They served as:
(an) aid in decision making
helping the team align on understanding the user needs
a tool for empathizing with the user a tool for helping to define user goals
Click here to view the empathy maps up close in Google slides.
How might we?
Creating solutions
After synthesizing information from the empathy and affinity maps we created a series of How Might We questions to lead our solution creation process, these were questions such as:
How might we create an easy-to-use system that shows users their expenses?
How might we make personal finance interesting to learn for 16 to 24-year-olds?
Then we began to work on solution ideations to find methods of visualizing the finance data users will need most to adapt or break spending habits.
Red Routes, Wireframes & Wireflows
After conducting all of the previous research the app map development could begin, in order to visualize the way the application would look and function on a broad-scale. The red routes were also identified at this stage. This information produced the first wireframes and wire flows.
Save App Map
Save Log in Red Route 1
Save Add Account Red Route 2
Save Offers Red Route 3
UI Design Process
All of the previous work allowed us to begin synthesizing information to drive our design decisions for all of the low-fidelity, high-fidelity, and final designs of the product.
Initial Low Fidelity Design for Save
After creating the low-fidelity designs of the product the first round of usability testing was conducted. I went back and re-worked my designs to give the application more personality and also applied the brand’s platform and style guide. I also considered different imagery and applied concepts to create better visual hierarchy. The outcome was the initial high-fidelity design.
The process of Design
Left to Right: Low fidelity home screen, high fidelity home screen, low fidelity success add account page, high fidelity success add account page
The Initial High Fidelity Design for Save’s Red Routes
After receiving feedback in the second round of user testing it was concluded that the design lacked contrast, therefore the brand colors were re-visited. Additionally, greater use of the six principles of Gestalt principles was applied, in particularly proximity. The result was the final design.
The Design Process and Different Iterations of the Home screen
Design Decisions Q&A
Why did I decide to use these styles in my high fidelity designs?
These styles were mainly chosen for brand consistency. They reflect the feeling and aesthetic of what Save aspires to be, a safe and friendly app that is non-intimidating and for people of all financial literacy backgrounds. The app intends to be a helpful app for users to have the tools they need for their goal of financial independence.
What was the rationale behind my application of spacing, drop shadows (if used), line width, background colors, icons, etc?
The spacing was carefully thought of as it was intended to be accessible and inclusive, meaning the spacing was chosen with users with poor eyesight and visibility in mind. The drop shadows were inspired by general apps, they were meant to give the boxes dimension and create a visual hierarchy. The background color was a darker hue than the main color to reduce cognitive load and enforce the idea that the main color is the “clickable” or button blue. Line width was thin to reflect a minimalistic aesthetic and maximize white space. Icons were chosen to reduce cognitive load and enforce Save’s friendly brand personality.
How does my UI design support ease of use and a good user experience?
My UI design supports ease of use and good user experience mainly because it strongly reduces cognitive load. It is also not too experimental in terms of UI design, and it is minimalist.
How does my UI design convey my brand personality and attributes?
My UI design conveys my brand’s personality mainly through the use of color and images. The color scheme is mainly monochromatic with the exception of green and red for alerts, the color blue was chosen as it reflects the brand attributes of being safe and friendly. The images are meant to be inclusive and slightly whimsical.
How do I expect each design decision to impact the user’s thought process and decision-making?
Each design decision is meant to make “Save” easy-to-use and understand, the end result is to influence the user into thinking that “Save” is a helpful and useful app to facilitate one’s financial independence journey.
Save’s Final Design
Final Designs - Save
Outcomes & Lessons Learned
At the inception of the project, I strove to develop the UI and UX of a budgeting and personal finance application for smartphones, through the course of this project I learned much more than I could have anticipated. For example, I learned that expecting and being accepting of feedback and critiques is extremely beneficial to the overall quality of the product. Additionally, I learned that as a UX designer we must allow our design process to be led by empathy and be aware of any biases we inherently carry as humans, as they can be harmful to our end design.
