A workplace eLearning scenario designed to help keep communications and conversations appropriate in the office.
Audience: Employees of a small chemical sales company
Responsibilities: Instructional design (action mapping, storyboarding, mockups, prototype, full build), visual design, eLearning development
Tools used: Articulate Storyline, Vyond, Figma, Mindmeister, Google Docs
Inclusive Workplace Conversations
The Problem
The subject matter expert (SME) works for a chemical sales company in their human resources department. A problem she noticed within the workplace involves coworkers bringing up inappropriate topics to discuss in a work environment. This seems to be done unintentionally and without malice, but is negatively affecting a variety of the employees. She attributes this issue in part to the company’s wide range of employees from across the country and from other countries around the world.
The Solution
Speaking with my SME, I decided to use a scenario-based eLearning to let the employees make decisions about workplace conversations in a risk-free environment. Story-driven eLearning such as this one is authentic and realistic. It can provide consequences without as much risk, and allows workers to reach for a goal. In the eLearning, we discussed asking open-ended vs. pointed questions to coworkers, keeping compliments to work related items, and starting conversations with polite questions to invite others to share what they are comfortable with, and not divulge information that they consider private.
My Process
In my work I leaned on the ADDIE model to provide structure. I began with a collaborative analysis between myself and my SME. We created an action map that would then inform my next step of designing my text-based storyboard, entering the design phase. My SME provided input during this process as well to ensure the eLearning was best suited to the company’s needs, and flowed well. After they approved my storyboard, I was able to move on to wireframing and mockups, creating the visual design.
Moving into the development phase, I prototyped to show the SME how the interactivity would work. Once receiving approval on the prototype, and consulting with a few professional instructional designers, I developed the full project. In my case, I was able to receive feedback after asking peers and professional instructional designers to implement the project. I iterated through a few versions to make sure the project was consistent, and then asked me SME for feedback on the functionality for the company.
Action Map
My SME and I spent time analyzing the situation and coming up with two ideas to keep the process simple. Communication and conversation can be an extremely complex topic. For their purposes, we decided to focus on a few actions to promote inclusivity and to encourage team building. Employees should focus on staying on topic, active listening, avoiding personal/sensitive information, maintaining a positive tone, and asking open-ended questions about something they gleaned from active listening. The SME suggested we focus on avoiding personal and sensitive topics, staying on work topics, and asking open-ended questions about something known for this eLearning, since it is scenario based.
Text-Based Storyboard
This was a critical step, as the text-based storyboard works as a blueprint for the rest of the project design. I visualized the flow of the eLearning in terms of introduction, scenario questions, and a conclusion. I wanted to add in a progress tracker so the user would receive rewards for correct choices. I also added in the HR representative as a helper and as a way to give a negative consequence if the wrong answer was chose.
I consulted with the subject matter expert to ensure the training captured scenarios that are relevant to their company, as well as accurate to the behavior they would like to see in workplace conversations. I received feedback from the SME, then adjusted some of the visuals and prompts.
Instead of introducing the information first and having users then click on correct choices, I designed this training to put users directly into the context of an authentic experience. Users can rely on the HR rep for assistance if needed during the eLearning.
Visual Mockups
After receiving approval on the storyboard, I started with using Figma to create wireframes and Vyond to create most of the design elements/ animations. Wireframing helped me envision the high-fidelity mockups that were created later on. I created a style guide in Figma to assist with keeping the design streamlined and consistent. After consulting again with my SME, they confirmed the design colors and elements corresponded well with the company’s professional color palette. I also discussed the mockups with a professional instructional designer to get feedback and make changes before moving forward. This part of the process was exciting due to the design beginning to come together, and vision for the final project to start being seen.
Interactive Prototype
The next step in my process was to create a prototype in order to receive feedback before diving into the full design. The prototype included the title slide, introduction to HR representative, progress wheel introduction, the first scenario, and the correct/ incorrect consequences for scenario one.
I created the characters, backgrounds, scenes, and animations all in Vyond. Vyond’s capabilities to adjust character action, expression, and look drove me to use this before moving the scenes into Articulate Storyline. I knew I wanted this design to be both animated and interactive, therefore a combination of Vyond and Storyline was the perfect method.
In Storyline, I placed the textboxes/ prompts, and the buttons. I added the hover feature from my style guide to the buttons and customized the text to match each scene. Throughout both Vyond and Storyline, I kept consistent to my style guide to match the company’s color scheme.
The final step before the full design was receiving feedback. I sent the prototype out to my SME and to a few professional instructional designers. They were able to provide feedback so that I could iterate, adjust, and finish the full project.
Full Development
After receiving feedback, I was ready to develop the full design. I noticed quickly that the timing of each scene was going to be crucial to get correct in terms of its alignment with the text. I edited some scenes in Vyond to make them better fit with the elements in Storyline, and made some minor adjustments to characters as well. Working with Storyline to develop the correct/ incorrect answers and HR rep assistance gave me a better understanding of using triggers and getting the layers correctly set up. My favorite part of this project was aligning the videos I created in Vyond with the triggers and elements in Storyline. Making it all come together was an exciting feeling. Using Vyond to create the animations made the project come to life and developed that feeling of interactivity. My SME tested out the full project and remarked that it was much more enjoyable than her normal trainings, while providing a valuable experience.
