Mindfulness Guide
As part of my continued development in eLearning design, I created a short microlearning experience focused on the fundamentals of mindfulness.
The goal was to take a topic that can often feel abstract and translate it into a simple, approachable learning experience. The course introduces learners to what mindfulness means, provides practical techniques they can try immediately, and encourages them to begin developing a consistent daily practice.
I designed the experience to feel calm, welcoming, and easy to navigate, using short sections, clear learning objectives, visual storytelling, and interactive elements to keep the learner engaged without overwhelming them.
Project Details
-
Role: e-learning Developer
-
Brief: Create a short, engaging microlearning introducing learners to the fundamentals of mindfulness, including practical techniques and ways to incorporate mindfulness into a daily routine.
Key Features
-
Interactive Learning: Learners engage with mindfulness concepts through short, focused interactions rather than passive content consumption.
-
Guided Practice: Practical mindfulness techniques are presented as simple activities learners can follow and apply immediately.
-
Progress Indicators: Custom navigation and visual indicators help learners understand where they are within the experience.
-
Custom Navigation: A streamlined interface allows learners to move through the course intuitively while maintaining a consistent visual experience.
-
Visual Storytelling: Illustrations and nature-inspired visual elements reinforce the themes of calm, awareness, and presence.
-
Layer-Based Interactions: Storyline layers and triggers are used to reveal information progressively and keep the interface uncluttered.
Tools Used
-
Articulate Storyline 360
-
Adobe Audition (Audio clipping and optimization)
-
Adobe Illustrator (Icons, background and era images)
-
Adobe Photoshop (Background and era images)
-
Freepik (Sourcing icons, background and era images)
-
Google Docs (Timeline scripting and content planning)
-
ChatGPT
I developed this portfolio piece in Articulate Storyline 360, taking the core topic of mindfulness and translating it into a concise, visually engaging learning experience.
I began by defining the learning objectives and identifying the key concepts the learner should take away from the course. I then structured the content into short sections, focusing on one concept or activity at a time to maintain a manageable cognitive load.
From there, I developed the visual direction around a warm, natural aesthetic. I selected an earthy colour palette, created and adapted supporting illustrations, and established consistent typography, spacing, and interface elements.
In Storyline, I built the individual screens, navigation, layers, triggers, states, and animations to create the interactive experience. I also tested the interactions and navigation throughout development to ensure that learners could move through the course smoothly and that each element behaved as intended.
The course uses Storyline's layers, triggers, and states to create a guided learning experience while keeping the interface simple and uncluttered.
Interactive elements allow learners to progressively explore mindfulness concepts and engage with practical techniques. Layer-based content keeps additional information hidden until it is needed, helping maintain focus on the primary learning point.
Custom states and triggers are used to provide visual feedback and support learner progression. Navigation elements were also customized to create a consistent experience between sections.
Throughout development, I tested the interactions, navigation, and progression logic to ensure that each element functioned consistently and that learners could move through the experience as intended.
The visual design was created to reflect the calm, grounded nature of mindfulness while avoiding the overly clinical or generic aesthetic often associated with wellness content.
I used a warm neutral background alongside earthy brown, muted blue, and soft accent colours to create a relaxed visual environment. Illustrated natural elements, including leaves, flowers, and organic shapes, were incorporated throughout the experience to reinforce the connection between mindfulness and the natural world.
The main character illustration provides a strong visual focal point and adds personality to the course, while the generous use of whitespace keeps the screens feeling calm and uncluttered.
Typography, spacing, buttons, navigation elements, and illustrations were kept consistent across the experience to create a cohesive visual system.
The overall design approach was intentionally simple: less visual noise, clearer hierarchy, and enough interaction to keep the learner engaged without distracting from the content.