Overview: Flip and Floss is a money management app that teaches kids how to save and invest, building their financial education.
For this industry design project, we assigned to work on the Portfolio Builder project for Flip and Floss that will teach kids how to invest their money.
Role: Team Lead, Project Manager, UI/UX Designer
Tools: Figma, Draw.io
Research
Competitor Research
The objective of the research is to find similarities between Flip and Floss and other competitors and how we can either stand out from them or do better.
Click on image for full view
User Research
Interviews were done in-person by teammates. The demographics of participants ranged from elementary to high school students. The idea is to find out how students from 5th-12th might prioritize certain elements in Flip and Floss.
Click on image for full view
How Might We…?
How might we provide practical money management tools that make saving, spending, and investing intuitive and motivating?
How might we maintain a clean, organized, and intuitive UI that meets the expectations of older teens?
How might we deliver self-directed financial education suitable for high school students without relying on parental oversight?
Persona #1
Click on image for full view
Persona #2
Click on image for full view
Persona #3
Click on image for full view
Ideation and Design
Red Routes User Flow
Originally, the Portfolio Builder project was supposed to have an option for an Entrepreneur path. However, due to the complexity of the path and the time constraint, I decided it was best to solely focus on the Investor path instead.
Not only was the path a more popular choice, but it was easier for users to maintain as well.
Click on image for full view
MVP and User Stories
As a young user, who is unfamiliar with financial education and interested in saving for my future, I want to:
Create a portfolio that I can still utilize as an adult.
Present my portfolio professionally for business opportunities.
Manage my portfolio and organize key information.
Trade stocks, bonds, and any other investments.
Understand the risk/reward of investments and how to make informed decisions with them.
View my investments and see the growths/losses and access my situation from there.
Wireframes
At the time, we were still creating wireframes for both Investor and Entrepreneur paths. Since we cut the Entrepreneur path, we had scrapped more than half of our wireframes. These were the core wireframes that we still had left that we decided to build on for our high fidelity.
Dashboard
Click on image for full view
Wallet
Click on image for full view
Trading
Click on image for full view
Transaction
Click on image for full view
High Fidelity Screens
Usability Testing
Feedback and Iterations
Issue 1: Users had issues viewing certain things on the pi chart provided for overall investments.
Solution: Increase size, bold font, and context for clarity.
Before
After
Click on images for full view
Issue 2: Users did not understand what the graph represent initially.
Solution: Add context underneath the graphs to provide more information for users.
Before
After
Click on images for full view
Outcome
Users overall liked how clean and professional the interface looked. The dashboard for the Portfolio Builder was easy to understand with just a quick glance and the wallet was simple enough to use once users understand what the information provided meant.
Users expressed their troubles about understanding terminologies and concepts of financial literacy. However, they felt that if given enough time, they would be able to easily use the tools provided on the Portfolio Builder.
Key Takeaways
User research was crucial since the user feedback varies between elementary, middle, and high school students.
Identifying the MVP is important, especially in a project with a short time limit. We had a lot of ideas and were given even more ideas, however, we had to take a lot of time to figure out what was actually needed and what was nice to have as a later update.
Understanding competition was another big thing. While we know there are some competitors that teaches financial literacy, we also had to factor in how a young user would spend their time.
We were not only competing with other learning apps, but the apps that young users were using on a daily basis. This made us ask a lot of important questions, such as how we could retain their attention and encourage them to use our app regularly.