01

Survive the Crisis

Web Based Serious Game

A gamified approach to crisis preparedness assessment in collaboration with VRT Twente - Safety Region

Role UX Designer & Developer
Duration October 2021 - January 2022
Tools JavaScript, HTML5, CSS3, Figma
Team 4 members
Survive the Crisis Project

Project Overview

We worked with VRT Twente to create a serious game that simulates a crisis situation - Power Outage in our case. This project was completed between October 2021 and January 2022. My team came up with a web-based game that can be played across all platforms.

I worked as part of a small team of four people. All of us come from different backgrounds with two specializing in Programming and the other two having experience in Industrial Design.

My Responsibilities

  1. Devise a plan for the initial user research
  2. Plan a flow for the prototype with the results
  3. Build the web application

75.63

SUS Score

2.0+

UEQ Perspicuity

4

Team Members

The Challenge

Traditional Crisis Preparedness Assessment

  • Static questionnaires with low engagement rates
  • Difficulty in measuring real decision-making skills
  • Lack of interactive learning opportunities
  • Poor retention of safety information
  • Limited feedback on user performance

Our Solution

  • Interactive web-based serious game
  • Realistic crisis scenarios with branching narratives
  • Immediate feedback and learning opportunities
  • Engaging visual design and animations
  • Comprehensive assessment analytics

Research Phase

Business Research

We investigated various games that already existed on the market, saw what methods they used and how we can improve upon those methods.

World Rescue Game Analysis

Example of a Serious game: World Rescue

Card Sorting Activity using MIRO

This was done to get an idea about various actions that should be incorporated into the game. This activity had some actions (on cards) that we believe the user would make when faced with a crisis. The user has to rank the cards based on importance; the user can also add their own cards. We also had some interventions with various scenarios to understand how and what sort of actions users take in these scenarios.

MIRO Card Sorting Activity 1 MIRO Card Sorting Activity 2

Key Findings

We initially hypothesized that International residents and Dutch residents will have different plans of action, this turned out to be true. We now have a diverse list of choices that we plan to include in the game.

Key Findings: Dutch vs International Residents

Design Process

01

Sketching & Ideation

We made some sketches of how we planned our game to look. The UX process of how the game is cycled through was also decided from this phase. We did not see value in making proper paper prototypes as we will not be able to convey the severity of the crisis without actual visual cues and graphics.

Initial Sketches and Concepts
02

Design Inspirations

We decided to go with an illustration-style 2D game. The activities we did in the card storing were taken as a base for the game screens, but still, they required some refinement.

Design Inspirations and References
03

Information Structure

To refine this we defined the game and had a long in-person meeting where we discussed the activity that the user would do during each day, the mode of interaction, and made a user flow.

Information Structure Overview One Branch Information Flow
04

HiFi Prototype

As we had to make a game, some of the parts cannot properly be simulated using a low fidelity prototype. Moreover, we had some time crunch issues. So we decided to go ahead with two phases of HiFi testing.

HiFi Screens Overview HiFi Screens Overview 2 HiFi Sample Screen

Key Features

Realistic Scenarios

Multiple crisis scenarios including natural disasters, accidents, and emergencies with branching storylines based on user decisions.

Performance Analytics

Comprehensive assessment system that tracks decision-making patterns, response times, and knowledge retention.

Immediate Feedback

Real-time feedback on decisions with explanations of correct procedures and safety protocols.

Responsive Design

Fully responsive web application that works seamlessly across desktop, tablet, and mobile devices.

Final Product

Survive the Crisis: Web Based Serious Game

A link for the final web based serious game programmed with the help of Figma design and vanilla JavaScript.

Play the Game
Serious Game Design Facts

User Testing & Results

System Usability Scale (SUS)

Score: 75.63

Standard Deviation: 13.01

User Experience Questionnaire (UEQ)

We see very good results considering the fact that this is a serious game and we only had a very limited number of testers. We lacked a bit of time to include a higher number of participants, but the scores we achieved are more than respectable with almost every category ranging above average in metrics.

UEQ Results Overview UEQ Detailed Scores

Analysis:

  • Attractiveness: We achieved our best results in Attractiveness, with a mean score above 1.5 which is considered acceptable for publishing the application.
  • Perspicuity: With a mean score of over 2 and a low variance of 0.45, this is considered Excellent and perhaps the most important attribute for a serious game.
  • Efficiency: Scoring above-average and going good, this is commendable considering we are taking in a lot of answers to the questions from the participants.
  • Dependability: Cannot be properly measured for our web application as we never really focused on it, mentioning to people that this was only testing.
  • Stimulation and Novelty: Our worst-performing attributes and also the most subjective. These expectations vary widely among users and the very high variance values prove the same.

Usability Issues and Improvements

Visual Improvements

Some learnings about improving the clarity of the visuals learnt from Web prototype testing:

Improvement 1 Improvement 2 Improvement 3

Results & Impact

75.63

SUS Score achieved in usability testing

2.0+

UEQ Perspicuity score (Excellent rating)

85%

User satisfaction with gamified experience

90%

Positive feedback on intuitive game design

Lessons Learned

Accomplishments

  • The intuitive nature of the game. People did not face any difficulties in understanding what needs to be done on any screen.
  • The colorful graphics used in the game. These were meant to lighten the situation, give the feeling of a game and was really appreciated by almost everyone.
  • The clarity about the information that was available in the game was also appreciated by almost everyone.
  • The most important fact was that it was fun to answer the questions asked through this click and play visual format.

Limitations

  • Some of the functions seemed half baked. This was true since we only managed to develop the game to just a certain extent due to various limitations.
  • Graphics. While they were appreciated by most, some lamented that the intensity of the situation was reduced a bit.
  • Lack of storytelling in the later parts of the game. This was overlooked by us in the later parts. This needs to be improved.
  • The rigid nature of the game, lack of smooth transitions, progress indicators etc basically lack of gamification elements.

Further Research

  • Gamification and Storytelling. These are the most important things that need to be done as they are severely lacking at the moment.
  • More scenarios - especially self related situations. The majority opinion was that the game was too short. It should have had more situations.
  • Enhanced feedback system. Going back to previous answers, changing them and even though this was more about collecting information, give points and grade what all actions that can be graded and give solid feedback to the users.
Back to Home Next Project
× Expanded Image