Ergo Check!
An eLearning tab interaction to help people optimize their workstation setup for improved comfort and health.
Overview
Audience: Office workers looking to improve their workstation ergonomics.
Responsibilities: Instructional Design, eLearning Development, Visual Design, Storyboarding, Programming.
Tools Used: Articulate Storyline 360, Adobe XD, Adobe Illustrator, Google Docs.
The Problem
Many office workers experience discomfort or pain from improper workstation setups, leading to decreased productivity and potential health issues. Poor posture, lack of ergonomic adjustments, and prolonged sitting can cause strain, particularly in the neck, back, wrists, and legs.
The Solution
I designed an eLearning tab interaction in which users learn about key ergonomic adjustments through the exploration of a workstation illustration. Users can click on various parts of the setup, such as the monitor, chair, and keyboard, to view ergonomic tips for maintaining a healthy posture. This interactive approach helps users learn how to position their equipment to alleviate discomfort and reduce the risk of repetitive strain injuries.
My Process
With the end goal in mind, I worked through the ADDIE model and I began by analyzing common workplace ergonomic issues and consulting best practices for workstation setup. I created a text-based storyboard that focused on five main areas: Head and Neck, Shoulders and Arms, Hands and Wrists, Back, and Legs and Feet. Each section of the storyboard includes the on-screen text as well as programming notes for interactivity in Storyline 360.
Visual Design
Using Adobe XD, I developed wireframes and visual mockups that represented the workstation setup and incorporated a clean, user-friendly design. I then created a style guide to ensure consistency throughout the module. I sourced vector graphics and edited them in Adobe Illustrator to maintain consistency throughout the design.
Interactive Prototype
I programmed an interactive prototype in Articulate Storyline 360, featuring hotspots over key workstation elements. When the user clicks on a hotspot, an information layer appears with ergonomic tips and an arrow pointing from the element to the text box for a visual connection.
Full Development
I expanded the prototype to include all five ergonomic areas, incorporating clean circular button hotspots with hover states that trigger layers specific to each ergonomic area. Each layer has a hide layer trigger which is activated when the user clicks the hotspot a second time.
Features
Custom Visuals: I sourced and customized visual assets to create a cohesive look, using Adobe Illustrator to edit colors and elements. This included resizing, editing layers, recoloring individual elements, and merging assets.
Interactive Elements: This project incorporates a variety of interactive components, including states, triggers, and layers, to create an engaging user experience. Users can explore different parts of the workstation and receive relevant ergonomic tips through clickable hotspots, hover states, and smooth transitions.
Results and Takeaways
The project was well-received by users for its practical advice and intuitive design. Feedback highlighted the clarity of instructions and the benefit of learning through an exploratory approach. In the future, I would consider adding audio narration or short video clips to further increase engagement. This project helped me enhance my skills in visual design and interactive eLearning development, while also allowing me to address a real-world problem that affects many people!