Flip & floss - portfolio builder
Empowering Teens to Learn and Invest with Confidence
Teens today are becoming more aware of money management and investing, yet most financial platforms cater to adults. The interfaces are filled with jargon, complex data visuals, and overwhelming options that make it difficult for young users to take their first step. Without simplified guidance or relatable content, teens often lose interest or make uninformed choices that limit their learning experience.
Designing a Seamless Journey for Teen Investment Growth
Flip & Floss recognized the need for a platform that bridges this gap by combining learning with doing. The goal was to design a Portfolio Builder that makes investing approachable, fun, and educational. By simplifying financial concepts and offering a guided experience, Flip & Floss aims to help teens build confidence as they create and manage their first investment portfolios.
MY ROLE
Collaborated on an industry project with a team of four and the client to design a teen-focused investment portfolio platform. Served as the sole user researcher, gathering requirements and conducting usability testing, and was actively involved in designing two key screens, creating high-fidelity mockups and interactive prototype.
tools used
Figma, OptimalSort, Miro, Zoom
research
Recruited participants across different grade levels, conducted remote moderated user research sessions including a card sorting activity, explored their challenges, motivations, expectations, and synthesized insights with an affinity map to inform ideation and define the Minimum Viable Product (MVP).
"I wanted a tabbed layout, like Spotify, so I could easily switch between sections."
getting to know the users
Before designing the portfolio builder, I wanted to understand how kids actually think about money and investing. Do they even find it interesting? What motivates them to invest?
To answer these questions, I talked to three groups of students,
• Upper Elementary (10 - 11 years)
• Middle School (12 - 14 years)
• High School (15 - 17 years)
methodology
To understand how kids engage with money, I spoke with 5-7 students aged 10-17 who were curious about saving and investing. Each conversation was a window into how they think, what excites them, and what holds them back. Through these semi-structured virtual sessions, I explored their motivations, challenges, and expectations, uncovering what makes financial learning fun, clear, and rewarding for them.
Focus Areas
Learning methods
Motivation to track progress
Challenges with current tools
Rewards & gamification
Parent involvement
Certain interactive activities were conducted to uncover the motivations, interests, and engagement drivers of kids while learning about investments.
Card Sorting
Conducted first to familiarize participants with portfolio elements.
Revealed which terms or visuals were easiest for them to understand.
Provided a foundation for later activities like gamified scenarios and portfolio building.
Informed the information architecture and labeling of the portfolio section.
voices of our young investors
From Insights to Opportunities
After evaluating feasibility, scope, and relevance to the target user group (older teens), the following three HMWs were selected for the MVP phase:
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 create professional, customizable portfolios that let teens reflect responsibility and credibility?
Using affinity mapping, personas, and How Might We (HMW) statements, I distilled user insights into key pain points and opportunities. This guided the design of the MVP, focusing on features most relevant to users.
Affinity Map
Affinity mapping helped identify key themes from user research, including progress tracking, personal interests, money management, gamification, learning and guidance, social features, and personalization. Categorizing these insights highlighted what was most relevant for users and guided the design decisions for the Portfolio Builder.
research synthesis
Participant insights on sticky notes, organized to identify recurring themes and patterns
personas
Based on the user interview insights, I identified recurring themes and behavioral patterns that informed the creation of my user personas. These patterns highlighted teens’ motivations, challenges, and preferences when managing money, allowing me to design personas that accurately represent the target audience and guide design decisions for the Flip & Floss Portfolio Builder.
These three personas capture diverse expectations and guide the design of the portfolio builder
Designing for the Right Audience
After conducting user research and defining personas, I discovered that different user groups had distinct needs and challenges. I presented these findings to the client and successfully advocated for narrowing the target audience. This allowed me and my team to focus on delivering a more tailored, high-quality experience for that specific user group without compromising on overall product value.
design
The design phase brought the teen-focused Portfolio Builder to life. Insights from research shaped high-fidelity screens for the Transactions and Bonds pages, with a tab-based layout, clear visuals, and intuitive flows that make managing investments engaging, understandable, and empowering for teens.
Hi-Fi Design of the transactions page
high fidelity
During the ideation phase, I explored a tab-based layout with an intuitive interface and simple language, ensuring the app felt welcoming rather than overwhelming for teens. I reviewed other learning and financial platforms to inform design decisions and generated ideas for clear workflows and features.
These concepts were then translated into high-fidelity designs, including the dashboard, Transactions, and Bonds pages, focusing on usability, visual clarity, and a professional yet approachable tone for the Flip & Floss Portfolio Builder.
Prototyping in Action
Prototyping played a key role in validating design decisions and aligning the team on user flows. When the Bonds section was initially planned to be dropped, I volunteered to design the Bonds and Transactions screens, ensuring a complete, realistic experience for teens starting with safer, low-risk investments before moving to stocks.
Prototyping became one of the most defining moments in this project. Initially, the team planned to drop the Bonds section to reduce scope but I realized that would remove a key learning step for teens. Since bonds are a safer, low-risk investment option, they serve as the perfect starting point before exploring stocks. I volunteered to take ownership of the Bonds and Transactions screens to ensure the experience felt complete, helping teens build confidence gradually while understanding the foundations of investing.
Key prototype interactions included:
Tab switching between My Bonds / Add Bonds and Buy / Simulate views
Confirmation toasts for buy and simulate actions
Filter options to view transactions by asset type (Stocks or Bonds)
Horizontal scroll for recent transactions to make navigation smoother and more visual
These lightweight yet purposeful interactions ensured the Portfolio Builder felt approachable, functional, and easy to use, even in early testing.
Prototype
View Prototype
test
I tested the Portfolio Builder with real users to understand how teens navigate and manage their investments. Their feedback revealed what worked, what needed improvement, and guided me to create a clear, motivating, and user friendly experience.
Usability testing the Portfolio Builder with five teen participants was a fun and insightful process. Everyone was eager to try out the designs, and their feedback helped refine the experience to be more intuitive, engaging, and aligned with how teens actually think about investing.
What Users Had to Say
Voices from Usability Testing
Before
After
Increase text size and clear caption for the bonds graph
After
Key Findings
Some users were unsure about the Simulate feature and its purpose.
Teens appreciated the clarity of layout and visual feedback when building portfolios.
Navigation between sections was mostly smooth but needed clearer cues for transactions and bonds.
Overall, participants found the experience fun, easy to follow, and motivating.
No caption for what simulate means
Before
Caption for Simulate tab is added
After
takeaways
Research-Driven Decisions: Insights from interviews and usability tests shaped the MVP and prioritized teen users.
Affinity Mapping: Highlighted key pain points like navigation confusion, unclear charts, and guidance needs.
Ideation & Hi-Fi Design: Tab-based layouts and intuitive interfaces translated into high-fidelity dashboard, Transactions, and Bonds pages.
Collaboration: Team alignment and proactive communication enabled efficient iteration and a cohesive product.
Client Scope Management: Research evidence guided what could be implemented, ensuring focus and quality.
Next Steps
Expand Features: Integrate deferred items like gamification, social sharing, and advanced personalization in future phases.
Iterative Testing: Conduct additional usability testing with teens to validate new features and refinements.
Continuous Learning: Monitor engagement and feedback to optimize dashboards, portfolios, and tutorials.
What began as a challenge to make investing less intimidating for teens evolved into a tool that empowers them to take charge of their financial journey. The Portfolio Builder turns abstract financial concepts into simple, engaging experiences, helping teens track, learn, and grow with confidence.
By blending clarity, usability, and motivation, this project lays the foundation for a generation that sees money management not as a chore, but as a skill they can master.