[ eLearning - Graphic design - Web design - Multimedia ]
- Workplace & Laboratory Safety Training -
Compresssed Gas Safety
This eLearning course introduces learners to the safe handling and storage of compressed gases through instructional content, video, motion graphics, and interactive activities.
For the visual approach, I wanted to move away from the typical look of technical safety training while still keeping the course professional. I used a collage-inspired style, bright colors, textured video, and audio to create a more distinctive look and keep the visual experience varied throughout the course.
Project Details
Role: eLearning / Multimedia Developer
​​
Brief: Develop a multimedia eLearning course from a supplied storyboard covering the safe handling and storage of compressed gases, with a focus on transforming technical safety content into an engaging and visually distinctive learning experience.
Key Features
Multimedia & Video: Video, narration, motion graphics, and sound effects work together to make the safety content more engaging and easier to follow.
Visual Storytelling: I used collage-style compositions and custom graphics to give the technical information more context and make it easier to connect with visually.
Custom Interactions: The Storyline interactions and knowledge checks give learners a chance to explore the content and test what they’ve learned along the way.
Cohesive Visual Treatment: The rough paper textures, collage elements, and layered imagery carry through from the video into the course, helping everything feel like part of the same experience.
Audio & Sound Design: Sound effects add another layer to the video, helping draw attention to important moments, actions, and transitions.
Tools Used
Articulate Storyline 360
Adobe Premiere Pro: Video editing
Adobe Audition: Voice-over editing, audio cleanup, and mastering
Adobe After Effects: Motion graphics
Adobe Illustrator: Custom graphics and visual assets
Adobe Photoshop: Image editing and asset preparation
Notion: Production planning and scene organization
Getty Images / Envato Elements: Licensed photography, footage, and visual resources
AI-Assisted Creative Tools: Visual exploration, image enhancement, and production support
Because the course deals with hands-on safety procedures and equipment, I wanted the design to feel practical rather than overly polished or corporate.
I used a bright collage style with graph paper, paper textures, layered imagery, and cut-out elements to give the scenes a more tactile feel.
Crumpled-paper and folded-paper transitions, split screens, and sound effects add movement and help carry the narration from one idea to the next.
I wanted to make full use of the screen without making the scene feel crowded, so I divided the layout into four sections and treated them like a sheet of paper unfolding to reveal each type of hazard.
Each section uses its own hazard symbol, drawing from the visual language of pictograms/GHS labels, while the torn-paper framing keeps it connected to the collage style used throughout the course.
The grid gives each risk its own space while the unfolding transitions create a clear visual progression through the four categories.
This scene is one of the incorrect paths in a branching scenario, following what happens when the learner makes the wrong choice.
I used a mix of black-and-white photography, paper textures, graphic overlays, and bold color to show the consequences of that decision as the narration unfolds.
I used the video to establish the setting, while the surrounding graphics build out what is happening and what could happen next.
Pop-up text, quick transitions, and visual cues help reinforce the shift from the initial action to its possible outcome, giving the learner a clear visual sense of where their choice has led.
Instead of a static gas cylinder illustration, I made this interaction so learners can explore its different components. Learners can hover over and select each part to reveal more information about its purpose.
Asset Development
I created the initial cylinder illustration using AI, then separated and refined the individual components in Photoshop and Illustrator so they could function as interactive elements in Storyline.
Storyline Development
I built the interaction using triggers, layers, and custom states. A hover state with a subtle glow helps learners identify each component, while the selected component is highlighted along with its corresponding information.
Progress Tracking
Completion tracking lets learners keep track of the components they have explored, while the full cylinder remains visible to maintain context.
This keeps the interaction simple and focused while giving learners a more engaging way to explore the technical content.
This activity places learners in a simulated lab and cold room, where they must identify three storage violations hidden throughout the scene.
​
Asset Development
I used AI to generate the initial scene, then isolated the individual objects in Photoshop so they could be edited and positioned independently. I incorporated existing visuals/assets repurposed from other parts of the course to keep the interaction consistent with the overall design.
​
Storyline Development
Built in Storyline using layers, triggers, animations, and states, the interaction tracks each hazard as it is found. Correct selections reveal the issue and its explanation, while incorrect selections provide feedback without interrupting the activity.
Feedback & Visual States
Audio and visual cues signal whether each selection is correct or incorrect, giving learners immediate feedback as they work through the activity.
​
The full scene remains visible throughout, allowing learners to scan the environment and decide where to look next. I also created visual changes for the identified hazards, including adding safety chains and repositioning equipment to show the corrected state.
Regulator Compatibility
The interaction asks learners to decide which of three mechanical regulators is compatible with an oxygen cylinder.
Storyline Development
I built the interaction in Storyline using states, animations, triggers, and layers to control the selection and feedback. Each regulator opens its corresponding video, giving learners an explanation immediately after making their choice.
The three options remain visible as learners work through the activity, allowing them to compare the regulators before making their next selection. This keeps the interaction focused on making a decision and understanding the reasoning behind the answer, rather than simply presenting the information.
I began with the supplied storyboard and voiceover, reviewing the instructional content, ID notes, visual requirements, and interaction specifications for each scene.
​
I mapped the course in Notion, breaking the storyboard into individual scenes and identifying the assets and functionality needed for each one. This included video, graphics, animation, audio, and Storyline interactions.
​
From there, I sourced/developed and edited the required multimedia assets before building the course in Storyline. Where the storyboard outlined an interaction, I worked through the Storyline logic needed to make it function as intended, including triggers, layers, states, animations, and branching.
​
The course went through multiple rounds of review and QA. I worked through feedback and checked interaction functionality, navigation, audio timing, visual consistency, and overall performance before delivery.
The interactions were supplied as part of the storyboard, and my role was to build them out in Storyline and make sure they worked as intended.
​
I used triggers, layers, states, animations, and branching logic to control learner choices, feedback, navigation, and progression. This included building click-to-reveal and hotspot interactions, linking selections to video and audio, and creating the four-slide branching scenario.
​
I also added custom hover and selected states, visual and audio feedback, and completion tracking where needed.
For the visual style, I wanted to move away from the typical look of technical safety training while still keeping the course professional and easy to follow.
I explored several visual approaches before settling on a collage and scrapbook-inspired style. Bright colors, paper textures, layered graphics, and textured video treatments were used throughout the course to give the technical content a more approachable feel.
I created and sourced supporting graphics, using AI-generated imagery where appropriate and editing the assets in Photoshop and Illustrator to fit the course.
Video and audio were also important parts of the design. I edited the video content and added paper-texture treatments to tie it into the overall visual style. Voiceover was synchronized with the on-screen content, while sound effects were used selectively to add emphasis to transitions, interactions, and video sequences.
The final design keeps the visual treatment consistent across the course while allowing the interactive and technical content to remain the focus.