Andrew Martin - Instructional Designer

A scenario-based eLearning experience

This scenario-based eLearning experience helps train restaurant staff members to safely prepare and handle gluten-free food. It provides specific strategies that kitchen staff members can utilize, with an emphasis on hygiene and communication.

Audience: New members of kitchen or service staff at a restaurant

Responsibilities: Instructional Design, eLearning Development, Graphic Design

Tools Used: Articulate Storyline 360, Figma, GIMP, Visual Studio Code, Google Docs

Problem & Solution

The client is Gus’s Kitchen, a restaurant located next door to a dedicated gluten-free brewery. Gus's would like to partner with the brewery and serve food next door, but their current food safety protocols do not include gluten-free food preparation. The brewery will only agree to partner with Gus’s Kitchen if they agree to take necessary steps to ensure food safety for their customers.

New and seasonal restaurant workers have little experience dealing with the specifics of this type of dietary restriction. Managers at both establishments have received complaints that Gus’s current gluten-free offerings have made customers with a gluten allergy sick. As a result, regular patrons of the brewery following a gluten-free diet refuse to eat at Gus’s.

In order for Gus’s Kitchen to expand their clientele to include these regular patrons of the brewery, they need to establish themselves as a reputable and safe option for the gluten-free community. There is a large amount of trust involved for these patrons, and even small mistakes can drive a customer away for good. Providing thoughtful accommodation and positive experiences will help Gus’s develop and maintain strong customer relationships that are essential to the business’s success.

I developed scenario-based eLearning that allows restaurant staff to make decisions about gluten-free food preparation in a risk-free environment. Scenario-based eLearning highlights the real-world consequences of common mistakes in a memorable way, and provides a space for employees to practice following the correct protocol.

Process

I adhere to a medically prescribed gluten-free diet, so I acted as the Subject Matter Expert (SME) for this project. I defined the goal and identified the specific steps that kitchen and service staff should take while preparing gluten-free food.

I developed an action map that highlights the specifics of each food preparation step, including customer interaction. Afterwards, I created a text-based storyboard and began working on visual mockups in Figma for the scenario-based eLearning experience. I used GIMP to create visual assets.

I created a visual storyboard in Figma to see how the text and images would work together, and illustrate the overall flow of the experience. Afterwards, I fully developed the project in Articulate Storyline 360.

Action Map

Acting as SME, I identified actions that kitchen and service staff would need to take to prepare gluten-free food successfully. I developed the action map to define the overall goal, while making sure each action tied back to the business need.

Text-Based Storyboard

Once the action map was finished and defined specifics, I developed a text-based storyboard to create the choices and the consequences. As the learner goes through the scenario, each question slide proposes three options. Questions were crafted to be tricky in order to emphasize the subtle attention to detail and care needed to prepare gluten-free food.

If the learner chooses the correct action, they will progress in the scenario. If they choose the wrong action, the learner will see the real-life consequences of losing a customer. Afterwards, the learner can click the “try again” button. At any time during the scenario, the learner can seek help from a question bubble before selecting their choice.

Visual Mockups: Figma, GIMP

With my text-based storyboard outlined, I moved into creating visual mockups. I used a clean and bright color scheme with additional supporting colors, typefaces, and stock photography.

I used GIMP and Figma to manipulate photos, infographics, and vector graphics to create custom visuals for the project. I used the entire canvas to immerse the learner in a kitchen environment.

Color Scheme

Question Slide

Correct Answer

Info Slide

Full Slide Asset

Full Development: Articulate Storyline 360, GIMP

I developed the final project in Articulate Storyline 360, with the addition of GIMP for image manipulation.

Features

Custom Visuals: I edited stock photography to create custom visuals. Each image was selected to illustrate an important action or event occurring in the restaurant.
Reactive Elements: Information slides feature interactive elements like hover events and click events. On some slides, learners are prompted to use their device input to reveal chronological information. Other slides prompt learners to reveal information by clicking on information cards before proceeding.
Choice Feedback: As the learner navigates the experience, they receive feedback for their choices. Correct answers are clearly rewarded with a golden checkmark and congratulatory text. Incorrect answers present a red "X" and color-shifted stock photography that illustrate the gravity of taking the wrong actions when preparing gluten-free food. When a learner answers a question incorrectly, they are prompted to try the question again.
Hint Bubble: The learner has access to a hint bubble to assist them during question portions of the experience.

Reflection

Finishing this project provided me with several key takeaways:

Articulate Storyline 360: This project emphasized the importance of implementing timeline manipulation, conditions, variables, states, custom motion paths, as well as some other tricks. I learned to use idiosyncratic features of Storyline to my advantage — for example, on some slides I animated informational text outwards from a single line in the middle of the page. Animation origin is not a setting available by default in Articulate Storyline 360, however, I was able to implement it by using invisible scroll panels to control visibility of the text.
User Experience (UX): Page layout and transition animations in this project were designed to be accessible across devices with different screen sizes and input types. I believe in designing a clear, familiar user experience.
Project Scope: During my action map planning, I identified actions that a restaurant should take to maintain gluten-free food safety. Some of these actions ended up being outside of the scope of this training scenario. These actions included implementing a menu redesign, as well as auditing ingredients and suppliers at a regular interval.

As an instructional designer, I had fun planning and organizing all phases of this project. Gluten-free food safety is important to me — I'm excited to share my knowledge with others who may not be aware of the diet's characteristics.

Gluten-Free Food Preparation