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

Problem and Solution

The client is Fire Me Up Studio, a large ceramic studio that is in the process of franchising. The client reached out to me because new and seasonal instructors and sales associates fail to follow up with customers when their pottery projects are accidentally broken.

Unfortunately, this often results in managers handling customer service recovery calls. The sales associates’ lack of accountability and promptness leads to more frustration and lost customers. Maintaining strong customer relationships and providing positive experiences are essential to the business’s success.

New and seasonal instructors and sales associates have little to no customer service recovery experience. They also regularly fail to document when pieces break or adjust inventory to reflect the loss. 

I recommended scenario-based eLearning that allows instructors and sales associates to make decisions regarding customer recovery in a risk-free environment. In addition, scenario-based eLearning will show instructors and sales associates the realistic, memorable consequences of the most common mistakes. Seeing these consequences and practicing the correct actions will help them avoid making those mistakes in the real world.

The client recognized that the eLearning experience would help resolve their pain points and signed off to proceed with the solution.

Process

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.

Action Map

I worked with a Subject Matter Expert (SME) to develop an action map and define the overall goal. I guided the expert to identify actions that instructors and sales associates would take to go through a customer service recovery experience successfully.

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.

Text-based Storyboard

Once the action map was approved and defined specific actions, I worked closely with the expert on developing a text-based storyboard to create the choices and the consequences. As the learner goes through the scenario, each option proposes three actions: a correct choice and two distractors.

If the learner chooses the correct action, they will see the positive consequence and progress in the scenario. If a wrong action is selected, the learner will see the real-life consequences and are provided with a “try again” button that leads them back to the question. In the scenario, the learner can seek help from a mentor at any point before choosing the options for each step of the scenario.

Working with and receiving feedback from the expert helped me develop a realistic scenario. We focused on creating a story that mirrored the experiences in the studio. This helped create authentic consequences and provided the “why” when making correct choices.

From there, the client reviewed and approved the text-based storyboard created with the help of the subject matter expert.

Visual Mockups: Adobe XD - Adobe Illustrator

After the client approved the text-based storyboard, I moved into creating mockups for the scenario-based eLearning. The client and I discussed using their brand’s color schemes with additional supporting colors, typefaces, and visual assets.

I used Adobe Illustrator to manipulate various assets and to create custom visuals for the project. I created visuals that were full-slide, supporting the question-slides and one for the mentor-slide. Additionally, in Illustrator, I made a custom mentor button and a broken pottery piece.

I moved on to Adobe XD to create layouts for opening slides, prompts, questions, and the mentor slides. Once designs were agreed upon with the client’s feedback, I laid out the rest of the visuals with the slides.

Throughout the scenario, there are intermittent scenes of visuals to help reinforce the story. I intentionally added dash lines to create visual movement within the slides, which the client also loved.

Interactive Prototype

For this client project, I used Articulate Storyline 360 to create the interactive prototype, which I had planned out visually in Adobe XD beforehand. The prototype consisted of the opening screen, an introduction to the scenario in which the learner meets the mentor, and the first question with correct and incorrect prompts.

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.

Full Development: Storyline 360 - Adobe Illustrator - Adobe After Effects - Adobe Media Encoder

I developed the final project in Articulate Storyline 360 with the addition of xAPI and JavaScript. I created custom visuals in Adobe Illustrator from assets in an image repository. Once the learner completes the scenario experience, they are issued a certificate with their name and date.

Features

• Custom Visuals: To create an immersive learning experience, I created visuals that take the learner into the ceramics studio as they navigate the scenario. Each full slide scene pans and zooms to focus on the following action in the scenario.

  To achieve this immersive experience, I created the images using Adobe Illustrator, published them as a 4x PNG, and then imported the PNGs into After Effects. I changed the position and scale using After Effects to accomplish the panning and zooming action in the image.

  Once I achieved the desired look for each of the full slides, I exported each image into the Adobe Media Encoder to create MP4 files to import into the Articulate Storyline project.

  I designed supporting visuals for the question and answer slides. Also, I created the mentor button that transports the learner into the mentor slide and the mentor visual if they are in need of additional support.

• Visual Paths: Throughout the scenario, there are visual paths that move the prompts in various directions. I added dash-lined visual paths into the experience to create an animated look. When a person chooses a distractor option, the path brings them back to the “try again” button which brings the learner back to the question.

• Broken Pottery Piece: A broken pottery piece gets restored when the learner chooses the correct actions in the customer service recovery scenario. When the learner successfully gets to the end of the experience, they will have fully restored the pottery piece.

• Mentor: The learner can access a mentor named Kaolin to assist them in the scenario if they feel that they need support. Each question has a corresponding mentor prompt within it.

• Choice Feedback: As the learner navigates the experience, they will receive feedback for their choices. When they choose the correct answer, it will reinforce why their action would be a good choice. 

  If the learner chooses an incorrect choice, it will provide them feedback on why their decision is incorrect and what they should do as the correct action. Also, anytime a learner chooses an incorrect choice, they are looped back to try again.

• Certificate: I used Adobe Illustrator to create a custom certificate for the ceramics studio. Once the learner has completed the customer service recovery scenario, it leads them to a slide that asks them to type in their name and click a submit button that generates a PDF certificate. 

Once the project was fully developed in Storyline and reviewed by the client, I moved to the next phase of customizing the experience by implementing xAPI and JavaScript.

xAPI, JavaScript, & the LRS

The client was interested in understanding where their instructors and sales associates were having the most trouble in the process. They also wanted verification of the instructors and sales associates completing the learning experience to keep on file in each studio. 

I implemented xAPI to track learner behavior within the learning experience, and I set the client up with a Learning Record Store (LRS) to collect the data.

This is some of the data collected:

• Correct and Incorrect Choices: This data helps capture whether instructors and sales associates selected the correct or an incorrect choice. For every correct choice, a true statement would be generated within the LRS. Any wrong decisions would generate a false statement in the LRS. The learner receives one(1) point for each correct choice, with a max score of six(6) points.

• Mentor Prompt: I added additional xAPI statements so the client could see if the learner utilized the mentor and if they completed the scenario. This data helps the client understand whether or not the mentor prompt helps learners answer correctly and if the learner utilizes the prompt after answering incorrectly.

• Completion: Once the learner completes the scenario-based experience and attains six(6) points, the max score, a true completed assessment statement is sent to the LRS.

I added additional JavaScript at the end of the experience. I used JavaScript to execute a certificate download that displays the learner’s name and date of completion. The learner or client can choose to have the certificate emailed, printed, or stored in a file on a device.

The learner can choose to “restart” or “end” the experience. If they decide to “end” the experience, the Javascript will execute and redirect them to the studio website. In the demo version, the learner will be redirected to the project page.

Final Testing

I conducted final testing by having the client, SME, studio manager, and a small pool of learners participate by completing the scenario-based eLearning experience. I wanted every person who would interact with the learning experience to provide feedback from the learning experience.

The feedback provided from the testing helped make final adjustments to the course before it was launched to all instructors and sales associates. Additional feedback from the testing consisted of minor button functionality tweaks, adding a layer to the certificate slide to let the learner know that their certificate was processing and final adjustments to the story in the scenario. 

This process ensured that the tool functioned correctly for the learners and provided the client with a quality product. Customer metrics will be tracked over time and analyzed where customer service recovery is performed to make necessary adjustments to the training to help address future employee pitfalls.

Reflection

The process of creating the Customer Service Recovery Scenario has provided me with several key takeaways. 

• Visuals: The client allowed me to have creative freedom in how the project would look aesthetically. The client and I discussed incorporating Fire Me Up’s color scheme to keep within the brand. We also discussed certain aspects of the actual studio and how they could tie into the story visually. 

  I enjoyed creating the full scene images to act as a visual break for the learner as they went through the experience. As I created the supporting images to accompany the question slides, I tried to pull an element that would visually support the question. 

  I kept the image on the mentor slide consistent to avoid taking away from the important information that the learner would need. A final visual touch that I enjoyed was creating a broken pottery piece, and as the learner would go through the experience, it would mend back together. 

• New Programs: This project helped me explore new programs such as Adobe After Effects and Media Encoder. Although they were used for small details within the learning experience, they made a huge impact and gave it a personalized touch. 

  I also used Visual Studio Code and JShint to implement xAPI and check to make sure that my code was working correctly. These are programs that I plan to use in future projects.

• Articulate Storyline 360: I created moving pathways that largely relied on manipulating the timeline in this project. This project emphasized using conditions, cue points, and variables to make the dash lines move, pause, and resume movement throughout the experience. 

  I utilized movement paths for slides to move in the direction of where the path ends. It’s something that I would want to explore in future projects. I enjoyed making the pottery piece look animated; I would like to try other variations to create different animations. 

• Code: This project has pushed me to expand my skills in xAPI and JavaScript. To go one step further and be able to capture quiz-like feedback has been a great experience. It has allowed us to see where the learner needs some support and use the mentor option to help them in their learning. Being able to create and generate a certificate post-experience helped me take it one step further within Storyline. 

• User Experience (UX):  User experience has always been an essential element in creating any tool and learning experience. Once all data is in, I would like to survey the learners for future improvements in their experience. 

The project allowed me to work with a client, SMEs, managers, and learners to create a scenario-based eLearning experience. It provided a chance for me to grow as an instructional designer and eLearning developer.

Creatively, as a learning experience designer, I had a blast creating custom scenes for the client to bring the project to life. I look forward to seeing the instructors and sales associates reach the goal, have the data show positive results, and impact the studio.