Project Type: Scenario-based eLearning experience
Audience: New café employees
Responsibilities: Action mapping, instructional design, visual/graphic design, storyboarding, prototyping, eLearning development
Tools Used: Articulate Storyline 360, Adobe XD, Adobe Illustrator, Google Slides, MindMeister
Clay's Café is a local eatery known for their amazing menu but also for their poor customer service. The café's owner had noticed a steady increase in negative customer reviews online and quickly became concerned about the future of his business. He understood that additional training for his staff was necessary, but he did not know how to go about it.
After analyzing the issue presented by the café owner, I determined that the café staff lacked customer service skills necessary to create positive customer experiences on a consistent basis. To solve this problem, I proposed a scenario-based eLearning experience that would allow employees to practice interacting with customers and resolving any issues that might arise. This eLearning experience would provide employees with a risk-free environment in which to learn how small choices can impact a customer's overall experience. The primary goals of this training were to improve customer satisfaction and decrease the number of negative customer reviews online. Once the client accepted my proposal, I proceeded with designing and developing the project.
The first step in the creation of this project was to develop an action map. I consulted a subject matter expert (SME), and together we crafted a specific and measurable goal that the project would focus on. Then, we brainstormed which specific actions employees needed to be proficient in in order to achieve that goal.
Once the client had approved of the action map, I created a text-based storyboard. While writing the narrative for this project, I kept in mind the three actions highlighted in the action map and developed scenarios that required employees to practice using those skills. Throughout the writing process, I consulted the SME to ensure the information included was as accurate and realistic as possible.
In order to scaffold the employees' learning, I decided to include two contrasting customer scenarios in this project. The first customer arrives in a calm mood and is more patient, while the second customer arrives in a frustrated mood and is far less patient. Learners must tackle the easier interaction first and the more difficult interaction second.
If the learner chose an incorrect choice, they would either be required to try again or walk through an alternate outcome with the customer where they get to read the negative review left by that customer.
Once the text-based storyboard was finalized and approved by the client, I moved on to creating visual mockups for the project. First, I downloaded the vector images for this project from freepik.com and edited them in Adobe Illustrator. After ensuring I had all of the images I needed, I began building out mockup slides in Adobe XD. I prioritized maintaining a cohesive color palette and style throughout the visual design process. In addition, I also prioritized making what the learner needed to see on the screen stand out and catch their attention.
Once the visual mockups I designed were approved by the client, I began developing an interactive prototype of the project using Articulate Storyline 360. The prototype featured the introduction sequence with the mentor character (Zach) and the first question with the first customer. By including these sections of the larger project in the prototype, I was able to highlight the writing, visual design, animations, and triggers used to make this project as engaging as possible. After reviewing the prototype, the client approved of my work and I began fully developing the project.
Due to the detailed planning I had done earlier on, the full development of this project in Articulate Storyline 360 was simple and straightforward. Once I had developed the slides for the first character scenario, I was able to duplicate those slides and make quick edits for the second character scenario.
The feedback I have received from those I have shown this project to has been very positive. Learners enjoyed the humorous dialogue and various outcomes they were able to explore. In addition, they also appreciated having a mentor incorporated into the project who provided an explanation of why a certain action was correct. One of the people I showed this project to was a former barista, and he shared that this project would have been very helpful when he was first training.
This was the most complicated eLearning project I have completed so far, and my instructional design skills and knowledge have improved significantly as a result. In particular, I feel far more confident using Articulate Storyline 360 because I had to learn much more about this tool in order to complete this project. I thoroughly enjoyed creating this project, and I cannot wait to use what I learned from this experience to improve on future projects!
If I were to go back and make any improvements based on the feedback I have received and my own thoughts, I would:
Include more accessibility features: With more time, I would definitely include more accessibility features for those who are visually impaired or have visual processing issues. Some features I could add include a voiceover option and providing alternative text for any images and buttons included in the project.
Add a progress bar: The changing facial expressions and tone of the customers was how I provided feedback to the learner on their choices throughout the eLearning experience. However, on top of that, I believe adding some type of progress bar would also be helpful in providing the learner with immediate feedback on their choices. One idea that would fit this project well would be a five-star progress bar where stars are added or removed depending on the player's choices.
Add more audio elements: With this eLearning experience, I did add a doorbell sound clip to make the project more engaging. However, I could definitely add more audio elements to this project to boost the learner engagement even more. Some ideas I have include:
Background music that changes depending on the player's choices
Sound clips that signal a correct choice or an incorrect choice
Provide more opportunities for practice: I believe the two contrasting character interactions I included in this project were effective at highlighting the different types of scenarios employees have to navigate. However, I believe incorporating even more contrasting character interactions would be beneficial as well.
<a href='https://www.freepik.com/vectors/character-motion'>Character motion vector created by pikisuperstar - www.freepik.com</a>
<a href='https://www.freepik.com/vectors/character-motion'>Character motion vector created by pikisuperstar - www.freepik.com</a>
<a href='https://www.freepik.com/vectors/character-motion'>Character motion vector created by pikisuperstar - www.freepik.com</a>
<a href='https://www.freepik.com/psd/laptop-mockup'>Laptop mockup psd created by freepik - www.freepik.com</a>
<a href='https://www.freepik.com/vectors/people-set'>People set vector created by pikisuperstar - www.freepik.com</a>
https://freesound.org/s/196379/