Safely Preparing Gluten-Free Food For People With Celiac Disease

I designed this concept scenario-based eLearning experience to help cooks prepare food for people with celiac disease in a shared kitchen.

Audience: Cooks at preschools (cooks in other settings may apply these principles as well, but this experience is set in a preschool)

Responsibilities: Analysis, Instructional Design, eLearning Development, Visual Design

Tools Used: Articulate Storyline 360, Adobe XD, Adobe Illustrator, Adobe Photoshop, MindMeister

Overview

The client is a well-known, popular preschool that contacted me because they had a steady rise in students with celiac disease, as well as students whose parents or guardians preferred they consume a gluten-free diet. 

The preschool lost clients in recent years because the kitchen could not accommodate their dietary needs. There was also a rise in negative online reviews regarding how the food was prepared for students with celiac disease.

I analyzed student enrollment trends, parent and guardian surveys, kitchen space, and daily meal routines. I determined that staff members lacked the knowledge and procedural skills necessary to prepare gluten-free food safely for those with celiac disease in a shared kitchen.  

I suggested a scenario-based eLearning experience that allowed cooks to simultaneously learn about celiac disease and its potential symptoms and health impacts as well as practice making key decisions necessary to prepare gluten-free food safely for those with celiac disease. 

In this eLearning experience, the learner navigates through a real-life kitchen scenario where they need to make important decisions about the process of preparing gluten-free food in a shared kitchen. Throughout the experience, a mentor character named Julia helps the user avoid cross-contamination. 

Process

I consulted with two subject matter experts (SMEs) for this project: the owner of the preschool and a specialist in food preparation for those with celiac disease. By working closely with both experts, I completed the following tasks. 

• Defined the eLearning goal and created an action map using Mindmeister. 

• Wrote a text-based storyboard with varied consequences and a strong focus on storytelling. 

• Designed the visuals for the project by iterating in Adobe XD. 

• Ensured the eLearning experience functioned as planned by prototyping in Articulate Storyline 360 and making appropriate changes when needed. 

• Developed the final product in Articulate Storyline 360.

Action Map

After identifying the problem and proposed solutions, I met again with the celiac disease subject matter expert who defined the most important actions needed for cooks to prepare gluten-free food safely with zero cross-contamination. 

Through further collaboration with both subject matter experts, I created an action map using Mindmeister, which narrowed down the list of observable actions that cooks needed to perform in order to achieve the goal.   

These actions included:

• Choosing a naturally gluten-free food 

• Cleaning shared spaces (counters) using warm and soapy water

• Sharing only certain types of pots and pans (no cast iron, wooden utensils) 

• Washing and drying shared pots and pans with an unused sponge and paper towels 

• Choosing packaged foods with the correct gluten-free label 

Text-Based Storyboard

Once the action map was complete and approved, I developed a text-based storyboard that outlined the story, questions, answer choices, and consequences.

In the eLearning experience, learners navigate through five different decision points where they must make the correct choice. All choices lead to a unique consequence based on their choice. 

To make the scenario more engaging, educational and story-based, I created a mentor character named Julia. Julia acts as a guide, and she shares her perspective throughout the experience.

Through the memories that Julia shares from her experience, learners understand the negative physical and social impacts that cross-contamination can have for people with celiac, as well as the positivity that can be imparted when correctly following the procedures.

Visual Mockups

I created my visual mockups in Adobe XD so that I could make several iterations and quickly change different elements. In addition to Adobe XD, I also utilized Adobe Illustrator heavily for this project. By using Adobe Illustrator and Adobe XD, I was able to manipulate and edit vector graphics in Illustrator and then bring them to my mockups in XD. 

I paid careful attention to design principles such as repetition and balance while also incorporating color and value to give subtle visual clues that were woven throughout the eLearning experience. For example, I chose a calming green theme because this topic can be intimidating. 

After receiving feedback on my visual mockups I used a different green color with better contrast for the buttons, created a more subtle hover state, and redesigned my job aid slide. I made numerous iterations of visual mockups before settling on the final design.  

Visual Storyboard

Once the visual design was finalized, I created a visual storyboard by combining the visual mockups and the text-based storyboard. I added programming notes and other pertinent details to guide development.

This was particularly helpful when adding the programming notes, as this project contains many animations that transition from slide to slide with no user interaction. This helped me to stay organized and saved time during the development phase. 

Interactive Prototype

Once my visual storyboard was complete, I started developing the eLearning experience in Articulate Storyline 360. I used the mockups that I had created in Adobe XD to help guide me. 

I developed the prototype through the second question. This allowed users to experience the main features of the course including: prompt slides, job aid slides, text-based question slides, and both negative and positive consequence slides which included different stories, animations, and visuals.

Once I completed the interactive prototype, I asked my peers, SMEs, and other stakeholders for feedback. I received feedback on animation length and slide transitions, and I made improvements to the experience accordingly.

Full Development

After receiving feedback and making appropriate changes to my interactive prototype, I developed the project completely using Articulate Storyline 360. The process went quickly and smoothly because of the detailed visual storyboard with programming notes I wrote. 

Some of the highlights of the project include the animation sequence where adult Julia is remembering her either positive or negative memory of being in preschool with celiac disease. I used photoshop to edit and enhance the kitchen background to create a blurred effect that the participant would instantly recognize as 'dream-like’ and then used multiple transitions and animations to get the effect of finding a memory.

Another highlight of the project is the review slide at the end. It is a way for learners to easily review the main point from each question. It also includes graphics, which act as a visual reminder of each question’s main objective. 

Results and Takeaways

This project has been received well by cooks and kitchen staff in preschools and cafes as well as those who cook in a shared kitchen with someone who has celiac disease. Learners have enjoyed the experience and have a new awareness of the physical and social impacts of celiac disease. Most importantly, they now have the knowledge and skill to avoid cross-contamination. 

I am also proud of how I integrated graphics into this project. I have no previous Adobe Illustrator experience, but I created or edited every graphic to maintain a consistent look and feel. 

Changes ranged from swapping a color to altering vectors to fit a specific purpose. For example, Julia’s altered body positions and expressions, the wilting plant stems, and altered cheese labels. 

By creating this project, I have deepened my knowledge of Articulate Storyline 360, Adobe XD, Adobe Illustrator, storyboarding, and visual design.

One of the most challenging parts of this project was to weave a cohesive story while also educating the learner on an important and serious topic. I knew that strong storytelling was an integral part of this project, and it was necessary that the adult Julia character went beyond just providing more information pertinent to each question. I edited my written storyboard several times in order for the story to flow well and resonate with the learner. 

I am confident in my new skillset, and I am pleased with how the final product has turned out and with how it has been received thus far.