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:

• Narrowed the focus of the project to only the most critical skills the stylists need to be successful with their consultations and initial appointments
• Created a storyboard to develop the script and flow of the scenario
• Created visual mockups of the eLearning experience and collect feedback for approval
• Developed an interactive prototype of the about the first 25% of the experience and collect feedback for approval before final development
• Created the final, fully functional experience

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:

• 4 different avatar characters from which to choose for the user. This helps personalize the experience for the user.
• A name entry box at the beginning of the experience. This serves as the user’s name throughout the experience, and the client refers to that name accordingly. This also helps personalize the experience for the learner.
• Over 160 unique outcomes, which contribute to the realism of the complex interactions that occur during an initial consultation and appointment
• Custom artwork designed specifically for this project
• Authentic Interactions that simulate realistic conversations between stylists and clients. This helps the learner feel that the learning experience is relevant and meaningful, and not just another training they are required to complete.

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.