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
Client:  Roper Research Center
My Role:  UI/UX Designer, Web Designer, Branding
Tools:  Figma, Adobe Illustrator
Duration:  3 months

UX Skills Leveraged:

HEURISTIC EVALUATIONBRAND DESIGNDESIGN SYSTEMSCOMPETITIVE ANALYSISMID FI / HI FI MOCKUPSWIREFRAMESUSER TESTINGMID FI / HI FI MOCKUPSUX WRITING

Overview

What is Campaign Weathervane

Player assumes the role of a presidential candidate named "Weathervane" and answers questions on public opinion.

It is a desktop game and used by High school AP History teachers for classroom activity or homework.
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.
What was my
design process?

Design Process

Competitive Analysis

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

- HelpCohesive branding leads to Immersive storytelling.s players quickly recognize how to interact.
‍
- 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
Design System

US Election-Themed Design System

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 Components

Refining Key Components Through User Feedback

Progress bar —> Stars & stripes banner
User Testing Feedback
Response & Rationale
Players weren’t sure which level they were on. Some didn’t immediately understand what it is.
Introduced a clear highlight state (filled star + outline) to show current progress point.
The previous layout looked too plain and academic.
Added star icons and red-white-blue wave motif to visually connect it to the U.S. election theme.
Election year selector —> Time machine
User Testing Feedback
Response & Rationale
Users didn’t immediately feel the excitement of “traveling back in time.
Replaced the selector with a circular “time machine” interface to make the idea of traveling through time more visual and fun.
The selector felt cluttered and visually disconnected from the “time travel” theme.
Player performance in game —> Election polls
User Testing Feedback
Response & Rationale
The original bar chart looked too technical and didn’t convey the competitive “game” feel.
Took inspiration from familiar election polls to visualize player performance.
Some users didn’t notice the old favorability bar changing after each round.
Added a clear “+2%” indicator to make change immediately visible.
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.
Changes
Rationale
Added illustrations such as the images of two presidential candidates in a stare down.
To set the tone and support the competitive narrative of a presidential election.
Rewrote game instructions with concise texts and scannable headers.
For easy keyword retrieval.

Making Polls Instantly Understandable

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.
Pie Chart
Changes
Rationale
Relocated percentage labels from the pie chart to the corresponding colored answer boxes.
‍To simplify visual scanning, enhance clarity and reduce cognitive load.
Bar Chart
Changes
Rationale
‍Added signifier for player's answer on top of the actual poll result, minimizing visual scanning.
To help player quickly distinguish their answer from the actual poll result.
Drag to rank
Changes
Rationale
‍Used Green to represent answers player gets right and red for answers they got wrong; added drag icon to each draggable item.
To help players quickly grasp how to interact with the game and understand results using visual cues.

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.
Mobile Design
Inclusive Research & Design
Overview
Research
Design
Outcome
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