Flip Academy

Transforming financial education into play for increased engagement

Team & roles

Jesh Anies (me) - UX & UI Designer / Team Lead
Deepthi Vasudevan - UX & UI Designer
Kulsum Zaidi - UX & UI Designer
Laura Trouiller - Mentor

Project Duration

August 2025

Responsibilities

Mentorship, Project management, Client Communication, Research synthesis, Wireframing, Prototyping

Gamified financial education for students

Founded by Andre Smith, Flip & Floss helps 3rd–12th grade students build money management skills around credit, saving, and investing. Their platform, Flip Academy, turns financial education into an interactive, game-like experience that empowers students to learn. In the app, teachers assign courses based on grade or skill level, and students progress through lessons filled with quizzes, challenges, and milestones. To boost engagement, Flip Academy integrates gamified features such as:

  • Unlockable rewards and profile customization

  • Classroom and global leaderboards

  • Play-based learning activities

By blending play with education, Flip Academy makes complex financial topics engaging, personal, and rewarding—helping schools inspire the next generation of financially confident learners.

The problem

Financial literacy is crucial, but traditional teaching often feels abstract and disengaging. Flip Academy needed a way to make money management approachable and exciting for students through a more interactive, play-driven experience.

The solution

We redesigned financial education as play—using gamified lessons, challenges, and rewards to make learning intuitive and fun. This approach keeps students engaged, improves retention, and builds real-world financial confidence through hands-on exploration.

Research Synthesis

User Interviews

Before our project, a previous research team partnered with Flip & Floss to explore why students weren’t engaging with Flip Academy. Because participants were minors, interviews were conducted with parental consent and focused on understanding how kids perceive financial learning and what keeps them motivated.

The study tested three key assumptions:

  1. Finance feels boring – Students view money management as dull or difficult, making it hard to sustain interest.

  2. Low social sharing – Without playful competition or social features, students rarely talk about or revisit the app.

  3. Uninspiring interface – A plain design and static activities fail to capture the energy or creativity that engages young learners.

After interviewing the participants, the results were organized to four key themes and insights…

  • Kids are most engaged by short, rewarding experiences with instant gratification, leaderboards, and opportunities to share achievements. Social competition and real or perceived value (like in-game currency or rare items) drive sustained use.

  • Overly complex interfaces discourage engagement. Clear, simple, and visually engaging designs make apps and games more approachable and enjoyable.

  • Peer interaction, sharing milestones, and meaningful notifications (from friends, family, or time-sensitive events) foster engagement, while generic alerts are ignored.

  • Kids understand basic saving/spending but struggle with long-term planning and abstract concepts. They respond best to relatable, real-world applications—like chores, odd jobs, and tangible rewards that give in-app currency real impact.

Persona

Thanks to the research provided, our team put together a persona to be mindful of the type of user we would be designing for. Meet Dev. Keeping Dev in mind helped us design features that make financial learning fun and meaningful.

How Might We

Using the information gathered from Flip & Floss, my team and I brainstormed a list of guiding questions which set the foundation for providing a solution to the problem:

  1. How might we design rewarding, challenge-based experiences that make learning feel like play and keep students coming back for more?

  2. How might we build friendly competition and social interaction into the platform in a way that boosts motivation and fun?

  3. How might we transform mini video courses into playful, interactive journeys that engage middle schoolers and build financial skills?

Ideation

Ideas & Inspiration

Guided by our research and How Might We questions, our team brainstormed ways to make financial learning more engaging through rewards and social connection.

We explored ideas like daily login streaks, weekly challenges, and seasonal events to encourage consistent participation. Friendly competition could come from peer shoutouts, profile badges, and unlockable customization—making progress visible and fun.

Our inspiration came from familiar, highly engaging platforms:

Halo

Duolingo

League of Legends

Subway Surfers

  • Duolingo – Motivates consistency with streaks and playful animations.

  • League of Legends – Rewards progress with profile borders and seasonal updates that keep experiences fresh.

  • Halo – Personalizes achievement through nameplates and badges.

  • Subway Surfers – Encourages repeat play through daily and weekly challenges tied to rewards.

These examples showed how incentives and social features can transform financial education into a playful, habit-forming experience that keeps students coming back.

User Stories 

From our initial ideas, our team and I developed 12 user stories to capture ways students might interact with Flip Academy, then narrowed the list to 7 core stories for the Minimum Viable Product. These focused on scenarios that would maximize engagement and make learning playful and rewarding.

Among the stories I specifically designed:

  • As a student, I want to apply stylish borders to my profile avatar pic so that I can personalize my profile cosmetics and show it off when displayed on leaderboards.

  • As a student, I want to apply nameplates to my username so that I can personalize my profile cosmetics and show it off when displayed on leaderboards.

These stories guided design decisions around rewards, personalization, and social features—helping ensure every feature encouraged exploration, competition, and consistent engagement.

User Flow

I then designed user flows to help visualize the various scenarios a user undergoes by applying stylish borders to their avatar and nameplates to their username.

Bringing the Solution to Life

The Design System

The Flip Academy design system emphasizes playfulness and vibrancy, creating a visual language that resonates with students and encourages exploration. Inspired by mobile and console gaming, it supports flexibility and innovation while accommodating key gamification features: avatars and profile cosmetics, leaderboards, and the Flip Shop, where in-game currency earned from completing courses can be spent on rewards.

The type system pairs Baloo and Satoshi, moving away from Nunito Sans, giving the platform a friendly and familiar feeling. Every element, from colors and typography to interactive components, is crafted to make learning about money fun, engaging, and motivating, reinforcing the theme of financial education as play.

Sketches

After defining user stories and flows, I sketched potential interfaces for the profile customization features I focused on, specifically applying avatar borders and username nameplates. The goal was to visualize how these interactions would work in the app and communicate ideas clearly for feedback. To maintain consistency across the team, all sketches were created within a template matching Flip Academy’s Figma frame aspect ratio.

Wireframes

After sketching, our team built wireframes in Figma to refine the interface in a digital framework. This stage allowed us to add context to the UX by including live copy and demonstrating how user actions would affect the experience. It also enabled the implementation of foundational design elements, like a grid system, to establish consistent spatial relationships between components.

To support the user stories I focused on, I redesigned the ‘My Profile’ page, where students could edit avatar borders and username nameplates. This page also included personal details with editable text fields, giving users control over their profile. Wireframing helped us focus on the core UI and UX efficiently, avoiding over-design while leaving room for iteration based on feedback.

Hi-fidelity Prototype

Building on our wireframes, the team developed a high-fidelity prototype that users could interact with, applying a comprehensive design direction aligned with Flip Academy’s updates. To stay true to our persona, Dev, the prototype retained a sense of playfulness and vibrancy while organizing information for clarity and accessibility. I also redesigned key screens and adjusted existing ones, including a refreshed login screen as the natural starting point for users testing the prototype. These updates ensured that interactions felt clear and engaging, reinforcing the platform’s goal of making financial education fun and rewarding.

Testing the Solution

Client Feedback

Before testing with student participants, our team reviewed the prototype with Flip & Floss and incorporated their feedback to enhance the UX. Key updates related to the profile customization flows I focused on included:

  • Refining the ‘My Profile’ layout: Profile picture and nameplate previews were centered and stacked to better show their relationship, with the cosmetics adjustment CTA placed above. The rest of the page layout was adjusted for a cleaner, more organized presentation.

  • Consolidating cosmetic adjustments: All options for customizing the profile, including avatar borders, nameplates, and picture, were grouped under a single dropdown to reduce clutter and simplify interaction.

  • Simplifying CTAs and improving accessibility: Primary actions across all screens, including the flows designed by teammates, were standardized to yellow. Gradients were removed and text-background contrast was clarified.

Usability Testing & User Feedback

After iterating on the prototype based on client feedback, usability testing was conducted by my teammates to evaluate Flip Academy’s overall usability, identify friction points, and assess whether key features were intuitive. Flip & Floss recruited participants through their school partnerships, resulting in two students who had never used Flip Academy and provided parental/guardian consent. Observations and feedback were logged to guide interface refinements.

Reactions were mixed. The first participant, within the target age range, responded positively to features like login rewards, attendance rewards, and profile customization. The second participant, younger than the intended audience, struggled to navigate tasks and understand gamification elements such as rewards and leaderboards. Insights from both sessions highlighted areas for improvement, most of which were minor, with one critical adjustment required. Here is how the prototype was updated based on user feedback…

The main recommendation was to move login rewards to the dashboard, as participants did not realize rewards were nested under the Flip Shop. Once moved, the component was removed from the Flip Shop entirely. Originally, login rewards were tied to in-game currency and purchases, but testing revealed that students did not naturally make this connection. Adjusting the dashboard ensured rewards were visible and immediately understandable, improving engagement and clarity for the target user.

Client Handoff

To conclude our project, our team presented the results from user feedback and showcased how the prototype was updated. We were met with applause as the Flip & Floss team reacted with praise for the work that we did to improve user engagement through gamification features. All that’s left to do was to handoff the user testing report to the client and provide edit access to our team’s Figma prototypes. That way, their developer can save a local copy and dissect the design to implement in the future version of Flip Academy. As our time came to a close, their founder, Andre, expressed gratitude with some kind words…

“You all went above and beyond what was normally expected and designed so many frames. When we first started Flip & Floss, we had no idea how the product would turn out. In fact it had changed so much through the years that you wouldn’t recognize how it looked initially. All the iterations it has gone through was such an improvement on the original vision and I am personally happy that you got to contribute to its evolution to make financial education fun, accessible and engaging for students.”

Andre Smith
Founder

Closing Thoughts

Gamification for engagement

Features like avatar customization, leaderboards, and login rewards transformed Flip Academy into a platform where students are motivated to return and explore.

Project Highlights

User-centered profile customization

By focusing on core user stories, especially profile customization, we ensured interactions were intuitive, visually clear, and enjoyable.

Leadership and mentorship

Organizing workflows, providing guidance, and fostering a collaborative environment helped the team deliver thoughtful and playful solutions.

  • Leading client communication helped me define project goals, ensuring the focus was on increasing engagement through gamification rather than just redesigning visuals.

  • Organizing resources, meetings, and Figma files allowed teammates to focus on improving UX and gamification features efficiently.

  • Offering guidance through questions and suggestions encouraged teammates to think critically about hierarchy, spacing, contrast, and system-wide design decisions.

What I learned

What I would do (or like to do) differently

  • Running our own user interviews would provide deeper ownership of insights and allow questions tailored to engagement and gamification.

  • Having the latest prototype sooner from the client would help prioritize gamification improvements and avoid redundancies with standardizing the CTA system.

  • Scheduling additional students in the target age range would provide richer feedback and better validate usability and engagement.

View Flip Academy

Selected Works