Minimize Pre-Consumer Food Waste

Overview

Squamil Elementary (a fictitious client for this concept project) realized that the environmental protection practice was not implemented effectively in the school kitchen, as the pre-consumer food waste weight record was showing an upward trend. This was going against the school’s effort in promoting environmental protection, as well as resulting in higher food cost due to food wastage.

After analyzing the procedures and speaking to the Head Chef, the subject matter expert (SME) throughout the project, I determined that the kitchen team members lacked the awareness of the best practices needed to minimize pre-consumer food waste. 

I proposed a scenario-based eLearning experience, where learners need to make real-life decisions necessary to minimize pre-consumer food waste while navigating through a typical day in the school kitchen as a chef, without sacrificing any food resources.

 The eLearning also shows learners the realistic consequences of the most common mistakes. Seeing these consequences and practicing the correct actions throughout the experience will help them remember and avoid making the same mistakes in the real world.

The client accepted my proposal and we proceeded with the project.

Process

The creation of this eLearning was an ongoing process with constant feedback and user testing. The final polished version was developed with multiple iterations throughout the process below.

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

• Wrote a text-based storyboard with various consequences. 

• Designed the graphics and mock-ups in Adobe Illustrator and Adobe XD respectively. 

• Ensured the eLearning experience functioned as planned by prototyping in Articulate Storyline 3. 

• Developed the final product in Articulate Storyline 3.

Action Mapping

After the initial discussion of the problem and the proposed solutions, I consulted with the SME to first establish the overall goal. Then, I developed an action map by identifying actions that are necessary to keep the pre-consumer waste to a minimum, but are often performed incorrectly or neglected.

The action map revealed five high priority actions that were most crucial to minimize pre-consumer food waste. After a more in-depth review, the action of to “get most out of the food” actually required learning of the trimming techniques and was ingredient-dependent, so I recommended hands-on training for that action instead. The remaining four actions became the foundation of the entire eLearning experience and helped guide the development of the text-based storyboard.

Text-Based Storyboard

Once the action map was completed and approved, I developed a text-based storyboard that outlined the questions, answer choices, and consequences, and incorporated them into a cohesive narrative.

In this eLearning experience, the learner will go through four scenarios where they need to make the right decision in order to make progress through a typical day in the school kitchen as a Sous Chef. The decision points are derived from the four key actions identified in the action map with one correct choice and two distractors.

All choices lead to a unique consequence, and selecting an incorrect choice would lead the learner back to the question to try again. I created a mentor character named Adrian, so the learner could seek help from her at any point before selecting an option for each scenario to simulate the guidance of an actual kitchen team leader.

Visual Mock-Ups

I moved on to create the layouts for each slide type, such as opening, prompt, question, etc, in Adobe XD after the text-based storyboard was approved. Adobe XD allowed me to experiment and change elements quickly, so I was able to make multiple iterations easily until I was settled on the final design. I also utilized Adobe Illustrator extensively to manipulate various assets sourced from freepik.com to create custom vector graphics that matched the color palette.

After making numerous iterations based on the feedback received on my visual mock-ups, I was satisfied with the overall look and feel of the mock-ups, and I carried on to the full development on Storyline 3.

Interactive Prototype

Once the overall visual design was agreed upon, I created an interactive prototype on Adobe XD based on the mock-ups. The prototype consisted of the opening, scenario introduction, mentor introduction, the third and last question with correct and incorrect consequences, and review. This provided the client the opportunity to test the functionality and experience the flow of the project.

I incorporated smooth transitions and animations on each prompt and slide element to maintain narrative immersion. I also prototyped custom animating food waste bin on the consequence slide with motion paths and audio, which were sourced from Youtube, and were then trimmed and altered in Goldwave. The prototype also included the food waste measuring scene animation to end the storyline that mirrored the last task in the kitchen. 

I sought feedback from my peers, SME, and other stakeholders on the look, feel, and overall experience of the basic framework. I received comments on the transition time, color of the disabled state buttons, and the action required to enable the continue button on the mentor introduction slide. I made the corresponding adjustments and proceeded to the full development in Storyline.

Full Development

The full development of the scenario in Articulate Storyline 3 was straightforward and smooth as all the elements and programming framework for each consequence were established in the earlier storyboard and prototype.

Features

Results and Takeaways

I shared the completed project with my network online and had received compliments on its polished look as well as its engaging and realistic dialogue. 

This project allowed me to have a deeper knowledge in Articulate Storyline. The animations created had seamless transition and movement, which depended on the manipulation of the trigger, motion paths, variables, and conditions on the timeline. It was very rewarding to master the animation functionality of Storyline, so that the static graphics could be transformed into smooth animation without the help of external software.

I am also proud of how I integrated graphics into this project with no prior experience in Adobe Illustrator. I was able to create or edit every graphic to maintain a consistent look and feel of the project. The edit ranged from changing colors to altering vectors, such as changing character’s expression and posture.

My creativity mind was also awakened by this project, as I had to come up with a cohesive story while educating the learner on the actions required to achieve the learning goal. I consulted with the SME to understand the daily routine in a school kitchen and made edits to my storyboard to ensure it flows well and resonates with the learner while still being realistic 

This project had given me the opportunity to work with a SME, integrate feedback, and learn new programs and tools. I have grown significantly as an instructional designer and eLearning developer, and am confident in my new skillset.