Serving With Finesse
Articulate Storyline | Figma | Animate CC | Javascript
Challenge Winner | This demo was a winning entry in the eLearning Designer Academy’s Challenge. The demo highlights the implementation of high-quality visual design and character animation, combined with instructional design principles to create an effective learning experience.
Thought Process
Since this project was for a competition, a lot of planning went into it. The challenge was to create an orientation module for new hires focused on how to correctly set tables along with basic serving techniques.
The course content had to be created from scratch, utilizing only the reference material provided during the competition.
Design and Development
The design phase for this project was the longest. For the visuals, most of the illustrations were downloaded from Freepik and then modified to adhere to the strict style guide provided during the competition. Several of the remaining illustrations were expertly crafted from scratch.
Due to the density of information, the course was divided into five sections and were displayed in an Overview Screen. The learner can view the first 4 sections in any order and then choose the final section to view the Summary and get Course Completion Certificate.
To emphasize the topic and to create a visually rich experience, character animation were added in a few of the screens. The activity screens were quite important and dense with information. To create interest in learners, animated scenarios were added to the activity screens.
This project uses Javascript to generate a Course Completion Certificate towards the end.
