Fuel Your Communication Power

This concept eLearning experience helps auto-mechanic service managers build effective communication skills and better serve their customers. I designed it with a story-driven and scenario-based approach, simulating a typical customer journey at the auto repair shop to provide the learners a risk-free environment to practice taking appropriate actions in handling demanding customers.

• Audience: Service managers at automotive mechanic shops

• Responsibilities: Instructional Design, Graphic Design, eLearning Development

• Tools Used: Articulate Storyline, Adobe XD, Adobe Illustrator, Miro, Google Doc

The Problem and Challenge

The client is Pristine Auto, a small-size automotive repair shop providing auto service to customers from the local community for more than a decade. The client reached out to me because their junior auto service managers fail to communicate constructively with customers, hurting their trust in the business.

For instance, inexperienced managers often talk over customers, skip clarifying the needs, or use technical terms that confuse customers. These performance issues can bring down customers’ satisfaction with the shop and affect customer retention and referrals, jeopardizing the business.

The client looked for a solution to help their junior managers fill the skill gap in communication and improve their job performance. They requested that the solution should be flexible to access and easy to follow.

Needs Analysis and the eLearning Solution

I held a kickoff meeting with the senior manager at Pristine Auto to find out the performance issues. As the subject matter expert (SME), he shared a broad collection of typical scenarios and challenges of serving customers.

I sorted this initial information into the following categories with proposed solutions on each:

I focused my effort on performance improvement, which heavily involved managers’ communication skills. I proposed an action-oriented, story-driven, and scenario-based eLearning solution that would be structured and designed upon the SME's actual examples.

This eLearning would simulate realistic scenarios of handling customers, allow learners to make their own choices and see the corresponding consequences immediately, and access constructive instruction along the way.

Such an eLearning experience provides learners a risk-free environment to exercise their communication skills and avoid making common mistakes in real work.

The Process

I started the design process with action mapping to define the project scope and frame. With this basis, I drafted the storyboard, created visual mockups, and developed the interactive prototype in Storyline 360. After several iterations based upon the feedback collected along the way, I successfully brought this eLearning experience to life.

Text-based Storyboard

After getting the framework approved, I drafted the text-based storyboard mapping out the questions, choices, prompts, and programming notes. To meet my goal of creating an engaging and immersive eLearning experience, I crafted the storyboard with the following features:

Customer Journey - I simulated an interactive scenario that walks learners through a typical customer journey at the auto shop - from a customer’s arrival to getting the car issue(s) handled with an exemplary customer service result.

Persona - I created two personas - Ms. Lee, a repeated and demanding customer, and Mentor Leo, an auto service veteran who provides learners instructions before they make a tough decision during the journey.

Realistic Choices and Consequences - I reused the cases initially collected from the SME and re-phrased the information into realistically distracting choices and the corresponding consequences. Each consequence prompts learners if their decision would unfold a happy customer experience or the opposite.

Conversational Script - Instead of a dry scenario description, I altered my wording to make the script more conversational to bring learners a more engaging experience.

Visual Storyboard

With the final version of the slides’ visual mockup in hand, I created a visual storyboard to specify the events, animations, and interactions on individual slides. Also, the SME approved the visual storyboard before we moved into the development phase.

Interactive Prototype

After getting the visual storyboard approved by the client, I proceeded to develop an interactive prototype in Articulate Storyline 360, consisting of the title screen, the introduction section, and the Question-1 section.

This prototyping process allowed me to improve some UX/UI design features that I overlooked in prior phases. Also, I took this opportunity to practice and figure out whether or not I’d be able to bring certain featured functionalities from design to actual development in Storyline, especially the animations for the gamification.

After completing the interactive prototype, I shared it with my client and peers to test it out. I troubleshot the prototype with the feedback and ensured the functionalities we wanted were running smoothly. Meanwhile, I familiarized myself with development best practices. This way, I’d be more efficient in the full development phase.

Full Development

I finished the full project development relatively quickly. All the extensive effort in previous phases paid off in bringing the project the rest of the way. I troubleshot the technique issues along the way and meticulously tested the programming to assure the deliverables' quality.

Custom Visuals:

To make learners feel more engaged and immersed in this eLearning experience, I created a collection of custom visuals of the persona and auto-themed illustrations. Especially for the customer character “Ms. Lee,” I created more than two dozen of her illustrations with different facial expressions and postures.

Instead of text-loaded prompts, I used Ms. Lee’s visuals and conversational prompts to lead learners throughout the customer journey and directly show them the consequences of their choices.

Gamification with Spin Animations - “Perpetual VS Interrupted”:

By manipulating the timeline, layers, and animation in Storyline, I created some fun features with an auto theme. I created an infinite loop to enable the gas meter on the Mentor Introduction screen and the gear frame of the Mentor Leo buttons to animate perpetually.

While with the Progress Indicators on correct answer result screens, I set the timeline to make the indicating needle spin briefly and stop precisely at the pointed position.

UX/UI with Variables:

I used variables to build better UX/UI features on the Question slides. I disabled the selected incorrect choice by using the variables when learners return to the screen to try again, leaving only the unselected choices accessible.

Job Aid:

I also summarized the core skills delivered in this eLearning simulation and created a job aid with Adobe XD and Illustrator. The learners can download this PDF infographic - “5 Rules to Fuel Your Communication Power in Auto Service” through the ending slide after completing the scenario experience. (Check here to learn more about how I created this infographic.)

Results

From the Learners

After this eLearning simulation rolled out, some employees at Pristine Auto who tried it all found the scenarios match their daily situations of handling demanding customers. Those inexperienced in customer-facing roles gained basic actionable communication skills and now feel confident to step up and help customers out when needed.

I also received feedback from learners who were not from the automotive business or customer service backgrounds. Some found the scenarios and persona “very relatable” to their real-life experience. Some told me the choices of each question tricked them in a memorable way, hence bringing them the valuable perception of how to better help the client or customers in their business domain.

Scalability, Customizability, and More

This concept eLearning project was initially designed and developed for the auto service managers at the small-size auto service business. Nonetheless, the core actions I curated and structured cover the most practical and fundamental communication skills that any staff in a customer-facing role can find valuable and actionable. This way, this eLearning simulation has great potential for scalability and customizability, extending to all sizes and scopes of such training in auto service or other business fields.

Otherwise, there is the possibility of improving the user experience by adding voice-over to make the learning experience more immersive and engaging and, more importantly, increase the accessibility and inclusion for visually impaired learners.

Takeaways

Action Mapping

In my early phase of working with the client, Cathy Moore’s Action Map provided me with an effective approach to coping with ambiguity.

I started the needs analysis with an overwhelmingly wide range of information that the SME initially brought up. In light of action mapping, the SME and I were able to narrow the scope, identify the five immediately observable actions, and layout this project's framework.

In the future, action mapping will always be on the top of my to-do list when creating effective and impactful learning experiences to help achieve business goals.

UX/UI design experience

Throughout this project, I have made several essential improvements over the design and development phases based upon the feedback on UX/UI aspects. From how I phrased every dialogue in each scenario to which button style I should choose, I practiced extensively applying essential UX/UI principles.

I’ll continue practicing and learning more about UX/UI along the way to make my future learning projects more compelling. Especially in this digital time where our learners most likely live in all sorts of apps and websites, I aim to design and create eLearning projects that are intuitive and engaging enough to provide learners with superior learning experiences.

.

.