Audience: New lab employees

Responsibilities: eLearning Development, Visual Design, Textual Design/Storyboarding, Mockups

Tools Used: Articulate Storyline 360, Adobe XD, Adobe Illustrator, Adobe Photoshop, Google Suite

During my time as an organic chemistry research intern, I spent a lot of time in the lab, working with what seemed to be an infinite variety of chemicals. However, it was a handful of liquids – known as common solvents – that I saw as unsung heroes. These unassuming chemicals helped me daily, from setting up reactions to cleaning glassware. However, their brightly colored wash bottles and inevitable presence in the lab might intimidate a new lab employee, who might shy away from capitalizing on their usefulness. 

I imagined an eLearning tab interaction that I would have wanted as a new intern – one that I could quickly access alongside my digital research notes. Ultimately, this interaction would help newer lab employees increase the proper use of these common solvents, leading to a much more productive and cleaner lab.

Process

Text and Visual Design

Based on my experiences being a newer researcher, I determined that newer lab employees with little to no prior lab experience often did not know the most frequent uses of common solvents – specifically, acetone, ethanol, methanol, and isopropanol. The color design was intentionally designed to reflect academic and industry used wash bottle colors, which serves to increase enduring understanding.

After determining the chemicals, I thought about the content of the summaries about each chemical. Using Vygotsky’s Zone of Proximal Development and Scaffolding, I ensured that each chemical has a “tie” to the “real-world,” or life outside of the lab while still incorporating the technical aspect of molecular structure.

Visual Mock-Ups

After I confirmed the text-based storyboard, I began sourcing assets in Adobe Illustrator that I found to be the most relevant to a lab setting, ultimately deciding on a grounding photograph for the home screen and consistent, customized vectors for the tabs. Visual mockups on Adobe XD helped me experiment with various graphics styles and placements according to Mayer’s Spatial Contiguity Principle, and I decided to use a simple, playful design that mitigates the intimidation that often comes with technical topics. This necessitated light asset-editing in Adobe Photoshop, where I experimented with various color associations and background removals. 

I also reviewed several different examples of successfully presented technical information to select and modify a font that lends itself to easy information absorption. After several iterations, I felt that the overall cohesion of the visuals and text resulted in an enticing and accessible interaction.

Interactive Prototype

I used Articulate Storyline 360 to create the interactive prototype, directly building upon my visual and text work on Adobe XD. This prototype included the base layer, the home layer, and one content layer. Developing a smooth and seamless tab experience was a challenge that pushed me to look at my ideas in a different perspective — and I mean this literally, since I originally started with left-to-right motion paths, when I had to rethink everything in terms of right-to-left. Smooth transitions between tabs were a must, and I tried several animations that got the job done, but were not great. This was not acceptable for my standards, and after altering motion paths, layers, and trigger conditions, I was able to achieve the look I wanted without compromising on my vision.