OVERVIEW
With the idea of helping people of this age gain financial literacy, solve personal financial problems and therefore achieve financial wellness, my team and I start from the very basics of understanding why it is hard for people to solve financial issues, then we come up with solutions to create an issue-based app Kapow to educate people solve financial issues step by step and use MAP theory to form good financial behaviour.
MY ROLE
-
Performed research on American's financial situation via user interviews, literature reviews, and competitive analysis.
-
Created sketches, wireframes, lead visual design and made interactive prototype to present the outcome.
-
Conducted 4 rounds of in person and remote usability testing to refine product design.
TOOLS / DURATION / TEAM
-
Pen + Paper, Adobe XD, Miro, AI
-
Sep. 2019 - Dec. 2019， 3 months
-
Ningyue Shang, Jing Zhu
Desgin Process
00
OUTCOME PREVIEW
01
Pick suitable plans to solve your financial issues
02
Step-by-step plan with essential financial literacy and tasks.
03
Carry on with your plan by tracking your budget and bills.
04
Know your weakness and learn courses to prepare for future challenges
01
What's the problem
Last year my friend Janne wanted to take a student loan to pay for college, but she complained to me that she:
Don’t know literacy about student loan
Can’t decide which loan provider to choose
Worried about paying it off
Later on, another friend Mike complained his multiple financial issues, he:
Worried about so many issues
Not ready for future risks
Is personal finance a universal problem?
only 24%
Millennials demonstrate basic
financial knowledge
50% of student loan holders worries about pay off debt
54% of Americans don’t have emergency fund
33% of Americans pay the minimum due on credit card
Faced with a new financial issue, most people are confused, anxious and lack perseverence to solve it.
Design prompt
02
Research
Behind the final outcome of our product, we made much effort refining our prompt and translate key findings of user research into our design principles/challenges. First, It was too broad a topic for us to 'help people solve financial issues', so we did some research first to narrow down the scope.
Literature Review
We reviewed essays and reports to investigate, trying to find out what factors influence people's personal financial situation, and got deeper understanding of ‘how’ we can help them solve their financial issues.
Market Research
Before we getting in touch with users, we conducted competitive analysis to see how existing products help people solve financial issues. We sort the most famous tools for financial issues with two dimensions based on their audience and financial philosophy. Then we find most existing tools only focus on one of the concerns of literacy, decision making or management. So we decided to design our product to bridge the gap between education and management.
User Group
Before we can serve everyone, we have to serve someone.
We narrowed our initial user group to be college students or new grads.
These two groups of users are at the turning point of school and society, and might feel more confused about financial issues they have never come into.
Refined prompt
Semi-structured Interview
So to quickly gather qualitative and quantitative data about their general characteristics and pain points, we conducted semi-structured interview on 9 participants from different age groups, learning how they solve a financial issue, and during the process what might stop them from succeed. After that we coded their responses and made the affinity diagram. Check out our complete interview guide and findings .
Interview Focus
1. Personal background
2. Motivation to learn finance
3. Resource of financial literacy
4. Financial issues they had
5. Ways of solving the issues
45 - 60 min
Participants
College student
Employed
User Journey
With the evidence we got from user interview, I developed a user journey map. I devided my target users as two groups based on their situation: people with current issues and people without current issue. Then I concluded pain points from their user journeys and emotion flows.
Take aways
Shown below is a summary of the important insights from former research and analysis. Remaining them in my mind all the way down, I put every effort to solve the design challenges and associate my design decisions to these implications.
03
IDEATION
Brainstorming
We conducted brainstorming and generate 30+ possible ideas. Based on these, we discussed together and synthesized our ideas in a chart with 2 dimensions: Easy to understand and Efficient.
Evaluation & Consolidation
We created paper sketches first and invited three participants to evaluate these design directions with us. We created 3 evaluation dimensions and discuss about the pros and cons of each option.
Evaluation dimensions:
-
User Pain Points
-
Design Principles
-
Business Positioning
Wrap-up
We intended to create a 'plan' for each financial issue of our user, and use step-by-step tutorial to guide users make suitable financial decisions and financial plans. Plus we provide courses and forum for reference and use budget & bills to help users carry on with their plans until they solve their issue.
Design direction: Issue-oriented plans
Core method: Step-by-step tutorial
Complement: Courses and forum for reference, Bills & budget for tracking
04
DESIGN
In this step, I used Fogg Behaviour model and research insights to solve the three design challenges mentioned above.
Challenge #1
How to provide reliable and easy-to-understand literacy?
To let users know exactly what they should learn, I designed a learning library, using knowledge map to inform users their weakness and recommend courses. To make the literacy more friendly, I decided the form of courses to be vivid short video tutorial, with notes to help users understand. Considering people like asking acquaintances, I created a chatbot, which is like a friend good at finance and can guide users to reliable literacy.
Challenge #2
How to help people make financial decisions/plans more easily?
In other words we need to simplify the tasks and bridge the gap between literacy and solution. Fogg’s behaviour model outlines six ways a task can be made simpler - time, money, physical effort, thought, social reference, non-routine. I applied 'save time & thought'.
Save thoughts
Save time
Challenge #3
How to help people carry on with their plans?
In order to better translate users pain points into our design opportunities, I'll introduce a psychological model named “Fogg Behaviour Model”. The equation "B=MAP" is quite common in behaviour design and I think is useful in improving people's financial behaviour and performance in managing financial staff.
With reliable literacy provided in challenge #1 and feasible solution provided in challenge #2, people will have the Ability to realize their plans. If a user is fully able to do something but he actually rarely do it. How might we help? Fogg tells us that he must lack some trigger.
Function Map
Solving the three design challenges, we then went on supplementing the whole system and figured out our key features and user flow.
User Flow
05
ITERATE
I ran a feedback session to inquire about my target users’ opinions on this concept and the general design. With these ideas, I revised my initial sketch.
Navigation & IA
I explained main interfaces to 3 different users. They thought each part is effective enough, but the whole architecture is a little strange. It looks like each part is separate but actually it’s not.
Wireframe
Based on the feedbacks, I made some amendments and finished the user flow. The flows guided me to finish the wireframes of interfaces with multiple functions.
Test & Iterate
We conducted task-based user tests with 5 participants to identify usability problems and collect feedbacks on design concepts and interfaces. Our goal was to understand if our designs followed user’s mental models and to find out if they perceived our solutions and mechanism.
Tasks for test takers:
A1. You want to gain some knowledge to prevent future risk.tell me when you think you find the knowledge you need.
A2. You might have a stu loan in the future and you want to learn something about it. tell me when you think you find the knowledge you need.
B1. Explore the app to find a way to pay for your college.
B2. You choose to take a student loan. Find how to pay off a stu loan and how you can keep it going on until you totally solve it.
B3. Change your budget for food to be $300.
According to the test results, we had three important findings, therefore we conduct iteration to solve these problems.
Users appeared to be impatient
when taking lectures before doing phase tasks.
Users cannot understand why adding a plan and how plans work.
Users were still confused about the relashionship between plan, course and bills
Iteration #1
How to make the step-by-step tutorial more engaging ?
People always feel impatient when they are told to finish a long list of tutorial. In order to make our plan (course) more efficient and intuitive, we decided to focus on each phase and emphasize more on tasks. Tutorials are shown as an optional reference if the user really need to learn some literacy to finish the task.
Iteration #2
How to clarify how the plans works ?
I added two onboarding screens trying to explain why users need to create a plan and how the plan works.
Iteration #3
How to enhance association between plan, bill and budget ?
It is hard to explain our mechanism because it seems like each part of our product have separate function but actually they are closely related. We tried to improve visual association among related elements to explain their relationship.
High-fi Prototype
06
REFLECTION
Testing and iteration brings powerful results.
Applying agile design process, we really focused a lot in testing and iteration in this project. In total we did more than five rounds of testings, and I present the main iterations powered by concept consolidation test, sketching test, wireframe test and summative test. We are so happy with the final version of Kapow as iterations makes it a mature product from the rough sketch at the very beginning. So, don't feel bothered to iterate again and again.
Work as a team and learn from each other.
I have a great team for this project. My team is made up of three people from different field and with different culture background. One of us (who is a researcher) led the research part and helped us get quite powerful insights, which laid a solid groundwork for our ideation and design. Then we did ideation together and this is the most amazing part. Then I led the design and iteration, and created the high-fi prototype with another team member. We learned research skills and design thinking from each other. I feel really satisfied with the whole process and result.
Think more than a UX Designer
In this project I learned the difference between UX design and product design. When designing a product, it is important to keep a large picture in mind and consider every aspect of the product. One tricky thing we met is that when we show our product to target users, some of them asked us how we can ensure the content is helpful and 'just-in-time', what is the sources of the content, and how we make sure users will stick to our app after they get needed literacy. It is hard to answer those questions because we always avoid considering problems that are related to content strategies and user growth. However, it is essential for a product designer to learn these skills and 'Think more than a designer'.