Fuyo | End-to-End App
Fuyo is a gamified money saving challenge experience that motivates users to stay on track of their saving goals.
My Role
UX Researcher, UX & UI Designer
Platform
End-to-end app
Tools
Figma, Maze, Illustrator
Project Goals
Provide an interactive saving experience with a game-like interface.
Encourage regular saving habits through the app.
Provide users with clear and visual insights into their savings progress.
Attract young adults between 18 and 26 to save early and stay motivated.
Background Discovery
To begin my research, I talked to a few young adults without regular saving habits. They all shared similar experiences feeling no motivation to save with limited income. I felt inspired to create a service to help people feel motivated to save money, even during challenging economic times. Many traditional saving methods fail to motivate users, resulting in a lack of engagement. I aimed to develop a service that revolutionizes how people save and makes it a fun and emotionally rewarding experience, so even with limited income, they can save smaller amounts to achieve bigger/long-term financial goals if motivated.
Research
What Motivates the Users to Save More?
My goals for conducting research were to identify the factors contributing to the lack of motivation in traditional saving methods and to understand the current saving behaviors and needs of young people.
Research Objectives
Understand the target audiences’ current saving habits and the tools they use.
Discover what is lacking in the current market.
Discover what drives them to save more.
Understand the expectations they have around saving.
Competitors
To understand the current market, I reviewed several competitors that offered non-traditional saving methods and compared their strengths, weaknesses, opportunities, and threats. I picked three apps that are representatives of 1) gamified aspect 2) challenge saving habit 3) micro investing.
Key Opportunity:
Existing apps only offer specific saving methods, which can become boring. How might we design an app that keeps things fresh and exciting?
Exploring the User Insights
After completing the competitor analysis, I started on user interviews. I conducted four interviews, each lasting 30-45 minutes. The target audience I interviewed is between 18 and 26 they are new to saving and have very limited money to save. I tried to dig into their saving behavior, what they want from a financial app, and their frustrations around saving and investing. During these conversations, a few things stood out when it came to user needs in saving money.
Goals
Setting goals is a key motivator for saving.
Reaching a goal feels rewarding and increases motivation to save more.
Visuals
Financial jargon and plain numbers feel intimidating or boring and it would be nice to have some visual achievement.
Visualizing the goal keeps them more motivated and excited about their progress.
Social Aspect
Having the same goal with someone helps them to save more.
Fun Elements
Adding fun elements such as challenges, achievements, and rewards can make saving less boring and more enjoyable.
Define
The Persona
After synthesizing all of my research, I created a persona to best represent the app’s target user.
Sydney - I want to stay motivated to save money, but I haven’t found enough drive to keep me excited about saving and staying on track.
Feature Goals
A system designed to instill emotional optimism and a sense of reward in users for the purpose of encouraging saving.
Different challenges for the users to participate together.
Feel motivated by other users and keep each other on track to save.
What Features are Most Important?
I collaborated with other designers to brainstorm possible app features that Sydney will need the most, then I used a feature prioritization matrix to consolidate our ideas and determine the must-have elements.
Design
Building the Framework of Design
Based on the research conducted and my persona Sydney, I created the user flow. The flow was designed to facilitate registering for the challenge and making a deposit, which are the key features from both the business’s and the user’s perspectives.
Wireframes for Key Screens
I then moved on to wireframing, keeping Sydney’s wants, needs, motivations, and frustrations in mind.
What would Sydney need the most?
Participating in system generated saving challenges to save with other users.
According to my user interviews, users find banking apps dull and unexciting. So, I wanted to spice things up by adding fun elements that would catch a user’s eye and make the experience exciting and engaging.
Usability Testing
I conducted usability testing with two potential users at this early stage to mainly focus on two objectives.
Uncover potential usability issues.
Identify the pain points of navigating through the flow.
Feedback
Three improvements were needed after getting user feedback from the usability testing.
The progress tracker provides valuable insights but presents an overwhelming amount of detail in a small space.
The pause button should be more hidden, making it harder for the user to quit.
The triangle buttons are fun but not accessible to all users.
Branding
Fuyo - the Chinese pronunciation of prosperity. I used it as the app’s name and then the Fuyo mascot was born! It is taken from the image of a dumpling. In Chinese culture, dumplings symbolize wealth and prosperity. Fuyo wants to give the users a fun and exciting experience, so the mascot represents a friendly face for user interaction with the brand.
Prototype & Testing
Hi Fidelity Wireframes
I added elements from the style guide into the wireframes. After many iterations, I landed with the following. I wanted my users' headspace to focus on fulfilling their ultimate goal: making their deposit. But I still want them to feel that the journey is fun and attractive.
Scenario 1 - Sydney is excited to explore new and popular challenges and enroll in one of them.
Scenario 2 - Sydney missed a couple of deposits, but she's back now and trying to catch up on the days she missed.
Usability Testing
Once the prototypes were done, I created a testing plan and tested with twelve users, three in person and nine on Maze. This test includes two tasks for the users to complete.
Testing Objectives
Verify whether the most important CTA button draws enough attention.
Check that users find the navigation intuitive.
Identify any pain points while navigating through the flow.
Iterations
I received a lot of feedback from the testing. I organized all the input and identified the most necessary changes.
Challenge Screen
Feedback
The dumpling gave a helpful tip telling users where the CTA button is, but the users’ first instinct was not to tap the giant button in the center.
There are too many “fun” elements on this screen, making it difficult to find important information.
The closed envelope looks like a button to most users and they had to do a double take on what is the actual CTA button.
Iteration
I toned down the “fun” elements and revised the button with a more conventional approach which reinforced the users’ existing behavior.
I simplified the start auto-save toggle so I could save space for the critical content and achieve a more balanced layout.
I added pagination so the users can toggle between the different saving days.
Deposit Screen
Feedback
Several users requested the ability to choose their own savings amount, even if they missed a few days.
Iteration
I added a select button so the users can either do bulk action or individual deposits, that way the users feel they have more control over their money.
Explore New Challenges Screen
Feedback
The users didn’t realize they could take the challenges with others, because the text was small and didn’t draw their attention.
Iteration
Added users’ profile pictures, replicating the familiar treatment from social media.
Home Screen
Feedback
The challenge promotion graphic takes up a lot of space for the important above-the-fold real estate.
The current and complete toggle was not clear enough and easy to miss.
Iteration
I decided to do two different treatments for the promotion -
1) When the users are still new to the app, they don’t have a lot going on in the app, so the graphic stays the same.
2) It becomes a floating button whenever there are new challenges in promoting for the old users.
Final Design
Scenario 1 - Sydney is excited to explore new and popular challenges and enroll in one of them.
Scenario 2 - Sydney missed a couple of deposits, but she's back now and trying to catch up on the days she missed.
Final Thoughts
It was a really enjoyable project and during the process, I had too much fun and made the interface a little too wild. I am very happy with my final approach and how the concept is still fun to younger users but with a familiar flow!
Next Step:
I would like to add another feature where the users can play financial trivia questions.
Another important feature would be having some suggestions for the users on how they could spend their money.
Fully develope the social feature to facilitate engagement to increase retention rate.