Proper Food Storage
This scenario-based eLearning experience is a conceptual project. It is designed to help new restaurant workers navigate food storage situations successfully in a risk-free environment.
Audience: new to the industry restaurant workers or workers who need further training
Responsibilities: instructional design (action mapping, storyboarding, mockups, prototype, full build), visual design, eLearning development.
Tools Used: Articulate Storyline 360, Adobe XD, Adobe Illustrator, Google Docs, MindMeister, Freepik.
The Problem and Solution
In the restaurant industry, employees are making food safety errors with food storage in the kitchen. These mistakes can lead to consequences such as foodborne illnesses, raise business costs, and/or the restaurant getting shut down.
While working with a subject matter expert (SME) from the restaurant industry, it became clear that employees were unaware of proper food storage practices. Employees are unsure of how to store food without cross-contamination, dispose of expired food, and label prepared food containers. These insights inspired me to create a scenario-based eLearning that allows employees to successfully make decisions about proper food storage in a risk-free environment. This allows the user to master this concept with the goal of implementing proper practices in the real world.
My Process
As I worked through this project, I used the structure of the ADDIE model. During the analysis phase, I met with an SME to gather information and create an action map. The action map was the foundation for the text-based storyboard I created as I entered the design phase. I continued to consult with the SME while designing the storyboard and made any adjustments as needed. When I received the approval on the storyboard, I began creating a visual mock-up of the eLearning solution. As I was creating the high-fidelity mock-up, I went through several iterations to get the final approval from the SME.
Once I was given the okay to move ahead, I moved into the development phase by creating a prototype. The prototype showcased the interactivity of the eLearning solution to the SME. After this, I began developing the final eLearning solution. When the eLearning solution was fully developed, I asked peers and a community of professional instructional designers to evaluate the project and provide me feedback. This allowed me to revise the solution and complete another iteration to ensure smooth functionality and consistency.
Action Map
I used a restaurant manager of twenty years as my SME for this project. I asked the SME what mistakes their employees usually make. He mentioned the major issue he has is employees not storing food properly in the cooler. As the SME informed me of the steps to store food, I created an action map using MindMeister. I jotted down all of the actions and steps that the employees should be doing.
We came up with three main areas to focus on: expired food disposal, putting away items in the cooler, and labeling prepared food containers. This insight allowed us to create the learning goal for the eLearning solution: employees will follow proper food storage guidelines 100% of the time.
Text-Based Storyboard
Action Map
After finalizing the action map, I created the text-based storyboard. This was a crucial phase in crafting the eLearning solution's flow, acting as a foundational blueprint. I began by drafting an outline and then enriched the story with details. Once I identified the key actions, I created realistic scenario-based tasks for learners.
At decision points, learners encounter the natural consequences based on the choices they make. A job aid is available for learners to assist in correct choices. This allows the learners to make choices in a risk-free environment. This method enhances learning and personalizes the user’s experience.
Text-Based Storyboard
Once the storyboard was revised and approved, I began working on the visual mock-up of the eLearning solution. I created this using Adobe XD, Adobe Illustrator, and Freepik. Adobe XD allowed me to experiment with visual elements and layouts until I could settle on the final mock-up. I started by creating wireframes for each type of slide in the scenario. I then chose images from Freepik and manipulated them using Adobe Illustrator. Once the main images I chose were created in Illustrator, I transferred them into Adobe XD and began working on the layout of the title screen and a styling board. As I continued designing the slides, the color palette helped ensure a consistent layout. Throughout the process, I made sure to keep my SME informed and got their final approval on the mock-up once it was complete. I really enjoyed this part of the design because I was finally able to see my work starting to come to life.
Visual Mock-Up
Wireframes and Mockups
Style Guide
Interactive Prototype
I developed an interactive prototype to collect feedback on the functionality of the project before diving in and developing the full project. This was the most exciting part for me because I could finally see the story in action. The prototype included the title slide, introduction, tip sheet, success meter, and the first question with a correct and incorrect consequence.
In Storyline, I focused on the design and placement of the prompt textboxes and dialogue boxes. This included button prompts that were customized based on dialogue in a scene, incorporating hover states to the buttons, and fade transitions between scenes for effect.
I also incorporated the use of Adobe Illustrator to manipulate sourced images from Freepik. For example, the main character was sourced from Freepik. Therefore, I saved all the images separately, adjusted them as needed in Illustrator, and added them into Articulate Storyline 360.
Example of slides in Storyline 360
Full Development
After collecting feedback and applying several iterations to the prototype, it was time to create the full project. The project was created in Articulate Storyline 360.
Gagne’s Nine Events
This eLearning experience is based on Gagne’s Nine Events of Instruction in the following ways.
Gain attention: I gained the learner’s attention by describing the scenario and asking if they would help Rodney complete his task.
State Objectives: The objective was to stated when Rodney asked for help. He stated “I was tasked with storing all of our food. Can you help me make sure I do it the proper way?” This tells the learner they have to put the food away properly.
Stimulate Recall, Present Content: The learner recalls information from their training and from the food storage tip sheet that is presented in the training. The content is presented on the tip sheet and also presented in the form of the scenario questions that are asked.
Provide Guidance: Guidance is provided to the learner in the form of a tip sheet. The tip sheet is located in the upper left corner on each slide the learner progresses through.
Elicit Performance: The learner’s performance is elicited in the form of questions. Learners must complete multiple choice questions and a drop-down menu question to show their knowledge in the eLearning.
Provide Feedback: Immediate feedback is given to learners as they answer questions correctly or incorrectly. If the learner answers the question incorrectly, they are faced with a consequence that could happen in the real world.
Assess Performance: The learner’s performance is assessed throughout the eLearning with scenario-based questions.
Enhance Transfer: This is shown through the eLearning being a scenario-based learning. This allows the user to make real-world decisions in a risk-free environment.
Reflection
I learned a lot from going through this project's entire instructional design process. I feel that working with the SME on the action map was the most crucial for the project because it set the basis for the entire scenario. A clear, understandable action map with all the desired actions was crucial to the project's success.
The instructional design process involves many steps, feedback loops, and iterations. It is something that can’t be rushed and requires a thoughtful mind, an eye for detail, and patience with technology. Though some steps were more challenging than others, I absolutely loved bringing my vision to life for this project.