eLearning Solution

The potential client is either an in-house LXD department or an outside DEI consultant looking to provide common definitions for DEI terms. Recognizing the need for DEI training and the confusion that can surround these three terms—diversity, equity, and inclusion—the project seeks to create common ground among learners.

If this tab interaction were to be utilized in a conference setting, it could be added on as part of the conference’s app. Otherwise, it could be provided as a QR code in convenient locations during the professional development experience or even at the top of an agenda. This allows users to access the information as needed.

Process Overview

I began this project after attending a DEI training offered by an outside consultant. Using her resources as a starting point, I further compiled and adapted definitions from several additional sources, including the University of Iowa, Stony Brook University, and Ensemble Health Partners.

Next, I created a script, narrowing down the language from much lengthier definitions, ultimately using the University of Iowa’s as the majority of my content.

Using Adobe XD, I mocked up several layouts and types of tab interactions. I selected fonts and a color palette as well as a background image to compliment the potential professional implementation of this UI.

After feedback on the design and script, I moved to Articulate Storyline 360 to develop the final product.

 Script

The script offers concise definitions with elaboration on how the tab interaction will operate.

 Visuals & Layout

I chose a photograph of employees gathered at a conference table as my background image with the aim of tailoring this to a professional audience. I selected a color palette with bold colors to contrast the mostly white layout.

I created a range of initial layouts using Adobe XD, including different options for how the information would be displayed. I explored different possibilities for the tab interaction before settling on an accordion style interface. I also added a resources tab to both credit my sources and provide further areas of exploration with direct links.

 Development

After receiving feedback and input on the mock-ups and script, I made key adjustments, landing on a concise and learner-friendly experience. I developed the project using Articulate Storyline 360.

Features

Accordion interaction: Using layers, triggers, animations, states, and the timeline, I created an accordion interaction, which produced the effect of items moving on the base layer to reveal definitions and resources. I accounted for every potential combination of clicks to seamlessly animate both the opening and closing of the accordion tabs. The whole project is built into one slide with many layers to produce this functionality.

Resources tab: The resources tab could be customized for each use of this project, providing varying links as needed. For this base project, I included links to the resource material used in creating the project, including definitions from the University of Iowa’s DEI department, a video of workplace best practices from Ensemble Health Partners, and a strategic planning toolkit from Stony Brook University.

Testing: In order to ensure a clean and functional learning experience, I tested the final product on multiple devices and browsers, soliciting a final round of feedback. Errors were addressed as needed, and I uploaded the product to AWS as a host.

 Takeaways

This concept project allowed me to practice taking a project from conception to revision to actualization. I was able to implement new skills in Articulate Storyline 360 as well as use visual design theory to complete the full instructional design process.

Layers and Triggers: When I started with a basic accordion tab interaction, I realized it only worked if the user expanded and collapsed the same tab before selecting a new one. Using layers, triggers, the timeline, states, and animations, I was able to extend the functionality to include all possible click combinations to enhance the user experience.

Visual Design: As opposed to my flagship project for a movie theater client, which is more cartoonish, here I wanted a design that matched the content. I consulted many resources to find complimentary fonts, colors, and ultimately composed a professional and clean design.

After attending my DEI professional development experience, I was excited to adapt that important and relevant content to an eLearning format. Overall, creating this tab interaction was meaningful and timely given the subject matter and current workplace and human resource efforts.