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

Overview

đŸ€« My Role

UI/UX & Brand Designer

♄ Team

2 Researcher & 5 Designers

⏰ Duration

10 weeks

đŸ’đŸ» Client

Roper Research Center

Background

What is Campaign Weathervane?
Players play as a presidential candidate answering question on U.S. History
Used by High School teachers for classroom or homework

Client's Goal

What did our client expect?
A thorough and professional evaluation of game
Improve user engagement and usability
Our goal was to provide practical design recommendations that can be effectively applied to achieve the client's goals.

Research

Competitive Analysis

What did we learn from other educational games on the market?
  • Cohesive branding and themed design elements lead to Immersive storytelling.
  • Impactful choices enhance content retention.
  • Outdated UI makes learning difficult.

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.

INterview & User Testing

The goal is to understand users' needs, pain points, and identify specific improvements for the gameflow.
‌ 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.
Recruitment

Snowball recruitment;
Email & word of mouth.

Material

Interview Protocol;
Email Template;
Informed Consent Form.

Overview

9 Participants;
45-60 minute Zoom Sessions.

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.

Why is that?

Post-user testing 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 game's narrative, while making it easier to grasp the educational content, we intended to focus on...
Thematic Visual ElementsVisible Feedback on PerformanceConcise Written ContentConsistent & Intuitive Interactive Elements

OUTCOME

An All American 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 Specific Elements

1. Progress Bar

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

2. Election Year Selection

The game instructs players to "time travel" to an election year. We designed a time machine which lets users select the year to vividly represent traveling back in time.

3. Player Performance Visualization: How likely is the player to win the election?

We took inspiration from presidential election polls to visualize game performance.
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.

OUTCOME ~ Continued

Before Vs. After

1. 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 story telling and clarity on instructions.
Storytelling:
‍Used illustrations to set the tone and support the competitive narrative of a presidential election.
Game Instructions:
Rewrote game instructions with concise texts and scannable headers for easy keyword retrieval.
Drag
Before
After

2. 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.

2.a Gameplay: Pie Chart

Goal:
To simplify visual scanning, enhance clarity and reduce cognitive load.
Changes:
‍Relocated percentage labels from the pie chart to the corresponding colored answer boxes.

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

Goal:
To help player quickly distinguish their answer from the actual poll result.
Changes:
‍Added signifier for player's answer on top of the actual poll result, blocked out, minimizing visual scanning.

2.c Gameplay: Drag to Rank & Multiple Choice

Goal:
To help players quickly grasp how to interact with the game and understand results using visual cues.
Changes:
‍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