Embedded Files
problem:
problem:
A spirits manufacturer wanted to improve sales by teaching salespeople and distribution partners to highlight their brand in a cocktail.
solution:
solution:
eLearning course
tools:
tools:
Articulate Storyline, Adobe Illustrator, Midjourney, Google Docs, Figma, Miro, ChatGPT, Reaper
analysis
analysis
I was given a brief that required a training with the following learning objectives:
Identify why our brand's vodka makes the best-tasting Moscow Mule
Mix a Moscow Mule using the proper ingredients and measurements
Explain why a Moscow Mule must be served in the proper vessel
Propose at least one variation on the drink using different flavors, garnishes, etc.
As I began to research the industry and asking 'why', I recognized that although it hadn't been specified in the brief, the ultimate learning goal was to increase sales by using the points above, so I tailored the training with sales strategies in mind.
Although this was hypothetical scenario, I used my network to find an actual SME in the industry who he agreed to let me interview him across two sessions in exchange for a small gift card. I worked with him to gain perspective on not just the learning goals, but on the conditions most likely to make them effective for my audience.
Dave, one of the SMEs, has over a decade in beer and spirits distribution and has created a training manual for breweries
I asked open-ended questions that helped identify the audience, common challenges learners encounter, how learners typically engaged with training, what other learning experiences the learners would be used to, and of course, asked him to identify what key info I hadn’t asked about yet.
ChatGPT helped generate interview questions and context before meeting with the SME
In our second interview, I walked him through my prototype to vet for accuracy and note any blind spots. Based on his feedback, I corrected some inaccurate jargon and tightened up the tone to be more consistently engaging with the intended audience.
At this point, Dave was quite excited about the project and came up with loads of further suggestions to include. These were all great ideas, but since the ultimate client was the company, not the SME, I had to weigh his ideas against the learning objectives and chose not to implement several of them.
I also met with a second SME, a wine retailer, to gain a better understanding of the other side of the business relationship. Despite some scheduling difficulties, I succeeded in getting some key details from him while steering the conversation away from tangents and back to the task.
design
design
Before and after my SME interviews, I began storyboarding the course in Google Docs. Based on the interviews, I envisioned a scenario where the learner is preparing for a sales demonstration and has just a few minutes to learn the material. I briefly considered putting an actual timer on the course for authenticity, but scrapped it since speed is not essential to these learning objectives.
The course was designed to walk learners through the steps of a process (mixing a Moscow Mule). In between steps, they were presented with contextual information like sales tips, product details, and talking points. Blending the knowledge and skills sections like this encouraged retention as well as made the course feel more engaging and scenario-like, especially since the contextual info was presented as texts from a coworker "interrupting" the skills training.
Primary storyboarding was done in a Google Doc
I used Miro to refine the logical sequence of the course, which was especially useful since there were three separate branches, starting and ending with a dashboard.
The logical flow I designed in Miro closely resembled the final product
For this course, I decided to allow unlimited attempts to get a question right, since final knowledge would be tested by an assessment at the end anyway. The feedback on many wrong answer choices was designed to correct errors in skill or understanding that led to that choice.
A typical question slide
On question slides, I introduced a 3-second delay between the question and the answer choices appearing in order to give the learner time to consider the question independently. The idea of the delay comes from brain science, but I had to test the exact timing to make sure it was long enough for the learner to process, but not so long that the slide appeared to be broken.
Even incorrect answers maintained the light, easy tone of the brand
I interleaved review questions several slides after critical technical information was presented to increase learner retention.
The final assessment was designed to validate both knowledge and skills
One major design challenge I came up against was the fact that the learners would be bringing quite different levels of experience with the subject matter. Those with a bartending background would already be familiar with the recipe and would be in danger of dismissing the training if it came across as condescending, while those without hospitality experience would need much more scaffolding.
The solution? An annoying coworker.
Because activating emotion-- any emotion--during learning increases retention, I gave the help character the personality of a too-eager colleague who frequently texts the learner information she's been Googling and sales tips she's come up with.
In between questions, the character texts you sales tips and selling points
This was designed to allow learners who already know (or think they know) the information to roll their eyes at the third-party character without rolling their eyes at the training itself. They are free to "steal" her ideas and complete the training in a more comprehensive way.
Alternatively, learners who are brand new to the information might feel a little protective that their digital colleague is competing for sales and the boss's attention, and feel the urge to dig into the training to 'beat' her.
Since the learners would be a mixed group of direct employees and distribution partners, I deliberately withheld any references to where the learner or the help character worked specifically. This helped ensure the course didn't feel irrelevant to half of my audience.
In a longer training, I might have opted for a true branching scenario that began with a pre-test and delivered a different experience based on those results, but I was satisfied with this solution for a short course.
development
development
The course was fully developed in Storyline.
I opted for a flat, modern style based on the company's branding guidelines. After prototyping the design in Figma, I asked a UI designer for some feedback. Based on that, I simplified the design further and added visual cues like hover states to give more interactivity to the design.
Mocking up slides in Figma
Doing the course in Storyline allowed for scenarios that unlocked once the primary module was complete, using variables. I also incorporated interactivity like drag and drop interactions and a clickable help button.
The course includes triggers that control tutorial overlays when first visiting a slide and subtle audio and visual cues when hovering over clickable objects.
Storyline slides incorporated multiple triggers and layers for a richer experience
While I'm a creative, I'm not exactly a visual artist, so as a one-man band on this project, I used Midjourney to generate custom assets. Keeping with the flat modern theme, I created the help character as well as some other images throughout. For this project, I learned to prompt Midjourney using another picture, so once I got a single image I liked, I could iterate on the style and color scheme for different subjects by feeding it back to the AI.
A few of the incidental assets created
It took a few rounds of Midjourney prompts to get the character design I wanted
I needed some simple icons for the slide interactions, and wasn't getting icons I liked from Midjourney. So for this application, I opted to modify some stock icons in Illustrator to fit the subject. I then created the main icon (a copper mug) from scratch to fit the style of the existing icons I was using.
My icon library didn't have a good model for one of my main assets, so I used Illustrator to create a custom icon
Color variation was kept to a minimum and text was left-justified wherever possible to enhance accessibility.
I considered including voiceover in the training, but for accessibility and time constraint reasons decided against it. The training is rich in audio, but the audio is all supplemental. This has the added benefit of enabling learners to get the full experience of the course in a noisy environment like a bar, where they might be reviewing before a sales pitch.
I used Adobe Color to generate a cohesive color scheme based on the style guide
I animated the logo as a simple gif to add interest to the opening scene
Finally, I created job aids in Canva that distilled (ha) the core points of the training, but they were only unlocked after a learner completed the relevant module. These were scaled to fit a phone screen, the primary way learners would be accessing them after completing the training.
Unlocked job aid with talking points
implementation
implementation
Since the majority of users would be accessing this training on a mobile device (I learned in my research that many of my learners work out of their vehicles), I considered which authoring tool to use. Articulate Rise is a bit more mobile-friendly by default, but lacks some of the interactions I wanted to incorporate. I researched how to optimize a Storyline course to be as mobile-friendly as possible, including tweaking some of the graphic design elements.
All that being said, there are still some drag-and-drop interactions that don't play as well on mobile, and the slick hover states I designed don't translate well either. If I were doing this again, I would work on a way to switch up those two aspects so there's a uniform experience for desktop and mobile learners.
evaluation
evaluation
The final module of the training includes a subjective and objective feedback section that measures Kirkpatrick levels 1 and 2 and touches on 3.
The short but required questions immediately follow the end of the training and precede the release of the key reward, a full set of useful job aids. I've found that pausing to gather feedback at this point is the best way to get honest critique while learners are in the optimal mood for giving it.
The course solicits learner feedback before releasing the key job aids
Since this is ultimately a sales training, once implemented it will be possible to measure up to Kirkpatrick level 4 with the proper tracking.
eLearning expert Tim Slade was highly complimentary of the project.
The project received kudos from Tim Slade's eLearning Designers Challenge community, with particular praise for the design of the hints as phone messages, the assessment, and the clean UI design.
Furthermore, the piece is being featured on the eLearning Designers Academy website as an example of high quality work. I'm especially thrilled with this as a chance to give back to new learners.
Page updated
Google Sites
Report abuse