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

Fire Me Up Studio, a ceramic studio preparing to franchise, approached me because new and seasonal staff were failing to follow up with customers when pottery projects were accidentally broken, leaving managers to handle customer recovery.

This lack of accountability led to customer frustration and loss, threatening the business. Staff also lacked experience in customer service recovery and often failed to document or adjust inventory for broken pieces.

I recommended scenario-based eLearning to let employees practice customer recovery decisions in a risk-free environment, helping them avoid common mistakes. The client agreed, recognizing this solution would address their challenges.

Process

After identifying the client’s key pain points, I consulted with the SME to define goals and outline steps for instructors and associates following a customer incident. I then developed an action map, created a text-based storyboard, and designed visual mockups in Adobe XD, with assets in Adobe Illustrator.

I presented a visual storyboard, I built an interactive prototype in Articulate Storyline 360, and upon client approval, fully developed the project. To track learner engagement, I implemented custom xAPI to collect data on choices and mentor use, revealing employee challenges in 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

After the action map was approved, I collaborated with the expert to develop a text-based storyboard outlining choices and consequences. Each scenario presented the learner with three actions: one correct choice and two distractors.

Correct choices led to positive outcomes and scenario progression, while wrong choices showed real-life consequences with a "try again" option. Learners could also seek help from a mentor before making their selections.

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 Assets: Adobe Illustrator

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. 

Visual Mockups - Adobe XD

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.

Client and SME feedback was crucial to ensure content flowed from the storyboard and to address any user experience and interface issues early. Based on feedback, I updated policy content, adjusted questions and mentor slides, and varied the learner's visual paths. I also fixed issues with buttons, states, and functionality. After applying these changes, I conducted additional testing, and once the prototype was approved, I completed full development 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 designed visuals that bring learners into the ceramics studio, with each scene panning and zooming to focus on key actions. Using Adobe Illustrator, I created images, exported them as 4x PNGs, and imported them into After Effects for position and scale adjustments to achieve the desired panning and zooming effect.

  After finalizing the slides, I exported them as MP4 files via Adobe Media Encoder for use in Articulate Storyline. I also designed visuals for the question slides and a mentor button, which transports learners to the mentor slide for 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 with the client, SME, studio manager, and a small group of learners, gathering feedback to refine the eLearning experience. Their input led to final adjustments, including minor button tweaks, adding a certificate processing layer, and story refinements.

This process ensured a quality product that functioned correctly for learners. Customer metrics will be tracked over time to adjust the training and address future employee challenges in customer service recovery.

Reflection

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

• Visuals: The client gave me creative freedom with the project's aesthetics, and we agreed to incorporate Fire Me Up's color scheme for brand consistency. We also discussed visual elements from the studio to tie into the story.

  I created full-scene images as visual breaks and designed supporting images that aligned with the question content. To maintain focus, the mentor slide visuals remained consistent. One final touch I enjoyed was designing a broken pottery piece that mends as the learner progresses through the experience.

• 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 expanded my skills in xAPI and JavaScript, enabling me to capture quiz-like feedback to identify where learners need support and use the mentor option effectively. Additionally, generating a post-experience certificate pushed my capabilities 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.