Summary

Summary

Capital Quest: The Great U.S. Adventure

Capital Quest: The Great U.S. Adventure

The Challenge

The Challenge

In a 4-day sprint, our team was tasked with creating an AI-driven interactive platform that would engage middle school students in learning U.S. geography and culture.

In a 4-day sprint, our team was tasked with creating an AI-driven interactive platform that would engage middle school students in learning U.S. geography and culture.

The Solution

The Solution

Our team created Capital Quest: The Great U.S. Adventure, an innovative educational game featuring AI-driven chat tutors, interactive maps, and geography-focused mini-games to make education enjoyable.

Our team created Capital Quest: The Great U.S. Adventure, an innovative educational game featuring AI-driven chat tutors, interactive maps, and geography-focused mini-games to make education enjoyable.

My Role

My Role

Lead Product Designer in a team of 5

Lead Product Designer in a team of 5

The Process

The Process

  • User Research

  • Ideate

  • Design

  • Prototype

  • Usability Test

  • Presentation

  • User Research

  • Ideate

  • Design

  • Prototype

  • Usability Test

  • Presentation

Tools

Tools

  • Zoom

  • Figma

  • Zoom

  • Figma

The brief

The brief

Kick-Off Meeting

The team and I tuned in to the Reality AI Lab Hackathon, where we were given just four days to form a team and develop an interactive game-like platform for middle school students. Fortunately, my team and I had already been collaborating on a separate project before this, so our dynamic was already in place. That night, we jumped on a Zoom call and immediately dove into the design process, ready to bring our vision to life.

The team and I tuned in to the Reality AI Lab Hackathon, where we were given just four days to form a team and develop an interactive game-like platform for middle school students. Fortunately, my team and I had already been collaborating on a separate project before this, so our dynamic was already in place. That night, we jumped on a Zoom call and immediately dove into the design process, ready to bring our vision to life.

Research process

Research process

Methods Used

Competitor Analysis

Persona

Discovering Our User

Given the project brief, we knew our target demographic was students aged 11-14 (grades 6-8). With only four days to complete the challenge—really just three, since the fourth day was for presentations—we didn’t have much time for in-depth user research. So, we tapped into our own experiences as kids, reflecting on what we enjoyed and what we wished we had while growing up. As we started spitballing ideas, one subject stood out: U.S. History—because who doesn’t love geography?!

Given the project brief, we knew our target demographic was students aged 11-14 (grades 6-8). With only four days to complete the challenge—really just three, since the fourth day was for presentations—we didn’t have much time for in-depth user research. So, we tapped into our own experiences as kids, reflecting on what we enjoyed and what we wished we had while growing up. As we started spitballing ideas, one subject stood out: U.S. History—because who doesn’t love geography?!

We laid out the key features we must have and some optional ones.

Ideation

Ideation

Feature Requirements & Game Brainstorming

As part of the challenge, we were given a set of required features to incorporate into our platform, including:

  • AI-driven chat – An AI tutor powered by LLMs to guide students.

  • Interactive exercises – Drag-and-drop activities, quizzes, and collaborative tools like shared whiteboards.

  • Automatic session recording – To track student progress.

  • Session resumption – Allowing students to revisit sessions and continue where they left off.

As part of the challenge, we were given a set of required features to incorporate into our platform, including:

  • AI-driven chat – An AI tutor powered by LLMs to guide students.

  • Interactive exercises – Drag-and-drop activities, quizzes, and collaborative tools like shared whiteboards.

  • Automatic session recording – To track student progress.

  • Session resumption – Allowing students to revisit sessions and continue where they left off.

Keeping these requirements in mind, we brainstormed game ideas that would be both engaging and educational:

  • "Which State Is This?" – Displays a state’s outline and challenges players to identify it.

  • State Facts & Trivia – Provides key details like capitals, fun facts, and historical significance.

  • "Which State Is Called the Sunshine State?" – A multiple-choice quiz testing state nicknames.

  • State & Capital Matching – Players match states with their correct capitals in an interactive way.

By integrating these ideas with the required features, we aimed to create an immersive and effective learning experience.

Keeping these requirements in mind, we brainstormed game ideas that would be both engaging and educational:

  • "Which State Is This?" – Displays a state’s outline and challenges players to identify it.

  • State Facts & Trivia – Provides key details like capitals, fun facts, and historical significance.

  • "Which State Is Called the Sunshine State?" – A multiple-choice quiz testing state nicknames.

  • State & Capital Matching – Players match states with their correct capitals in an interactive way.

By integrating these ideas with the required features, we aimed to create an immersive and effective learning experience.

Ideas for the different games each one of the team members pitched an Idea-mine was matching states to capitols

Ideas for the different games each one of the team members pitched an Idea-mine was matching states to capitols

User Flows from 2 of the game concepts mine is the bottom one.

User Flow & Rapid Wireframing

By the end of Day 1, it was already pretty late, so we called it a night. With our team spread across three different time zones, time management and communication were critical—not just for completing the challenge, but for winning it. We stayed in constant communication via WhatsApp, sharing iterations and refining ideas.

At this point, we had solid game concepts ready to go. To move forward efficiently, we split up and worked asynchronously so that everyone could get their game ideas planned out and wireframed by the end of Day 2.

I started by researching competitors like MagicSchool.AI and Khanmigo to see what worked well in the educational space. From there, I mapped out a user flow to ensure the experience was seamless, intuitive, and free of dead ends.

By the end of Day 1, it was already pretty late, so we called it a night. With our team spread across three different time zones, time management and communication were critical—not just for completing the challenge, but for winning it. We stayed in constant communication via WhatsApp, sharing iterations and refining ideas.

At this point, we had solid game concepts ready to go. To move forward efficiently, we split up and worked asynchronously so that everyone could get their game ideas planned out and wireframed by the end of Day 2.

I started by researching competitors like MagicSchool.AI and Khanmigo to see what worked well in the educational space. From there, I mapped out a user flow to ensure the experience was seamless, intuitive, and free of dead ends.

Wireframes & Iterations

Since everyone was working asynchronously, Figma comments became a lifesaver for keeping feedback organized and discussions flowing. Once I had my game planned out, I jumped straight into mid/high-fidelity wireframes—we simply didn’t have the luxury of starting with low-fidelity sketches. By Day 3, we needed a fully prototyped platform with multiple interactive games, so we had to move fast.

Once everyone had a wireframe ready to present, we came together as a team to review each game. We pulled what we liked, scrapped what didn’t work, and refined what needed iteration. This process left us with 3-4 solid game concepts that we were confident in.

At this stage, collaboration was key. We all took the feedback we received, refined our designs, and finalized the layout—ready to bring our ideas to life.

Since everyone was working asynchronously, Figma comments became a lifesaver for keeping feedback organized and discussions flowing. Once I had my game planned out, I jumped straight into mid/high-fidelity wireframes—we simply didn’t have the luxury of starting with low-fidelity sketches. By Day 3, we needed a fully prototyped platform with multiple interactive games, so we had to move fast.

Once everyone had a wireframe ready to present, we came together as a team to review each game. We pulled what we liked, scrapped what didn’t work, and refined what needed iteration. This process left us with 3-4 solid game concepts that we were confident in.

At this stage, collaboration was key. We all took the feedback we received, refined our designs, and finalized the layout—ready to bring our ideas to life.

Background is the teams wireframes this one was mine in the middle we pulled the leaderboard and AI-tutor chat feature from here

Design & Prototyping

Design & Prototyping

UI Styling & Style Guide

If you’ve noticed a consistent look across our wireframes, that’s because we incorporated the Reality AI Lab Marvel Design System early in the process. By following its guidelines for typography, colors, gradients, icons, and other UI elements, we ensured visual consistency across all our designs.

This approach made refining our wireframes much more efficient. Instead of reinventing the wheel, we could take our key frames and seamlessly align them with the design system. Even though each designer worked on a different game, they all maintained a cohesive look and feel, which drastically reduced the need for UI rework later on.

If you’ve noticed a consistent look across our wireframes, that’s because we incorporated the Reality AI Lab Marvel Design System early in the process. By following its guidelines for typography, colors, gradients, icons, and other UI elements, we ensured visual consistency across all our designs.

This approach made refining our wireframes much more efficient. Instead of reinventing the wheel, we could take our key frames and seamlessly align them with the design system. Even though each designer worked on a different game, they all maintained a cohesive look and feel, which drastically reduced the need for UI rework later on.

High fidelity prototype coming together late into day 3

UI Iterations & Technical Feasibility

UI Iterations & Technical Feasibility

Did I forget to mention that we were the only fully design-focused team competing against generative AI engineers and software developers? That meant while other teams were coding their platforms, our challenge was to make our platform functional through Figma prototyping.

Since we didn’t have an engineer or developer on our team, our method for determining technical feasibility came down to two key factors:

  1. Our ability to prototype the features effectively.

  2. Referencing existing platforms that had implemented similar interactions.

Technical feasibility was a major part of the challenge rubric—whoever won this hackathon would have their platform moved into development and eventually launched on the Reality AI Lab Marvel Platform. Knowing this, we made sure that throughout the prototyping and high-fidelity design phase, every interaction and feature we designed was something that could realistically be built.

Did I forget to mention that we were the only fully design-focused team competing against generative AI engineers and software developers? That meant while other teams were coding their platforms, our challenge was to make our platform functional through Figma prototyping.

Since we didn’t have an engineer or developer on our team, our method for determining technical feasibility came down to two key factors:

  1. Our ability to prototype the features effectively.

  2. Referencing existing platforms that had implemented similar interactions.

Technical feasibility was a major part of the challenge rubric—whoever won this hackathon would have their platform moved into development and eventually launched on the Reality AI Lab Marvel Platform. Knowing this, we made sure that throughout the prototyping and high-fidelity design phase, every interaction and feature we designed was something that could realistically be built.

High-Fidelity & Presentation

By 2 AM on Day 3, the team and I were running on fumes—a little delirious, to say the least. But despite the exhaustion, we powered through a late-night Zoom call to finalize the prototype.

Three of us focused on perfecting the prototype, while two worked on the Figma slides for our presentation. We had to experiment with different prototyping techniques, and the most challenging interaction was the Drag the Pin game—huge shoutout to Sara C. for figuring out how to prototype that interaction!

My role during this phase was to refine UI elements, adjust spacing and typography, and prototype my section of the game. Once everything was polished, we recorded a Loom walkthrough of the platform, as required for submission. Finally, we called it a night, knowing we had given it everything we had.

By 2 AM on Day 3, the team and I were running on fumes—a little delirious, to say the least. But despite the exhaustion, we powered through a late-night Zoom call to finalize the prototype.

Three of us focused on perfecting the prototype, while two worked on the Figma slides for our presentation. We had to experiment with different prototyping techniques, and the most challenging interaction was the Drag the Pin game—huge shoutout to Sara C. for figuring out how to prototype that interaction!

My role during this phase was to refine UI elements, adjust spacing and typography, and prototype my section of the game. Once everything was polished, we recorded a Loom walkthrough of the platform, as required for submission. Finally, we called it a night, knowing we had given it everything we had.

Presentation, Reflection and Results

Presentation, Reflection and Results

Presentation & Results

Day 4 arrived, and after a grueling, rapid design process, it was time to present and showcase what we had built. Two members of our team took the lead on the presentation, with just five minutes to run through both the presentation and the prototype. We saw some impressive ideas from the engineers and developers in the competition, but nothing compared to what Team SKADOOSH had brought to the table.

Once the dust settled, it was clear: After four days, spanning three time zones, late nights, rapid iterations, wireframes, and everything in between, we had done it. We won.

Our first hackathon win, and man, did it feel good. The hard work we’d poured into this project had truly paid off. As a result, we were moved into the pro teams for Reality AI, allowing us to work on more serious projects and be part of an advanced team. Additionally, our project was moved into the next stages, with the release of Marvel AI scheduled for late February.

Day 4 arrived, and after a grueling, rapid design process, it was time to present and showcase what we had built. Two members of our team took the lead on the presentation, with just five minutes to run through both the presentation and the prototype. We saw some impressive ideas from the engineers and developers in the competition, but nothing compared to what Team SKADOOSH had brought to the table.

Once the dust settled, it was clear: After four days, spanning three time zones, late nights, rapid iterations, wireframes, and everything in between, we had done it. We won.

Our first hackathon win, and man, did it feel good. The hard work we’d poured into this project had truly paid off. As a result, we were moved into the pro teams for Reality AI, allowing us to work on more serious projects and be part of an advanced team. Additionally, our project was moved into the next stages, with the release of Marvel AI scheduled for late February.

Reflection

Leading this project was incredibly rewarding, but I couldn’t have gotten anywhere without my team. Working and collaborating with such talented designers was an absolute blast. Getting real, quality feedback from each other and from the Reality AI team after submission was truly amazing.

I learned and honed a lot of valuable skills throughout this challenge, like collaboration, rapid processes, and rapid wireframing and iterations. Even though it was stressful at times, it was also a ton of fun, and I can’t wait for the next one!

Leading this project was incredibly rewarding, but I couldn’t have gotten anywhere without my team. Working and collaborating with such talented designers was an absolute blast. Getting real, quality feedback from each other and from the Reality AI team after submission was truly amazing.

I learned and honed a lot of valuable skills throughout this challenge, like collaboration, rapid processes, and rapid wireframing and iterations. Even though it was stressful at times, it was also a ton of fun, and I can’t wait for the next one!

Meet the team.