Applied Roofing Safety

Date: August 2023

Audience: New and experienced roofers

Responsibilities: Instructional design (ADDIE), visual design and style guide, action-mapping, storyboarding, prototyping, audio editing, programming

Tools: Articulate Storyline 360, Adobe XD, Adobe Illustrator, Adobe Stock, Adobe Photoshop, MindMeister, Milanote, Google Docs, Epidemic Sound, Pixabay

Synopsis: This scenario-based e-learning experience helps new and experienced roofers make safe, OSHA-approved decisions while on the job.

VIEW PROJECT

The Problem

Rookie and veteran employees of the fictional Cervantes Roofing company are regularly violating OSHA standards and accruing costly fines, in addition to putting themselves and their coworkers in danger.

Employees of Cervantes Roofing all receive OSHA-mandated safety training upon being hired and have a basic knowledge of proper safety protocol. After observing workers on the job and interviewing foremen and laborers, I determined that safety violations are occurring primarily in high-pressure moments where workers are required to make snap decisions.

The Solution

Job aids like posters and OSHA quick sheets are already available to employees and are not always enough to influence them in high-stress situations. I determined that a scenario-based e-learning experience is the best solution. This type of simulation allows employees to practice high-stakes decision-making in a low-stakes environment. The gamification aspect of the learning experience makes the training fun and memorable. Additionally, an e-learning experience is repeatable at no additional cost to the company, so the training is available any time they have a new hire.

Intro screen with name-entry field

My Process

To bring this solution to life, I met with an OSHA-certified Safety Director for a local roofing company. I referenced the “Protecting Roofing Workers'' safety pamphlet on OSHA’s website and consulted with a former roofing foreman with over 10 years of experience to get the dialogue and scenario details just right.

Armed with the expertise and information I needed, I created an action map, highlighting specific roofing safety protocols and focusing on changing employee behavior rather than improving attitude or motivation. While important, these attributes are less measurable and ultimately less helpful when creating learning objectives. The three high-priority actions I pulled from the action map were: wearing a harness when working more than eight feet above the ground, creating a barricade when using scaffolding, and not using faulty or damaged equipment.

Next, I created a text-based storyboard, including visual, programming, and audio details. With the content and learning objectives in mind, I moved on to the style guide. I created two variations but, knowing that the users of this training are mostly millennial-aged men, I ultimately decided on a more whimsical option, reminiscent of an ‘80s video game. I thought the fun, nostalgic feel might pique user interest and encourage engagement, and the arcade theme lent itself perfectly to gamification–another research-based engagement strategy!

Once the details of the style guide were settled, I moved on to visual mockups (using Adobe XD) and prototyping. After several rounds of feedback from my peers and mentors, the audio, animation, and transition details were finalized, and I built out the rest of the project using Articulate Storyline. Because this is a concept project, I did not add it to a Learning Management System (LMS), but it is an optional final step for real client projects.

VIEW PROJECT

Action Map

To encourage behavioral change and avoid an “information dump,” the Subject Matter Experts (SMEs) and I came up with a business goal: "OSHA violations for the year will decrease by 50% compared to the previous year, as employees are trained in how to correctly implement safety standards on the job." We then pinpointed several actions that roofers need to perform to meet the goal. These actions served as the branches of the action map and, later, as the foundation of the storyboard.

Action map

Text-Based Storyboard

Using the highest-priority actions from the action map, I created an immersive, story-driven script, including a dynamic mentor character, believable dialogue, and thoughtful distractors. Jake, the mentor character, offers on-demand advice throughout each scenario (and some fun Easter eggs at the end!). Mentor characters are a research-backed way to provide additional expert guidance to users who would like it while making the scenario more interactive and engaging. Thoughtful touches like this help users feel empowered and in charge of their learning.

In addition to mapping out the text, the storyboard is where I included audio and visual programming details. Sorting things out at this phase not only gives stakeholders a better picture of the finished product but also streamlines the prototyping phase.

Visual Mockups

Using the agreed-upon style guide, I mocked up layouts for different types of slides in Adobe XD, a rapid visual prototyping tool. I focused on visual design principles like repetition, alignment, and contrast to create the best user experience and eliminate distracting elements. I had a LOT of fun channeling a retro video game feel and was especially inspired by the title font I found called Bungee. It was satisfying to see the project come to life and to notice improvements after applying feedback with each iteration.

Two early style guide options

Finalized style guide

Preliminary design changes to the "consequence" slide mockups

Iterations

The design decision to switch from stars to hearts as a way of progress tracking was more involved than it may appear! Initially, I imagined users would earn stars for each correct answer choice and “win” the module by collecting all three. I later decided users would lose hearts for each incorrect answer choice. This felt truer to the feel of a video game and made the stakes for an incorrect choice a little higher (it packs more punch to lose something!). I also went through several color options for the hearts and tried everything from red to orange, to purple. I finally settled on a shade of pink that felt cohesive with the rest of the style guide.

Mockup of the entire project

VIEW PROJECT

Interactive Prototype

I brought the project to life using Articulate Storyline 360. I used Adobe Stock, Freepik, Adobe Illustrator, and Adobe XD to find, edit, and manipulate graphics, and online music libraries for audio. I edited the audio directly in Articulate Storyline.

For the prototype, I built the introduction, the first scenario and its consequences, and the introduction to the second scenario. This provided my peers and mentors with enough substance to offer critique and visualize how the project as a whole would look and function. An added benefit was that I only needed to apply changes to a small portion of the project. After applying helpful feedback, I was ready to finish building out the program.

Behind-the-scenes: Programming in Articulate Storyline 360

Full Development

With the feedback from the prototype in mind, I developed the second and third scenarios, the multiple conclusions, and the recap of the learning objectives. I used variables to track users' answer choices and route them through the corresponding pathways. Hearts displayed on-screen signify learners' progress.

I designed this scenario to have three custom endings. The “You Win!” pathway is only available if the user ends the learning experience with all three hearts intact. There is a “Game Over” pathway with a restart button if a user misses all three questions and a “Nice Try” pathway if a learner answers some, but not all, questions correctly.

Variables work behind-the-scenes to display users’ hearts based on correct answers

This success screen displays after three correct answers

Game Over screen appears after three incorrect answers

Review screen: Users' answers are displayed using intuitive icons and can be selected to reveal more information about each answer choice

Project Takeaways

I received excellent feedback on this project, with most users remarking how fun and engaging it was. My favorite comment was, "It’s so good. As I was watching and interacting with it, my children thought I was playing a game. The music and the screen were so attractive to them that they, too, got engaged."

My goals were to create an experience that was impactful, engaging, easy to navigate, and, ultimately, a catalyst for change and improved behavior. I feel confident that this project met those goals. I was reminded throughout the process of the importance of a strong needs analysis. Listening carefully to (and asking the right questions of) SMEs, understanding the client’s end goals, and mapping out specific behaviors are were crucial to developing this module.

LET'S CONNECT!

Managing Your Time

Award-Winning E-Learning

Programming a Button

Software Simulation

Moscow Mule 101

Mobile E-Learning Sample