All Booked Up

A scenario-based eLearning experience to help hair stylists land multiple appointment bookings

"I am in awe. For a complex project, you did an amazing job thinking through all the details. I loved how you had the thought bubble of the client eluding to whether or not answers were correct. The checklist at the very end is a great recap."

- Savitre Tubrung, Lead HRIS Analyst, Cook County Government

"I was particularly blown away by Scott's commitment to creating a more equitable learning experience by allowing learners to choose from a diverse array of avatars to represent themselves. Throughout this delightful visual experience, learners can make decisions, discover the consequences, and come away with valuable feedback."

- Shimrit Lee, Instructional Designer, Gift of Life Institute

"The artwork is not only beautiful, but it does a wonderful job of pulling you into the scenario and the realistic storytelling keeps you engaged. Scott’s understanding of ID principles is evident throughout this project from using the ADDIE model to effectively implementing Mayer’s Principles of Multimedia Learning."

- Sabrina Gonzales, Instructional Designer

"I am in awe. For a complex project, you did an amazing job thinking through all the details. I loved how you had the thought bubble of the client eluding to whether or not answers were correct. The checklist at the very end is a great recap."

- Savitre Tubrung, Lead HRIS Analyst, Cook County Government

"I was particularly blown away by Scott's commitment to creating a more equitable learning experience by allowing learners to choose from a diverse array of avatars to represent themselves. Throughout this delightful visual experience, learners can make decisions, discover the consequences, and come away with valuable feedback."

- Shimrit Lee, Instructional Designer

"The artwork is not only beautiful, but it does a wonderful job of pulling you into the scenario and the realistic storytelling keeps you engaged. Scott’s understanding of ID principles is evident throughout this project from using the ADDIE model to effectively implementing Mayer’s Principles of Multimedia Learning."

- Sabrina Gonzalez, Instructional Designer

Audience

Recently hired hair stylists

Responsibilities

Needs Analysis
Action Mapping
Storyboarding
Visual Design
eLarning Development

Tools Used

Articulate Storyline 360
Adobe Illustrator
Adobe XD
Mindmeister
Google Docs

Audience

Recently hired hair stylists

Responsibilities

Needs Analysis

Action Mapping

Storyboarding

Visual Design

eLearning Development

Tools Used

Articulate Storyline 360

Adobe Illustrator

Adobe XD

Mindmeister

Google Docs

4 Avatar
Choices

Learners can personalize the experience by choosing an avatar they relate to most

Over 160
Pathways

Unique client reactions to each answer choice of each question make the experience unpredictable and more engaging

100% Custom
Graphics

Custom made graphics offer a more realistic and immersive experience for the learner

Authentic
Interactions

Realistic interactions between the stylist and client lend credibility and relevance to the experience

4 Avatar
Choices

Learners can personalize the experience by choosing an avatar they relate to most

Over 160
Pathways

Unique client reactions to each answer choice of each question make the experience unpredictable and more engaging

100% Custom
Graphics

Custom made graphics offer a more realistic and immersive experience for the learner

Authentic
Interactions

Realistic interactions between the stylist and client lend credibility and relevance to the experience

4 Avatar
Choices

Learners can personalize the experience by choosing an avatar they relate to most

Over 160
Pathways

Unique client reactions to each answer choice of each question make the experience unpredictable and more engaging

100% Custom
Graphics

Custom made graphics offer a more realistic and immersive experience for the learner

Authentic
Interactions

Realistic interactions between the stylist and client lend credibility and relevance to the experience

The Problem

Though this is a concept project for a fictional salon called Dorado, it stems from a very real problem I discovered after talking with my own hair stylist. The problem is that newly hired stylists have excellent cutting and styling skills, but those skills are often not leading to subsequent appointment bookings.

Following the ADDIE model, I started with an analysis of the problem to discover why clients do not book subsequent appointments after their initial appointment. I discovered that the stylists lack the skills necessary to lead a quality consultation. This frequently leads to an awkward interaction between the stylist and client during the first appointment, which then leads to a lack of trust in the stylist by the client.

The Solution

I considered a variety of solutions for this problem. Instructor-led training would allow for stylists to have guided practice leading a consultation and appointment, and checklists in the form of a job aid stylists could have with them at their workstations would help them recall the important steps in the process.

However, because Dorado has locations all over the Midwest, I recommended an eLearning solution because it is the most efficient and cost effective way to reach all of Dorado’s new hair stylists as soon as they are hired. I worked with experts to discover frequent problems with initial consultations and appointments, and implemented a scenario-based eLearning solution that allows stylists to practice their skills in a realistic scenario in a risk-free environment.

The Process

Following is the process I used from analysis to implementation, with details to follow:

Action Map

I worked with an experienced stylist with over 20 years of experience who served as a Subject Matter Expert (SME), and together we developed a business goal. Branched from there are key components of a successful consultation, finalizing the action map. After analyzing the action map, the SME and I agreed that a quality consultation alone could dramatically improve subsequent appointment bookings at the end of the first appointment. As I moved  into storyboarding, I used the action map as a tool to inform the specific decisions the learners would make during the consultation.

The Action Map - Hover Over (desktop/laptop) or Pinch (tablet/mobile) To Zoom In

Storyboard

Once I identified the actions and decisions for the experience, I created a storyboard to design a real-life scenario through which the user will learn how to conduct a consultation. I wanted the experience to feel authentic, as though the user really was leading a consultation with a client. I developed the storyboard, complete with wireframe mockups and scripts for the characters, to ensure the story moved seamlessly and naturally.

The fictional client’s reactions to each question the user asks serves as feedback for the user on the quality of the question they choose to ask at each step. I set up the feedback this way rather than simply telling the user “Sorry, you are incorrect. Try again” in order to improve the authenticity of the experience for the learner. When the user sees the client’s reaction to the cut and whether they booked more appointments, they know definitively how well they did.

I included a mentor character as a way for the user to get help along the way if they need it. Adult learners prefer to be given learning content when it is timely and relevant. The mentor character is a much more organic and interesting way for the learner to “pull” the content in that moment of need.

Finally, to help reduce cognitive load, a summary screen appears at the end of the experience that shows the user which questions they asked, followed by an explanation of the correct question that should have been asked.

Samples from Storyboard

Visual Mockups

When the storyboard was complete, I moved on to visuals.

With an understanding of how visuals shape learning retention, I decided to hire an illustrator to create the graphics. The wireframes I created in the Storyboard to outline the different scenes of the experience made the process efficient for the artist, who delivered high quality artwork ahead of schedule with minimal necessary revisions.

With the artwork in hand, I created a style guide to reference throughout the build of the experience. Using Adobe XD, I designed mockups of the intro slide, interactions, questions, and reactions, followed by the ending scenes. After making tweaks based on feedback from respected peers, I moved to the next state of development.

Screen Mockups

Interactive Prototype

It was time to start creating an interactive prototype to test before creating the full project. Using the mockups from Adobe XD, it was very simple to import the designs into Articulate Storyline 360, the software I used for the final product. I programmed the first part of the interaction, just to give users an idea of how the experience would feel. The prototype was complete with animations, transitions, and audio effects. I created many iterations based on user feedback, and then it was time to start development of the final product.

Full Development

After implementing feedback from test users, I moved to full development. I was able to create complex actions and interactions, and story pathways using some of the more advanced features of Storyline.

Some of the highlights of the project include:

I wanted the experience to be challenging and truly force the user to think about their question choices throughout. Accordingly, I wrote the mentor tips carefully to give a hint, but still require the user to think carefully about their choices.

Mentor Slides From the Project

Mentor Slides From the Project.
Hover Over Image To Pause Autoscrolling. Move Mouse Away To Continue Autoscrolling.

Results and Takeaways

Even though this concept project was not actually implemented, I received many positive comments from users who experienced the final version. The SME was impressed with the realistic nature of the experience. Other test users were impressed with the avatar choice feature, saying it added to their ownership of the experience.

The feedback also suggested that the subtle animations were effective and entertaining without being overbearing. The custom artwork was a hit with all users. Hiring the illustrator was a wise investment for this particular project. And the summary screen was a feature nearly every user commented was highly effective. One user commented, “The checklist at the very end was a GREAT recap of all the selections. WOW!” Another wrote of the summary screen, “This is GENIUS!”

While completing this project, I relied on my excellent attention to detail, taking on programming challenges if they resulted in enhancements to the story or user experience. I was pleased with how the project was realistic, engaging, and, most importantly, tied closely to the business goal identified in the action map.