Gamified "What's a Vegan?" eLearning

This gamified eLearning course helps learners identify whether or not specific food items are vegan.

• Responsibilities: Instructional Design, eLearning Development, Graphic Design, Animation, Game Design
• Target Audience: First-year students in Nutrition & Dietics Program
• Tools Used: Storyline 3, Illustrator, Animate CC, Construct 3
• Budget: Medium to High
• Year: 2018

Process

The client leading this Nutrition & Dietics degree program wanted an interactive, engaging eLearning experience to help first-year students learn more about veganism.

I wound up designing and developing a scenario-based, gamified learning experience that was well received by the client and learners alike.

Instructional Design

After getting engaged on the project, I worked with the client to identify clear learning objectives for the experience. Since we were focused primarily on determining which food items were suitable for a vegan diet, I arrived at the following objectives:

1. Identify vegan food items
2. Differentiate between vegan food items and non-vegan food items

These objectives determined our direction for the ensuing design.

I also needed to design for engagement and motivation, so I decided to leverage scenario-based learning techniques and the personalization principle to frame the experience. I planned to use an HTML5 game to assess performance at the end of the experience.

For the scenario, I imagined that the learner would help the main character, or avatar, prepare for a vegan dinner party. To do this, they would have to help the avatar go shopping — this is where the game comes in.

The "shopping" would require the learner to move a cart at the bottom of the screen to catch the vegan food items and avoid the non-vegan food items. This experience aligns perfectly with the objectives, so I was satisfied having this as the culminating performance assessment.

With the objectives, assessment strategy, and overall design approach solidifed, I began writing content.

First, I wrote the dialogue that the learner would have with the avatar upon entering the course. This is where the avatar sets the context and introduces the learner to the goal. I also included a question about how familiar the learner is with veganism; if they already know what it is, I spare them additional info during this initial dialogue. If they do not, then I have the avatar explain what a vegan diet entails.

Next, I listed a dozen or so food items that we would show to the learner. I wrote a brief description of whether each item is vegan or not and why. I kept this content conversational, too, because I wanted to carry the personalization principle through as much of the course as I could.

With this content in hand, I was ready to move into development

eLearning Development

I began development by creating an immersive introductory scene. I wanted to learner to feel that they were transported into the world of this scenario, so I found a rich background visual and modified it to suit the needs of my project.

I used Illustrator to remove certain animals from the farm scene, then I used Animate CC to animate the windmill so that it was continuously spinning. This hinted at sustainability and evironmental conscientiousness.

I chose a character with a sunhat to serve as the avatar and main character; this added to the farm imagery.

Finally, I used buttons with fruits and veggies on them to help reinforce the vegan-friendly food items in the learner's mind.

With these important visual decisions out of the way, I moved into Storyline and began putting it all together.

I built out the intro dialogue with the main character. After that, I created the grocery store slide that allows the user to select each food item to see whether or not they're vegan and why. I used hotspots to accomplish this.

Developing the Game

With the Storyline tasks out of the way, I moved into Construct 3 game creator to develop the shopping game.

My design approach was simple: the user would control a shopping cart to catch falling food items. If they caught a vegan item, they got a point. If they caught a non-vegan item, it was game over. The learner needs to collect 25 vegan items in total for the party.

I imported a shopping cart asset and all of the food item assets into the tool. After that, I used triggers in Construct 3 to randomize which food items would fall, where they would fall from, and the speed at which they would fall.

Next, I programmed collisions with the shopping cart. If the user catches a vegan item, 1 point gets added to the user's score variable. If they catch a non-vegan item, the score gets set to 0 and the GAME OVER screen displays.

Once the game development was complete, I had to accomplish the most technically challenging task: get the game communicating with the Storyline course that I would embed it in.

I used JavaScript to facilitate this communication — whenever the user's score changed in the game, it updated a variable in the Storyline course. Then, when that Storyline variable reaches 25, the user is brought to the conclusion screen.

You can see me complete the game below. Keep in mind that the animation is much smoother and the quality is much higher in the real project.

Results

This eLearning experience led to high completion rates and very satisfied learners.

The client loved it, and the students praised it for the unique, gamified approach.

Takeaways

This project reinforced my prediction that games could serve as powerful forms of eLearning assessment. They take longer to develop than multiple choice questions, but certain types of learning objectives lend themselves very well to these gamified approaches.

I also put my technical skills to the test here — I learned a new tool, Construct 3, and I used JavaScript to facilitate communication between the output from two different tools.

Since this project, I've used JavaScript in many other ways to enhance Storyline output and push the tool beyond what it's typically capable of.