Customer Service That Keeps
The Customer Coming Back

Overview

I created this scenario-based eLearning as a concept project for a fictious auto body shop. The goal for this project is to help current and future Customer Service members work to create a successful relationship with customers in order to have them continue to choose their services in the future.

Audience: New Customer Service members and current members who struggle with interacting with customers

Responsibilities: Instructional Design, eLearning Development, Visual Design

Tools Used: Articulate Storyline 360, Adobe Illustrator, Adobe XD, Mindmeister

Experience the Project

Problem and Solution

An auto body shop had been noticing issues with poor customer reviews being left about their business, as well as a slowly shrinking customer base. After looking through the reviews and speaking with some previous customers, we were able to identify that customers did not feel as if the Customer Service members were understanding enough when it came to their issues. Customers also expressed that those they spoke with did not describe the issue with their vehicle in a way that they could understand.

I proposed a scenario-based eLearning experience that would allow Customer Service members to practice interacting with a customer, identifying what their issue might be, interacting with the customer throughout the repair process, and checking in with the customer after the work had been completed. An important aspect in creation of the experience was to allow those taking the course to make choices and see the consequences of their decisions in a risk-free environment.

Process

I began the process by speaking with a Subject Matter Expert (SME) to develop an action map to be able to develop a goal for the overall experience. By previously identifying issues that customers were frequently having, we decided that we would measure progress through tracking customer reviews. My first step was to work with the SME to take our actionable goal and convert it into a working action map.

Action Map

After identifying the overall goal with the SME, we were able to create branching methods that sales members would learn about that would help them create lasting, positive relationship with customers. I then broke down these methods into more specific information that sales members would use to complete tasks laid out for them. After planning out this information, I created an action map which was then reviewed and approved by the SME.

Text-Based Storyboard

After the action map was completed, I worked with the SME to create a realistic scenario that I would initially display with a text-based storyboard. I created three questions that the user would have to navigate through within the scenario in order to progress to the next step. Each question was designed to have one correct selection and two incorrect selections, with each choice having a separate consequence for the user to experience.

Having relatable consequences was important for the scenario because I wanted to create questions that users might have experienced before, or have heard about from others that have experienced something similar. Users that were unsure of how to answer questions would be able to access a quick hint through a mentor button. By including this with each question in the scenario, I wanted the users to feel supported if they were unsure, not punished because they were having difficulty answering the questions.

I first created the storyboard with just text in Google Docs, but after finding a great template, I was able to display each and every slide in a cleaner way. By organizing my information, I was able to show the prompts or questions for each slide, along with any visual or programming notes that would occur as well.

After the storyboard was reviewed and approved, I moved onto prototyping the scenario in Adobe XD in order to give a better visual of the scenario before full creation.

Visual Mockups

Using Adobe XD was one of the largest creative parts in the creation of this scenario that I greatly enjoyed doing. I was able to design each slide with the feel that I wanted the content to have, being both pleasing to look at, as well as, making each slide easy for the user to experience.

One of first steps I took was to try and pick out a color palette that I felt would make sense for an auto body shop. I played around with a couple of different options that had more neutral tones, nothing that was too flashy. After choosing the color scheme that I felt was what I was looking for, I then edited my chosen assets in Adobe Illustrator.

By designing the scenario through a mockup, I was able to show my client a step-by-step vision for the overall scenario, as well as being able to take any feedback into account and make adjustments. After the client approved of the visual mockup, I was able to move onto creating an interactive prototype of the scenario.

Interactive Prototype

I first built my prototype using Articulate Storyline 360 consisting of the introduction slides, scenario introduction, the first scenario question, and the consequences from each choice. As the prototype was only meant to be a “first look” of sorts, I also wanted to display the slide animations and timings that I wanted to use, as well as button functionality. After the basic framework for the scenario was created, I submitted the prototype for feedback and made changes based on the information that I was given.

Full Development

After receiving approval on the prototype, I started to fill out the rest of the scenario with the same process that I had for the first question and consequences. One of the fun parts that I included was a progress bar that worked via a variable trigger, showing progress through the scenario to the user. Making sure that all of the triggers worked to progress the course, working with setting values that the bar would recognize, took some time to work out, but the end product was definitely worth it.

I also wanted to add a certificate of completion at the end of the course that users would enter their name upon completion of the scenario, and the certificate would have their name and the current date populated onto it. It was my first time working with JavaScript, so it took some ironing out, but it came out pretty well in the end.

Results and Takeaways

I learned a lot throughout the process of creating this project, my favorite was learning how to create the Javascript for a certificate that students would download or print after completion of the scenario. My previous knowledge of Javascript was very minimal, and it took a few attempts, as well as help from friends looking at the code for a missing number, but I found process of creating the code and the end product very satisfying.

Given the chance to do a similar project in the future I would like to spend more time incorporating audio elements to the scenario. I liked including the ringing sound of the phone to allow the user to be more immersed in the text on screen, which I would really like to find ways to include more audio throughout the scenario to mimic the same atmosphere. I would also like to include more pathways throughout the scenario choices to end up at different end products for the user. Rather than a simple multiple-choice scenario that gives the user multiple chances to achieve the correct answer, I would like to create multiple pathways for user to end upon completion of the scenario.

Overall, I had a great time in the creation of this project. I think I have grown greatly as an instructional designer throughout the creation process and was able to continually evolve the creative bone in my body each and every day.