This scenario-based eLearning experience helps instructors and sales associates make appropriate decisions to recover customers after accidentally breaking their creations in a pottery studio. It provides instructors and sales associates a foundation for handling real-life customer service recovery situations. I also implemented xAPI to track learner behaviors and JavaScript to include a downloadable PDF certificate of completion with the learner's name and date. Parts of the scenario, xAPI, and JavaScript, have been modified for demo purposes per agreement with the client.

Audience: New and seasonal instructors and sales associates in a ceramic studio

Responsibilities: Instructional Design,  eLearning Development, Graphic Design, xAPI & JavaScript Implementation  

Tools Used: Articulate Storyline 360, Adobe XD, Adobe Illustrator, Adobe After Effects, Adobe Media Encoder, Visual Studio Code, JSHint, Veracity LRS, MindMeister, Google Docs

After assessing the biggest pain points with the client, I met and consulted with the Subject Matter Expert (SME). We defined the goal and identified the specific steps that instructors and associates should take after accidentally breaking a customer’s piece.

With that information, I developed an action map and created a text-based storyboard. I began working on the visual mockups for the scenario-based eLearning experience in Adobe XD. I also used Adobe Illustrator to create visual assets.

I created a visual storyboard for the client to see how the text and images would work together. From there, I developed an interactive prototype in Articulate Storyline 360. After the client approved the interactive prototype, I fully developed the project in Articulate Storyline 360.

To monitor the learner experience and collect data, I implemented custom xAPI to track choices and determine if the learner utilized the mentor and other relevant metrics throughout the scenario. This helped show the client where their employees were struggling the most with customer service recovery.

Then, the SME prioritized key actions that the instructor and associate must perform to make the entire experience successful. The client approved the actions for the eLearning experience, and I moved forward to create a text-based storyboard.

The storyboard was an essential part of my design process because it’s where I embedded substantial instructional practice and learning theory to make the experience ideal for the learners. 

Feedback from my client and SMEs was crucial as I wanted to ensure that the content flowed from the storyboard. I also addressed any issues with user experience and user interface design early on in the project. Some of the feedback from my client included updating the policy and having the corresponding question, mentor slide, and questions reflect the new information.

Another improvement that I made was adjusting the visual paths the learner would take to create some variation. I received additional feedback to address any user interface issues with buttons, states, and functionality.

I conducted additional testing after applying the necessary changes from the feedback that I received. Once the prototype was approved, I moved the project into full development, working in Articulate Storyline 360.

The full development of the scenario in Articulate Storyline 360 was straightforward and efficient now that all elements had been created and a programming framework for each consequence was established.  

• Custom Visuals: I sourced each visual asset from an image repository and edited them using Affinity Designer to maintain immersion and cohesive look. This included resizing, editing layers, recoloring individual elements, and merging assets.  

• Custom Animations: I achieved the airplane animation sequence by importing the customized airplane vector and setting it along a motion path timed with audio of airplane take-offs and landings. This animation bookends each consequence to maintain continuity throughout the experience and transitions to the airline’s headquarters. I also created a passenger call light used to indicate the request for assistance. A looping animation of the flashing glow around the call light was achieved through two layers fading out and into each other cued to the an airplane notification sound. 

• Prescriptive Feedback - Mentor: For each question, the learner can access a mentor named flight leader Kelly to provide suggestions for their responses. This mentor helps steer the learner toward the correct behavior while providing explanations for why that choice is effective. I created the custom mentor button using Affinity Designer to incorporate the mentor cleanly into each question prompt.   

• Gamification - Passenger Anger Meter: I incorporated the anger meter as light gamification to help boost learner engagement and contextualize the emotion of the passenger’s dialogue. Seeing the meter increase or decrease alongside choices provides immediate feedback while building toward the customer satisfaction reports. I made the decision to have the meter decrease with correct choices in order to parallel the intended de-escalation of the passenger’s anger. 

• Customer Satisfaction Reports: In addition to the anger meter, customer satisfaction reports are earned and presented at the end of the experience. The learner is initially shown a five-star rating scale followed by a detailed response from the passenger. There are three different reports a learner can see depending on choices selected. Each detailed review provides clues for the learner to help answer the question correctly if they got it wrong.  

• Scenario Branching - Diverting the Flight: One of the incorrect choices in question 2 leads the learner to question 2.5 where the situation has escalated significantly and they have one last chance to de-escalate. Correctly answering this question moves the learner along to question 3, while Incorrectly answering this question causes the flight to be diverted to a remote airport. I created a newspaper to show for this outcome to simulate the disastrous media attention of flight diversions for airlines. 

I gained quite a few takeaways about the instructional design process throughout working on this project. I will take these lessons with me as I continue to upskill and work on more learning experiences to showcase my skills. 

• Keep it Learner-Centered: I had various creative ideas throughout the process that I wanted to implement. However, before trying each concept, I asked myself questions like, “will this help keep the learner engaged in the scenario?” and, “how does this change enhance the learning experience?” By considering, I ensured that all of my decisions were made for the learner and not for myself.

• Iteration is Key: Throughout this process, I truly learned how helpful feedback could be. Your community or peers can often provide a different perspective you may not have considered. Looking through feedback helped me focus on the learner’s needs and kept me focused on delivering an exceptional learning experience for them.

• Embrace Problem-Solving: There were many times throughout this process when I ran into road bumps and struggled to fix the problem quickly. I learned that I learn best through the problem-solving process. I’m more likely to retain information and develop my skills if I work to solve a problem independently, rather than just having someone tell me how to do it.

• There’s Always a Solution: I often questioned how to use certain Storyline features to carry out my vision. Whenever something didn’t work the way I had planned, I found there was always a solution or workaround to help create the scene or trigger I had in mind. The possibilities are endless with Storyline!