Revitalizing Educational Game

How I helped make learning more engaging and easy for high school students playing
the educational game "Campaign Weathervane".
Drag
Before
After

đŸ€« My Role

UI/UX & Brand Designer

♄ Team

2 Researchers & 5 Designers

⏰ Duration

10 weeks

đŸ’đŸ» Client

Roper Research Center

Campaign Weathervane

Player assumes the role of a presidential candidate "Weathervane" and answers questions on U.S. History.
It is a desktop game and used by High school AP History teachers for classroom activity or homework.

1. Select the Year You'd like to run your predisential campaign

    2. Go on campaign stops to answer questions on public opinion

      3. use favorability polls to Track performance (> 50% is winning)

        4. Interact with data visualizations to correctly guess the result of a public poll in selected year

          Client's Request

          A thorough and professional evaluation of the game and improvement of user engagement and usability.

          Our goal was to provide practical design recommendations that can be effectively applied to achieve the client's and user's goals.
          Problem Identified

          Our users sped through the game without caring about their performance because they didn’t feel invested in the game’s narrative or themes.

          This was discovered when interviewing and observing users playing the game in usability tests.
          4 major design decisions & The Solution

          Cohesive branding + Visible Feedback on Performance are key.

          All American Design System

          • Leads to Immersive storytelling brought by cohesive branding.
          • Makes gameplay feel more purposeful and story-driven.

          Narrative-Driven UI Design

          • Introduces players as “Time Travelers” with a clear goal.
          • Creates a stronger narrative hook right from the start.

          Visible feedback on performance

          • Helps users reflect on their decisions.
          • Turns passive gameplay into a more thoughtful experience.

          Consistent & Intuitive Interactive Elements

          • Helps players quickly recognize how to interact.
          • Simplifies visual scanning, enhance clarity, and reduces cognitive load.

          Let's Start
          From The Beginning

          What was my design process?
          Competitive Analysis

          We learned from other educational games on the market that..

          • Cohesive branding leads to Immersive storytelling.
          • Impactful choices enhance content retention.
          • Outdated UI makes learning difficult.
          Interview & Usability Tests

          The goal is to understand users' needs, pain points, and identify specific improvements for the game flow.

          ‌ Note: Unfortunately, we couldn’t interview High School students and teachers, so we conducted interviews and user testing with college students studying US history instead.
          Unexpectedly, we observed that participants...

          Sped through the game without caring about their performance.

          We also learned that participants...

          Wanted Clearer Feedback on performance & motivation to  play to win.

          Limitations

          Unfortunately, we couldn’t interview High School students and teachers, so we conducted interviews and user testing with college students studying US history instead to understand their needs, pain points, and identify specific improvements for the gameflow.
          Why is That?

          Post-usability test interviews revealed that the participants:

          • Didn’t feel invested in the game’s narrative or themes, making the experience feel generic or irrelevant.
          • Found content and interactive elements unclear.
          Major Design Changes

          Thus, To draw players into the narrative and simplify learning, we focused on...

          Narrative-Driven UI DesignVisible Feedback on PerformanceConcise Written ContentConsistent & Intuitive Interactive Elements
          The Solution

          USA-Themed Color Scheme

          Goal:
          To immerses users into the political context from the moment they start interacting with the game.‍
          Bold Red, Deep Blue, & white:
          Represents not only America but its two most popular political parties as well, enriching the game's political authenticity.
          Vintage Yellow:
          ‍          Used as an accent color, vintage yellow adds a touch of historical depth and nostalgia to the design.

          ELECTION-THEMED DESIGN ELEMENTS

          Purpose:
          Help students draw connections between the game and historical events they study in class.

          Timeless Typography

          Goal:
          Subtly reflect the time periods or historical contexts students are studying, without sacrificing readability.‍
          Montagu Slab for Headers:
          ‍          For a vintage feel, we chose this font to not only grab user attention but also to conveying a sense of timelessness.
          Raleway for body texts:
          Clean and easy to read sans-serif for questions and answers.
          Redesign of Specific Elements

          We transformed the progress bar into a Stars & Stripes Banner.

          User Testing Feedback

          • Users either ignored the original progress bar or was confused by what it represents.

          Design Rationale

          • Maintains a coherent visual theme.
          • Makes it more visually striking and clearly show user progress.

          We designed a time machine which lets users select the year to vividly represent traveling back in time.

          User Testing Feedback

          • Some users did not realize this is clickable.
          • Visual Clutter.

          Design Rationale

          • Emphasizes the game's "time travel" context.
          • Reduces visual clutter.
          • Increases playfulness and interactivity.

          We took inspiration from presidential election polls to visualize game performance.

          User Testing Feedback

          • Some users did not notice change in favorability.
          • Some questioned what it means and how it's connected to the accuracy of their answers.

          Design Rationale

          • Mimicking presidential polls helps users link their performance to familiar election visuals.
          • A familiar and dynamic visual keeps users invested in their progress.
          Drag
          Before
          After
          Changes:
          • Rewrote and restructured game instructions with concise texts and scannable headers.
          Why:
          • Enhances visibility and reduces cognitive load.
          Changes:
          • Transformed the clinical selection of election years by allowing users to select via a Time Machine.
          Why:
          • Setting the tone.
          • Emphasizes the game's “time travel” context.
          • Reduces visual clutter, allowing users to focus on one task at a time.
          • Makes the experience more engaging and intuitive.
          Before VS. After

          Info Pages: Landing Page & Campaign Stops

          These two pages mainly provide game instructions and setting up the tone and narrative of the game. Thus, we focused on storytelling and clarity on instructions.
          Visual Storytelling:
          ‍          Used illustrations to set the tone and support the competitive narrative of a presidential election.
          Concise Texts and Scannable Headers:
          ‍          Rewrote game instructions with concise texts and scannable headers for easy keyword retrieval.

          Gameplay: Pie Chart, Slider, Drag to Rank & Multiple Choice

          The game asks players to answer polling question based on how they think the American public would have felt at the time.To help users quickly and easily understand the interactivity of a poll and its results, we visually simplified how the information is presented.
          Drag
          Before
          After
          Design Goal:
          ‍          To simplify visual scanning, enhance clarity and reduce cognitive load.
          Changes Made:
          Relocated percentage labels from the pie chart to the corresponding colored answer boxes.
          Design Goal:
          To help player quickly distinguish their answer from the actual poll result.
          Changed Made:
          ‍          Added signifier for player's answer on top of the actual poll result, minimizing visual scanning.
          Design Goal:
          To help players quickly grasp how to interact with the game and understand results using visual cues.
          Changes Made:
          ‍          Used Green to represent answers player gets right and red for answers they got wrong; added drag icon to each draggable item.
          Drag
          Before
          After
          Changes:
          • Rewrote and restructured game instructions with concise texts and scannable headers.
          Why:
          • Enhances visibility and reduces cognitive load.
          Changes:
          • Transformed the clinical selection of election years by allowing users to select via a Time Machine.
          Why:
          • Setting the tone.
          • Emphasizes the game's “time travel” context.
          • Reduces visual clutter, allowing users to focus on one task at a time.
          • Makes the experience more engaging and intuitive.

          Changes to Main Pages

          1. Landing Page: Before Vs. After

          Words From Our Client

          "This is such a hardworking team. They've gone above and beyond my expectations. Excellent job!"

          Associate Director of the Roper Center

          Lessons Learned

          Beautiful designs ≠ Usable designs :(

          From user testing and iterating on our re-designs, I found that making them more visually appealing sometimes worsened usability. It taught me the importance of weighing trade-offs.
          Design for & w/ Pws

          Discover How I...

          Made virtual meetings more inclusive for People who Stutter

          Design for low digital literacy

          Discover How I...

          Helped prisoners explore educational content on tablets with ease.

          Overview
          Research
          Design
          Outcome


          Thank you for viewing my portfolio. I hope you had as much fun exploring it as I had creating it!
          ‍
          Like what you see? Have a feedback for my portfolio?
          Chat with me (or not I won't cry promise)~

          Data Visualizations
          Designing for & with PwS
          HP Data Visualization
          Healthcare Visual Essay
          Redesigning Educational Game
          Designing For Low Digital Literacy
          Portfolio Designed By Me & Built With Webflow ~
          1. Overview · 2. Literature Review · 3. Competitive Analysis · 4. User Interviews & Surveys · 5. Co-design · 6. Problem Statement · 7. Ideation · 8. Final Sketch & User Flow · 9. Iterative Design Process · 9. Usability Test · 10. Final Solution · 11. Impact and Limitations · 12. Future Recommendations · 13. Challenges