The Challenge
I was tasked with building the MVP (minimum viable product) of a mobile application with a purpose of our choosing. I wanted to solve for a problem that affects those close to me, but I was unsure which problem troubled my peers the most. I was at dinner with friends when it came time to pay the bill and a friend of mine asked if I could cover their portion because they "hadn't budgeted their paycheck this week well". This is when inspiration struck, I set out to create a financial management platform that aims to empower adolescents towards financial independence through proper budgeting and educational content.
Process
To ensure that I approached the problem from a holistic standpoint, I utilized a 5 step problem solving process that allowed me to move forward strategically. I repeat steps 3-5 to polish the product.
Empathize: During this step, I seek solely to put myself in the user's shoes and understand their current journey, thoughts, actions, motivations, and any points of contention.
Define: Here, my goal is to clarify exactly what problems I'm trying to solve and what goals / KPI's I'm trying to reach.
Ideate: Ideation is where we try to solve the problems defined in the previous step through the use of clever visual design, proper UX strategy, and data-informed decision making.
Prototype: Throughout this step, we bring to life the solutions that we thought up during the last step through thoughtful interaction design. It's important to remain as detailed as possible when prototyping to remove any ambiguity during development.
Test: Testing is crucial to any successful product because collecting real-data on the effectiveness of your decisions is paramount to continuously improving your strategy and refining the product. I repeat steps 3-5 as much as time allows.
Research & Discovery (Empathize)
Tools used:
User interviews
Secondary research
Market research
Once my goal was clear, I wanted to put myself in the target audience's shoes to begin to understand their current experiences managing their money. I recruited 5 user's between the ages of 16-29 to participate in observational interviews. Each user was asked about their spending habits and how they keep track of their personal finances.
My assumptions:
Young adults don't feel educated on financial responsibility.
Young adults prefer a mobile application rather than a website.
“When I want things and when I wanna buy things I kind of impulse buy without regard for how much I spend.”
"I would usually lose one of the checks and I was already being underpaid so for me to lose like 2 weeks of paid was like, not good.”
Secondary Research: Learning from others
Along with interviews, I scoured the internet in search for existing research surrounding the problem space. My objective was to discover any sentiments, existing statistics, potential pitfalls, or opportunities anyone had caught previous to my study.
48% of 18-34-year-olds say they felt somewhat or not at all prepared to manage their finances when entering adulthood.
Nearly 70% of high schoolers have the option of taking at least one semester of personal finance, but less than 17% are required to take one.
54% of teenagers feel unprepared to finance their futures…
…and 49% have never made a budget.
Findings & Solutions
To make sense of the information from both secondary research and my observational interviews, I conducted an interview synthesis workshop in which I drew insights from the information available. I then draw 1 conclusion per insight informed by both user interviews and secondary research. For each conclusion, I then built 1 "How might we" (HMW) problem statement to frame the problem in the context of the user. Finally, I brainstormed a solution to each problem. I'm unaware of a proper name for these so I call them my "primary solutions ". Very creative, I know.
Insight 1:
Young adults struggle to stop themselves from "impulse buying".
Conclusion 1: With Great Freedom Comes Great Responsibility
Young adults understand that they have to keep track of what they spend, grow their savings and earn passive income along the way. While they may make mental notes about their spending and open bank or investment accounts, they are prone to making regretful impulse purchases, which is exasperated by balancing work, school and their social life.
Solution 1:
Every month show the user the sum of all their expenses that didn’t go towards one of their listed financial goals or allocated budget pathways.
Insight 2:
Young adults struggle to hold themselves accountable to their financial goals.
Conclusion 3: Accountability Buddies Matter!
The target audience want to reach their goals and hold themselves accountable for their own financial help, but they often struggle with non requirement based motivation. Without any immediate consequence or a partner to remind them of their progress, 20 somethings have a hard time motivating themselves to reach their goals as they often forget how far they've come.
Solution 2:
Provide push notifications (if allowed) to remind and update them of progress towards goals they’re saving for as well as motivational messages regarding not giving up so that users feel that they're not walking their path alone.
Insight 3:
Young adults feel anxious about managing their money
Conclusion 3: Confidence and Understand Breed Responsibility
Young adults want to be independent and generate their own income to pay their bills and purchase the things they want. However, they are anxious about their newfound freedom and what this level of independence truly means. They seek ways to build their financial literacy that fit into their lifestyle so they can more accurately track spending, budget for the long-term and grow their savings so they can become more economically sound.
Solution 3:
Only require them to do the bare minimum and provide a tool that essentially does it for them. Automatically uses a default budget until specified otherwise by the user - automatically pays bills - automatically transfers money to accounts if gateway is set up.. etc.
Market Analysis: Getting the big picture
In conjunction with secondary research, I decided to perform a heuristic analysis against our largest direct competitors in order to assess what conventions our audience is used to interacting with as well as draw inspiration from their strengths. I consulted Nielsen Norman Group's 10 Usability Heuristics for User Interface Design and chose the heuristics that I felt were most closely aligned with interviewees ideals.
Match between system and real world
It's crucial to remain aware of real world conventions when building a product, especially in an industry such as finance, where the barrier to entry often feels like a language barrier.
User control and freedom
When introducing novice user's to your application, they'll make mistakes and it's important to always provide them an "emergency exit to leave the unwanted action".
Flexibility and efficency of use
Allowing users to customize their experience, regardless of familiarity with the application, speeds up user setup and ultimately creates a dynamic application that's capable of growing with the user.
Aesthetic and minimalist design
While there are many moving parts when building an informative, yet dynamic tool that's capable updating and creating budgeting goals and schedules, it's essential to focus the design only on the interfaces primary goals. Otherwise, we risk cognitive overload.
Synthesis (Define)
Tools used:
User persona
Empathy map
User stories
User flows
As a culmination of the research thus far, a primary persona emerged which I used to inform design decisions moving forward, Marcelo is an ambitious self-starter moonlighting at a screen-printing studio while studying for his degree by day. He aims to pursue his passion of starting his own clothing brand, but he's disorganized and has a lot of unnecessary expenditure. Marcelo would like to become more financially conscious but his hands are full between work and studies. He values quick and consumable experiences that don't take too much time and energy from his everyday routine.
Meet Marcelo.
Biography
Marcelo is a 3rd year student at Boston University who struggles to balance school life with his responsibilities as an equipment manager at a screen printing studio downtown. Marcelo aims to evolve his passion into a successful clothing brand, however; he has difficulty keeping track of his income and resisiting the urge to impulse shop, causing him to miss important payments, such as: his car.
Goals
Have a system in place to efficiently manage his finances
Launch clothing brand
To become financially literate
Travel the world
Motivations
Send money home to parents
Help send siblings to college
Wants to explore the world and become a polyglot
Wants to completely pay off car
Pain points
Impulse spending
Day-to-day budgeting
Increasing cost of living
Empathy Mapping: Tying it all together
Now that my audience had been established and their needs had been recognized, it was time to synthesize the findings into an empathy map. Along with the persona, these documents will act as a source of truth for my user's: thoughts and feelings, speech and actions, the sentiments they might hear and see, and their goals and pitfalls alike. Overarching themes for each were as follows:
Major preoccupations / worries & aspirations:
Feelings of anxiety about limited a limited supply of time and a growing demand for capital.
How our users speak and appear to others:
Contradiction of preaching a frugal lifestyle and practicing one outside of their means.
What our users see in their environments & communities:
Reminders of their goals and potential avenues to reach them.
What our users hear in their environments & communities:
Compassionate and distressed opinions of the next steps to take.
Our users' fears, frustrations, and obstacles:
Gaps in knowledge that are difficult to fill because of a lack of time.
Our users wants, needs, and measures of success:
An increase in time to spend with loved ones and capital to fund aspirations.
User Stories
During interviews, users were asked to identify use cases associated with their specific challenges, users identified these as their top priorities. The following is ordered by how many times they were collectively mentioned by participants:
I want to set up financial goals so I have a visual reminder of what I’m working towards.
I want to set up automatic bill pay so I never have to worry about my bills being paid on time.
I want to set a custom budget so I can determine exactly where my money goes.
I want proactive advice and recommendations on the best course of action that feels more personable rather than another tool I have to use.
I want to create and access my account from any device wherever I am.
I want to check my balances so I know how much money to allocate to different goals.
I want to be able to move my money from one place to another with ease.
I want to receive regular updates and notifications so I don’t have to remember to look up my financial information.
I want to customize my notifications so I can control what I get notified about and when.
I want to be able to contact support and receive help if anything goes wrong.
I then converted these sentiments into user stories and prioritized them based on how closely they aligned with our primary solutions from earlier. I did this because our primary solutions are validated by both quantitative and qualitative data. This yielded a rudimentary feature chart.
User Flows
With a user-validated feature set to build and a robust understanding of who I was building for, I developed user flows and use cases to guide exactly what screens I should be building and in what context the features will be used by the audience. Additionally, it was important that I kept in mind that my task was to build an MVP, not a full product. To avoid overdeveloping, I had to choose which features to build. MVP's minimize time and resources wasted by allowing teams to test and understand how the market will react to their product before launch. I decided to implement all 7 priority 1 (critical) user stories (features) to ensure my work stayed focused on realizing my primary solutions. To do this, I developed 3 red routes, core flows that I wanted the user to take in order to reach a successful outcome.
Flow 1: Add a goal
Flow 2: Add a bill
Flow 3: Add a payment gateway
Brand platform: Who is Mia?
For Mia's visual design, I decided to define a proper brand to ensure that all design decisons are made with brand objectives in mind. I began by defining a lightweight brand platform. I developed the brand's:
Misson
Personality
Attributes
Misson:
Finances are a journey and a long one at that. We provide not only the tools, but the knowledge necessary to reach your personal destination.
Rationale
I wanted Mia to feel personable but also helpful. To do this I figured that naming the product something that could easily be brought into conversation and referred to in the same way that you would refer to a human or a friend, for example, would help mold the product’s image into something more of an assistant rather than random software. Additionally, this serves the purpose of differentiating my product from others that serve a similar purpose.
Personality:
MIA is personable and aims to truly go beyond the confines of software, to provide a companion and ensure that no user has to walk this road alone.
Rationale
I felt that this personality aligns with the original view for my project. To provide tools, companionship, and guidance to all users courageous enough to start their financial wellness journey.
Attributes:
Trust-worthy
Secure
Effortless
Personable
Modern
Rationale
It important for user’s to feel that MIA is trustworthy and secure as does any financial interface. I want the brand to be personable and to not feel as if a user is interacting with a machine, but rather; that they have a friend that wants to help them along their journey by providing the tools to start and helping hold themselves accountable along the way. Of course, any effective interface has to feel effortless to use. Also, a modern, visually appealing UI would solidify Mia's appeal.
Inspiration
I then looked through dribbble and savee.it to find a few examples of modern interfaces that look simple to use and provide color inspiration. Additionally, I searched for imagery that would convey a sense of tranquility and security in one's environment in an otherwise stressful part of many's lives. I then created an extremely rudimentary mood board meant to serve as a lightweight and mutable source of inspiration for my own style guide.
Color and typography
Color:
Mia intentionally features a dark UI to reduce physical eye strain and appeal to a younger audience. Additionally, beige was chosen as the primary color because it meets WCAG 2.0 standards against a dark background and is similar enough to white to remain a neutral screen presence. Blue was chosen as a highlight to convey tranquility during use.
Sources:
Virtanen, Julius. "Dark Mode Preferences: Exploring User Motivations in Interface Theme Selection." Computer Science(2023).
Rider, Rose M. "Color psychology and graphic design applications." (2010).
Background
#1D1D1D
Primary
#EBEBD3
Secondary
#96D9FF
Highlight
#3753BE
Denotive Red
#ED6957
Denotive Green
#4CC560
Low contrast
#474044
Mid Contrast
#C4C4C4
High Contrast
#F8FAF7
Typography:
I used the Red Hat Display font for it's legibility at large and small font sizes.
Logo usage
I then mocked up a highly simplistic, minimalistic logo to represent the brand and it's attributes.
UI Kit
With design direction and styling established, I created a UI kit for Mia. Documenting visual design and interaction patterns, we ensure consistency and cohesiveness throughout the product.
Sketching (Ideate)
Tools used:
Sketch pad
Before creating any digital products, I decided to put pen to paper. I sketched each screen that I'd be building to establish an outline and to allow myself time to think through which direction might best meet the goals and aspirations of Marcelo, as well as Mia's priorities and business goals.
Prototyping
Tools used:
POP by Marvel
I then converted these into a low-fidelity prototype using POP by Marvel. I then used this prototype to test participants with the sole purpose of understanding the flow of my app was intuitive enough for our target audience. By performing these tests in as low fidelity as possible, it removes any clutter or distraction for our test participants, ensuring that their focus is entirely on the progression of information. I performed guerilla usability tests in my campus cafeteria among 5 participants, aged 18-20 years old. I assumed there'd be little to no resistance moving through prototype.
Testing
Tools used:
POP by Marvel
Guerilla usability testing
Participants were asked to complete 3 tasks:
Add a goal
Add a bill
Add a payment method
They were then asked to rate the difficulty of each task out of 10. Scores were then summed and averaged. Additionally, they were asked how the prototype could be improved. Their criticism mostly lied in the lack of a "back" button to return to the previous screen.
Mid-Fid (Ideate)
Tools used:
Figma
Wireframes
With newly validated flows, I developed mid-fidelity wireframes which utilized the same flow, but served as an outline for how elements and colors will sit visually in the app. Additionally, I implemented "back" buttons to address comments from test participants. Identical to last round, they were asked to rate the ease of each task and I performed 5 usability tests with participants aged 16-29.
Participants were asked to complete 3 tasks:
Add a goal
Add a bill
Add a payment method
Round 2 (Prototype & test)
Tools used:
Figma
Usability Testing
Findings
Inactive carousel
Summary:
Users frequently tried to interact with the carousel with no success
Users thought that the carousel should cycle automatically and it prevented them from starting the task for a small amount of time.
Recommendations:
Build a functional carousel that users can interact with
Allow the carousel to automatically cycle through after intervals of time
Repetition
Summary:
1 participant mentioned that all 3 tasks are repetetive when performed consecutively
Recommendations:
Consider adding predictive dropdown or text input that uses previous inputs to predictively auto-fill the user's focused form field.
Form field context
Summary:
Some participants had slight difficulty navigating form fields as they were unsure what each field meant
Recommendations:
Consider adding a tooltip that provides context towards the purpose of the field when tapped
High-Fidelity (Ideate)
Tools used:
Figma
Wireframes
Usability testing
Now that a skeleton had been built, feedback collected, and I was nearing the deadline for my MVP, I utilized the style guide that I created previously to inform my design decisions and ensure that I stayed on brand with every use of color, spacing, typography, and placement.
Main changes between fidelity:
Elements such as the progress indicator on the splash screen were stylized to better adhere to brand personality and improve visual clarity.
Data visualization charts were added to the dashboard to make information more consumable.
In-app form fields received a tooltip prompt.
The final result
Finally, an MVP was developed and the culmination of my research, design, and testing took form. I introduce Mia to a wider audience.
Future roadmap
Implement Quantitative Research
Collecting quantitative data is crucial for optimizing the design further. I can achieve this by conducting user testing sessions with a larger sample size and using analytics tools to track user behavior and interactions within the app. This data can be used to identify pain points and areas of improvement that were not apparent during the design process.
Address User Feedback
Feedback from users can be used to address any concerns or issues they may have with the app. Conducting surveys or feedback sessions can provide valuable insights on user preferences and expectations. In a perfect world, I'd like to gather more user feedback as I was limited by the time constraints of this project.
Incorporate New Features
As technology advances, it is important to stay up to date with the latest trends and innovations. Adding new features can keep the app relevant and engaging for users. However, it is important to carefully consider which features to include and how they will impact the overall user experience.
Evaluate App Performance
Regularly evaluating app performance can help identify any technical issues that may arise. This can be done by monitoring app crashes, response times, and other performance metrics. Addressing these issues promptly can help maintain user satisfaction and prevent any negative impact on the app's reputation.
Continuously Iterate
Finally, it is important to remember that the design process is never truly finished. Continuously iterating and refining the app can help keep it relevant and competitive in the market. This can be done by using feedback, conducting research, and staying up to date with the latest design trends and technologies.
Final thoughts
Working on Mia taught me the importance of preparation and iteration in the design process. Through thorough planning and multiple revisions, I was able to create a minimalistic and functional app that effectively uses signifiers and allows for future improvements in the user experience