Performing a School Fire Safety Drill

I designed this scenario-based eLearning concept project for newly hired teachers to understand and practice the steps for a fire safety drill in a school setting. 

Audience: Newly hired teachers

​Responsibilities: Instructional Design, eLearning Development, Visual Design, Animation/Motion Graphics, Sound Design

Tools Used: Articulate Storyline 360, Vyond, Adobe Photoshop, Figma, Google Docs

The client, a mid-sized school with 50+ employees (a fictitious client for this concept project), faced a significant safety issue with staff not following proper procedures during fire drills. This posed a risk to everyone's safety and jeopardized the school's accreditation. 

Staff are given a copy of the text-heavy staff handbook at the beginning of the year and are expected to go through the written instructions about the fire drill procedure. However, after repeated incidents of the staff making mistakes during practice drills,  it was discovered that the handbook was not being read. 

To address this issue, I proposed a scenario-based eLearning course, which would allow the teaching and support staff to make real-world decisions and see the consequences of their choices in a low-risk setting. The course included interactive elements, such as job aids, to reinforce proper fire drill procedures.

To make the course more engaging and immersive, several animations were incorporated to highlight the consequences of incorrect choices. The client approved and we proceeded with design and development.

I worked with a Subject Matter Expert (SME) to develop an action map and define the overall goal. Guided by the steps of the fire safety drill in the staff handbook and input from the expert, of incidents of incorrect decisions made by staff previously, we identified key actions that teachers and support staff would take to go through a fire safety drill experience successfully.

Using this information, I created an action map focusing on the five most impactful actions staff could take to complete the fire drill. The client approved the actions for the eLearning experience, and I moved forward to create a text-based storyboard.

Once the action map was approved and defined specific actions, I collaborated with the expert to create a written storyboard with different options and their corresponding consequences. Each prompt presented the learner with three possible actions, one of which was the correct choice while the other two were distractors.

When the learner chooses the right option, they will see a positive outcome and move on to the next step. If they selected a wrong answer, they would see the negative real-life consequences and have the chance to try again by clicking the "try again" button. Within the e-learning course, the learner could also refer to the fire drill steps in the form of a job aid. 

Working closely with the expert, we strived to create realistic scenarios by basing the story on past experiences of fire drills in the school. This allowed for authentic consequences and provided reasoning for making the correct choices.

Once the text-based storyboard was revised and approved, I began creating visual mockups for the scenario in Figma.  Since I was going to use Vyond to make the animations play out, I designed characters and other elements necessary for the course using Vyond. I then imported the Vyond characters and elements to Figma to create the rest of the visual mockups. This allowed me to experiment with visual elements and layouts in order to settle on something that felt cohesive and engaging. 

I was careful to keep a consistent visual style for each element, from the background to the characters. It was also important to maintain a logical narrative, which meant sourcing and editing different school setting scenes to have a realistic feel of how an actual fire drill would take place. 

Once I was content with the look and feel of my mockups, I proceeded to create everything in Articulate Storyline 360 to further refine the elements and implement interactivity. 

To start, I used Vyond to create animations for the first scenario. Then, using Articulate Storyline 360, I developed an interactive prototype that included an opening screen, an introduction to the scenario, and the fire drill steps presented as a job aid within the scenario. The prototype also featured the first step of the fire drill, which was an animated video created with Vyond. I added triggers, animations, and sounds, including the first question with correct and incorrect prompts. 

Throughout the process, I worked closely with Subject Matter Experts (SMEs) and my peers, receiving feedback as I continued to refine the animations and overall course design.

During the course development process, I received helpful feedback from a test user regarding the fire alarm sound. To ensure that learners wouldn't be alarmed by the sound, I added an interactive slide before the scenario's introduction. This slide featured buttons for the fire alarm sound, allowing learners to adjust their system volume to their preference before proceeding with the course. 

This feedback helped me to refine my designs before completing the project, allowing me to iterate and make changes as necessary.

After receiving approval for the prototype, I proceeded to develop animations for the remaining scenarios using Vyond. Once the animations were finalized, my attention turned back to Storyline, where I combined all of the scenes with the questions to engage the learner. Building upon the solid foundation provided by the prototype, the course development process in Storyline progressed smoothly. 

Since this was my first time using Vyond, I had to get creative to achieve some of the specific character actions I needed. Although it was challenging at times, I found the experience to be rewarding.

As an example, one scene required the character to open a safety bag, retrieve a green card, and hold it up. To achieve this, I had to use built-in actions in Vyond such as "pet a dog" to make the character bend down with her knee on the ground, "hiding" to make the character come to a half-bend position, and "stand with hand raised" to make the character hold up the green card. The timing was critical to making sure the animations for the bag and the green card being pulled out and held up were perfectly synchronized. 

As the project unfolded iteratively, the client requested the addition of a quiz at the end of the course. For this quiz, I proposed an engaging drag-and-drop interaction where learners would arrange the steps of the Fire Safety Drill in the correct order. 

Utilizing the built-in storyline elements, I found the process of creating the drag-and-drop interaction to be incredibly straightforward. Each step was assigned different states, which were activated when answers were submitted, allowing for immediate feedback on whether the learner placed it correctly or incorrectly. This self-correcting feature enhanced the learning experience. 

To provide ample opportunity for mastery, learners were granted three attempts to arrange the steps correctly. If they were unable to do so, a solution button became available, enabling them to review the steps in the correct order. This ensured learners had multiple chances to reinforce their understanding of the Fire Safety Drill.

Custom Visuals: To create an immersive and engaging learning experience, I challenged myself to curate and design custom visuals that transport the learner into a realistic school environment throughout the course. Using Adobe Photoshop, I edited backgrounds to seamlessly depict open doors within the scenario. This allowed for smooth transitions as the character walked out of the classroom and exited the school building. Additionally, I made sure to incorporate the safety bag in the classroom setting, as per the client's request to have it typically placed on a hook behind the door.

Another aspect that required careful attention was the portrayal of the school building with open doors as the character proceeded toward the parking lot. This presented a challenge as I needed to illustrate the character's journey from the school building to the lot. To overcome this, I employed Photoshop to extend the school background, ultimately creating a stretched-out version. I then utilized a cut scene technique to depict the characters walking into the parking lot. By carefully crafting these custom visuals, I aimed to enhance the learner's immersion and provide a more realistic and seamless learning experience within the school setting.

Staff Handbook: The Staff Handbook plays a vital role in supporting the learner throughout the scenario. As a helpful job aid, it can be easily accessed whenever additional assistance is needed. Each question within the scenario has a corresponding prompt from the handbook. This allows learners to refer to specific sections that provide relevant guidance. The handbook was chosen instead of a character as a mentor because the SME felt that in case of a real fire safety drill, teachers shouldn't be relying on other staff for support on what to do, as this could further cause delays and be a potential safety hazard. 

In cases where learners have selected the wrong choice, I incorporated the handbook prompt directly on the slides. This enables them to cross-reference and identify where they made the wrong choice. I took the initiative to highlight the specific steps they should be focusing on within those layers. 

By providing easy access to the Staff Handbook and integrating it strategically within the course, learners have a valuable resource to refer to whenever they need support or wish to review their understanding. This approach reinforces the significance of following the correct steps in the fire drill and enhances the overall learning experience.

Immersive Choice Feedback: This learning experience is designed to captivate and involve the learner through captivating visual scenes that fully immerse them in the scenario. Rather than simply being told about the potential outcomes, they have the opportunity to experience them firsthand. 

By experiencing the consequences of their choices, both correct and incorrect, I wanted learners to gain a deeper understanding of the impact their decisions can have especially in the context of such a critical safety procedure. The use of animations created with Vyond plays a crucial role in bringing this immersive learning experience to life.

Throughout this project, I have expanded my knowledge and proficiency in Articulate Storyline 360, Vyond, Figma, Adobe Photoshop, and visual design. 

The development process of this project has been a valuable learning experience. From crafting a focused Action Map to creating a detailed storyboard, these steps ensured the project remained on track, even when faced with challenges in producing specific animations required for the course. 

Exploring new software tools like Vyond and Figma has been personally fulfilling. The creative process of constructing diverse scenes in Vyond and seamlessly integrating them in Storyline has breathed life into the project. 

Looking back, if I were to undertake this project again, I would consider incorporating a printable job aid at the course's conclusion. This aid would include visual representations of each step to assist learners in recalling the fire safety procedures more effectively.