Harassment Training 101

This educational and interactive project informs and educates the viewers on harassment in the work place, and puts them in scenarios in which their choices matter and can have consequences.

Audience: Office workers undergoing annual harassment training sessions

Responsibilities: Action Mapping, Visual Design, Storyboarding, eLearning development, Instructional Design

Tools Used: Articulate Storyline 360, Figma, Google Drive

Overview

The Challenge

Following a severe workplace harassment incident, a fictitious company has experienced low employee morale, an increase in turnover rate, and psychological safety concerns.

The Analysis

I first collaborated with a Subject Matter Expert (SME) to conduct a needs analysis. We determined that traditional compliance training was insufficient due to it lacking the nuance of every day situations. The employees lacked practice in identifying subtle, everyday verbal harassment and in executing proper escalation or de-escalation paths. The business goal of this project was to restore employee morale and protect retention of the company by empowering employees to intervene early, if not entirely prevent incidents.

Action Map

As I transitioned from the analysis to the design phase, I built an Action Map to split the main overarching goal into three measurable behaviors: Identifying subtle forms of harassment, de-escalating situations safely, and reporting harassment effectively. I would connect these measurable behaviors to activities in which branching scenarios are present in order to encourage users to find different solutions.

Text-Based Storyboard

I translated the Action Map into a text-based storyboard. I first created a guide character, "Sam" to help guide and educate the users. I intentionally designed the dialogue to be user-friendly for new workers, and to foster a nurturing and engaging environment for users to learn efficiently without being discouraging.

A sample, shown below, is a script of one of the action based slides in which users have to identify the conversations in which harassment occurs. My goal for these particular action slides was to script the interactive dialogue to sound like natural workplace conversations while sprinkling in some forms of verbal harassment. This forces users to apply critical thinking instead of just monitoring the more obvious compliance red flags.

Visual Mock-Ups

I created assets for the prototype with a mix of Freepik vectors, native assets of Articulate Storyline 360, and my own designs. I decided the choice in colors to make the characters and assets recognizable so that users can easily recall and identify them.

Character Mock-Ups

Alternative Poses

Extra Assets

For the typography, I mapped out a clear visual hierarchy using Ubuntu Medium for headers and Ubuntu for the body text to ensure high readability and consistency for the users.

Interactive Prototype

After creating the background with the assets and my own designs during the "early testing" phase of my project, I realized that the project revealed two jarring visual flaws. The first flaw that I came across was the camera angle, which restricted character placement, especially in the activities in which multiple characters. The characters need breathing room to prevent cognitive overload on the learners. To rectify this flaw, I expanded the stage layout to accommodate multiple characters. The second flaw I came across was the background, which is busy and is exacerbated when multiple characters are present. To rectify this flaw, i introduced a tint element to the background whenever Sam and the chalkboard are present. This minimized the visual noise of the background and directed the learner's attention to the learning material, further preventing cognitive overload.

Full Development

As I transitioned from the prototype to full development, I programmed complex logic using Articulate Storyline's advanced features:

Conditional Navigation: I built true/false variables within this project in order to track user progress. This prevents learners from skipping slides prematurely, instead ensuring that they processed the information or met all learning requirements before proceeding.

Visual Accessibility and Typography: My initial layout utilized an overly stylized font that ended up compromising the project's professional tone. Realizing this, I systematically altered the typography, restricting my entire project to the Ubuntu font family (Ubuntu Medium and Ubuntu) to reduce visual friction.

Coherent Feedback Architecture: I implemented triggers to pull up information in bite sizes in order to prevent cognitive overload for the users. In addition, I implemented the "Hover" and "Selected" micro-interactions to guide the learner's eye when interacting with the activities.

Results & Takeaways

In creating this project, I gained more confidence in my work, considering the time and planning that went into the makings of a project which involved more nuance and abstract variables than is commonly understood.

I conducted a formative evaluation of the developed module. The initial user data indicated the clunkiness of navigation as well as inconsistencies with the usage of variables. To resolve this, I optimized the user interface by streamlining the navigation triggers and promoting consistency among the variables. A second round of user testing yielded positive feedback, with users noting the scenario branching being versatile, seamless, and applicable to workplace dynamics. This project was able to help with strengthening my ability to translate behavioral compliance in the workplace into tangible and technical eLearning solutions, thus minimizing if not entirely preventing future incidents from occurring.

Page updated

Google Sites

Report abuse