Inspiration
In an era of rapid digital financial development and rampant financial fraud, people are generally facing a lack of financial knowledge. This is particularly true for younger generations, who face a gap between their thinking and behavior when it comes to understanding financial products, using digital tools, and financial planning. Therefore, improving financial literacy has become a crucial issue. TF5 was created to empower people to proactively think ahead and grow.
What it does
THE FIRST FIVE (TF5) is an online financial learning simulator that provides university students with a variety of financial situations they might encounter over the next five years. Through scenario-based thinking and relevant resources, it helps the general public improve their financial literacy. The platform utilizes a simple, interactive web interface with visual prompts and guidance for self-reflection. You can begin a deep reflection journey directly from the homepage, with various real-life scenarios and guidance to help you expand your financial reflection and self-practice. Finally, you'll receive additional online resources to help you continue your exploration and development of financial literacy.
How we built it
We built THE FIRST FIVE: The Post-Grad Financial Navigator using React with Vite for fast development and bundling. The user interface leverages React-Bootstrap components customized with SCSS for a consistent visual identity. Routing is handled with React Router, allowing us to structure the experience into a clear flow: reminder → scenarios → summary.
From the design side, we started with user-centered design principles, sketching out wireframes for each page flow (intro, scenarios, feedback, and summary). We established a cohesive visual style by defining a custom color palette, typography system, and responsive layout rules. Each scenario is paired with a unique illustration to provide visual storytelling cues, while the overall design emphasizes accessibility and clarity—avoiding information overload while keeping the interface engaging and trustworthy.
All scenario data (prompts, options, feedback) is structured in a central scenarios dataset, making it easy to extend or adjust. The design emphasizes accessibility, responsiveness, and mobile-first usability to ensure learners can interact seamlessly across devices.
Challenges we ran into
Custom theming with Bootstrap SCSS: Adjusting variables and migrating away from deprecated @import syntax required extra debugging.
Dynamic routing & state management: Making sure user choices persist across pages and reset correctly when restarting the game.
Image asset management: Handling background and illustration images in a way that worked smoothly with Vite’s build process.
Balancing UX and pedagogy: Designing interactions that are both educational and engaging, without overwhelming users with financial jargon.
Accomplishments that we're proud of
Created a fully interactive 4-scenario financial journey that provides instant feedback and a personalized recap at the end.
Implemented a clean, responsive design with dynamic layouts that adapt from desktop to mobile.
Established a scalable architecture where new scenarios, resources, or visual assets can be added easily without breaking the flow.
Integrated a friendly onboarding reminder, reinforcing the project’s educational purpose and building trust with users.
What we learned
How to customize Bootstrap at scale with SCSS variables and manage theme consistency across multiple components.
How to structure complex interactive flows in React Router while keeping code maintainable.
The importance of state management in educational simulations to track user progress and choices.
That building a serious-topic tool (like financial literacy) benefits from playful but clear UX design, making learning approachable.
What's next for THE FIRST FIVE: The Post-Grad Financial Navigator
Expanding beyond 4 scenarios to cover more real-life financial milestones (credit cards, taxes, insurance, investments).
Adding progress tracking and saving, so users can return to continue where they left off.
Introducing localized content (e.g., Taiwan/US/EU-specific rules and resources).
Integrating gamification features (badges, streaks, or branching storylines) to encourage replay and deeper learning.
Conducting user testing with recent graduates to refine the balance between realism and accessibility.
Log in or sign up for Devpost to join the conversation.