Scenario-based
Custom animation

When Disaster Strikes: Are You Prepared?

A scenario-based experience that lets healthcare professionals practice split-second emergency decisions — immersed in custom animation and sound, with no real-world stakes.

The When Disaster Strikes title screen shown on a laptop in a cafe

Overview

Practicing a crisis before it happens

This project is an eLearning scenario-based experience designed for healthcare professionals. This sample is a part of the assessment that would be a part of a larger course. The custom animations were designed to immerse the learner.

Try the simulation

The Problem

No room to freeze in a real emergency

It essential for healthcare workers to have the skills and knowledge to properly respond to a variety of emergency situations, while performing their professional responsibilities. Not only should the healthcare worker ensure their safety, they must also ensure the safety of their patients and colleagues during a crisis.

The Solution

Rehearsing the response in a risk-free scenario

If you’ve ever been in an emergency situation, you know it’s hard to think and make decisions. Your fight, flight, or freeze instincts kick-in and you naturally want to make sure you are safe. If you are responsible for others you need to take care of them also. When possible, it’s best to practice for these situations in a safe environment. A scenario-based eLearning experience is a great way to practice. This allows the learner to practice responding to an emergency and performing their responsibilities in a risk-free environment.

A consequence screen — debris flying as the learner realizes their choice was not the safest option — Wrong choices play out on screen — here, debris flying after an unsafe decision — then let the learner try again.

My Process

From client sample to an animated build

I was given a sample of a full course to develop for a potential client. I was asked to develop this content in Articulate Storyline 360 and was given the freedom to design an experience that I felt fit the content. The sample content gave me context to the scenario, the first question, the options to the question, and the consequences to each option.

Text-Based Storyboard

With the sample content I received, I created a storyboard. It was really fun to write the storyboard and envision what this project would look like after full development. In my storyboard, I made notes to include audio and animation to immerse the learner. I enjoyed writing consequences that show the learner what happens based on their choice, as opposed to telling them.

Visual Mockups

After the storyboard, I began working on my visuals. I first created a mood board to organize my images of example nursing facilities, illustrations and assets that I would like to use, various font pairings I’m considering, and any color palettes I feel fit the content or the brand.

The mood board with nursing-facility photos, illustrations, font pairings, and color palettes — Reference facilities, illustrations, type, and color gathered in one place.

Once I had plenty of inspiration from my mood board, I created a style guide. In this style guide, I pulled colors from the illustrations that I chose for cohesiveness. I designed button styles and chose fonts to fit the theme.

The style guide with a color palette pulled from the illustrations, button styles, and type — Colors pulled from the illustrations kept the whole experience cohesive.

Next, I created wireframes to choose the best layout and experience for my learners. Once I had a solid layout, I designed high-fidelity mockups. This is the fun part because it’s your first look at what your final product will turn in to. While creating mockups, I start creating any custom assets I may need for the final product. In this case, I was finding assets and altering them to use in the animations.

Wireframes progressing into high-fidelity mockups for every slide type — Wireframes evolving into high-fidelity mockups, plus the custom assets for the animations.

Interactive Prototype

Since this project is a sample of a full course, I would consider what I created to be an interactive prototype. While developing this prototype, I created custom animations to immerse the learner. To create these animations. I used PowerPoint and exported the files as mp4 files. I also sourced sound effects to fit the animations and to match what was outlined in my storyboard.

A custom debris animation being built across slides in PowerPoint — Custom animations built in PowerPoint and exported as MP4s.

With animations and audio ready to go, I begin development in Articulate Storyline 360. It was really fun to match the audio with the animations and the timing of the on-screen text. During development, I made sure to test for functionality very often to ensure a seamless experience.

The question slide assembled in Articulate Storyline 360 with triggers, layers, and a synced audio timeline — Development in Storyline 360 — matching audio, animation, and on-screen text on the timeline.

Results & Takeaways

Above and beyond, per the client

When I shared my project with the client, they were impressed with my work.

Thank you so much for your quick turnaround on this and for going above and beyond to build out animations and custom graphics. I really like a lot of the elements that you’ve incorporated!

Potential Client

Completing this project has only solidified my love for visual design and developing eLearning solutions!

Think you’d stay calm when disaster strikes?

Step into the scenario, make the call, and see how it plays out.

Try the simulation See all projects