Wildfire Games @ UCSC

Helping communities build wildfire resilience through games.
Role
UI/UX Designer
Duration
Sept 2024 – Mar 2025
Team
MJ Johns
Yiyang Lu
Anna Toledo
Project Brief
I led the UI/UX design for two tablet-based educational games that taught home protection and safe evacuation procedures. Working closely with the developer and artist, I translated game concepts into interactive prototypes and final in-game interfaces.
Play the games ↗
‍Read about the project ↗
CONTEXT
Wildfires are becoming more common.
As global climates become hotter and drier, communities need tools that help residents and stakeholders prepare for natural hazards. With educational games, players can learn wildfire prevention and evacuation strategies while having fun.
Problem
Confusing interface limited learning.
Despite good intentions, the games struggled to communicate key concepts effectively. The text-heavy format and cluttered interface made it difficult for players to learn critical fire safety tips. The overall user experience lacked intuitive flow, causing frustration and reducing learning retention.
Objective
Simplify interactions, reduce cognitive load, and create a more engaging, educational experience for a diverse audience.
RESEARCH
Evaluating what we had.
I conducted guerilla usability tests with 4 players, referenced past playtest notes, and played the games myself. I compiled my observations of what players said and did to identify the top issues with the games.
Low engagement: Player learning was hindered by confusing user flows and overwhelming text blocks.
Limited social interaction: Solo gameplay doesn't model crucial community building in wildfire preparation.
Aligning on design goals.
I applied the Octalysis Framework and brainstormed with our team to identify how we could use epic meaning, ownership, and social influence to enhance positive long-term player motivation.
GAME 1 – FIREWISE CITIZENS
Increasing engagement with interactive narratives.
I mapped out the initial user flow and identified why players were getting frustrated. Without clear indicators showing where to make decisions, they got stuck at the very first step of the simulation. Another issue was the lengthy text blocks – most players skipped them, which reduced the game's effectiveness as a learning tool.
Initial sketch: I designed a conversation UI that broke complex instructions into bite-sized dialogue
Updating the user flow.
Based on the sketch, I created a user flow that leads players into an interactive narrative. At the end of the conversation, they are prompted to decide on an evacuation plan for the resident. By linking the conversation and decision elements, we strengthen information retrieval and retention.
Making narrative interactions.
The biggest challenge for "Firewise Citizens" was making information more concise. I worked with our narrative designer to break down long text blocks to create bite-sized conversational sentences.
Original
New
A clearer decision modal.
A major part of the gameplay is to make evacuation decisions for the town's residents. I redesigned the decision modal to include concise summaries of each option and radio buttons for clear selection states.
Original
New
PLAYTESTING
Testing UI usability.
After these changes, I wanted to focus on evaluating whether player expectations aligned with the UI. I used a cognitive task analysis to answer the following questions:
  1. Can players progress through the narrative flow?
  2. Are they able to make decisions for each household?
  3. Do they understand each choice available?
RESULTS
Final iterations & results.
We noticed that the conversation UI confused older players. After learning that they were more familiar with text messaging, I updated the design with an iMessage-inspired layout to improve learnability.
In a subsequent test, 4/5 players were able to successfully progress through the narrative portions, which was improved from the previous 2/6!
Original
Final
GAME 2 – FIRESAFE FRIENDS
Enhancing connection with cooperative play.
Home hardening is most effective when done with neighbors. Embers can travel long distances, so even a well-prepared home remains at risk if nearby properties are vulnerable. My task was to transform a one-player game into a collaborative two-player experience.
Initial sketch: Two players take turns upgrading their homes and shared spaces to prepare for a fire season. Added a shop & budget for realism.
Home customization to build motivation.
Once we finalized this direction, I mapped out the initial home modification flow, including the inventory and store elements. Players can develop a sense of ownership by creating a pretty house they want to protect from the wildfire season.
Prototyping to validate new concepts.
I started with low-fidelity sketches to rapidly explore ideas. Then, I created interactive low-fidelity prototypes for stakeholder buy-in. Once we agreed on the game direction, I worked on high-fidelity prototypes to finalize the inventory, store, and plant flows.
Accessibility improvements.
To support inclusive play, I made sure all context was WCAG AA compliant, and increased font sizes to improve legibility. I also made sure elements popped on the green, blue, and brown background of our game.

Tmpt.me

Back To Home
EmailLinkedIn