Zenzone: World of Mindfulness
Why I created it
I created this project to address the growing need for accessible mindfulness education in our fast-paced, stress-filled world. Many people want to manage anxiety but don't know where to start. This project let me develop my skills in interactive learning design, multimedia production, and creating therapeutic educational experiences. I specifically wanted to improve how I create engaging, practice-based learning that translates complex wellness concepts into actionable techniques. Additionally, it gave me the chance to practice Universal Design Principles of Mobile Learning. I addressed the sizing and spacing needs to make mobile learning accessible, while constraining myself to the limited capabilities of Google sites.
Project Overview
ZenZone teaches meditation and breathwork through the online platform, Squarespace. Users learn practical skills to reduce stress, improve focus, and feel better overall.
As the designer, I created all content, built interactive elements, and made sure everything worked on both computers and phones.
Demos
Web
Mobile
Learning objectives
After completing ZenZone, learners will be able to:
Explain how the mind and body work together
Understand how meditation helps both mental and physical health
Perform three different breathing techniques correctly
Set up a good space for meditation
Complete guided and self-guided meditation sessions
Design Process
Instructional Strategy
I built the course to start with basics and gradually move to independent practice. Users first learn concepts, then try guided exercises, and finally practice on their own. I broke down concepts and common concerns into FAQ-based dialogue. The website itself is designed to read like a text message conversation between your local mindfulness guru and yourself.
In terms of planning, I created a plan document document. It was useful listing out my interactivities and breaking down multimedia assets into manageable tasks. For this project, my interactivities were the backbone. I built the course around these interactivities, using a background design approach to building content based off of intended results.
Visual Design
I used a neutral color scheme, similar to the sand of a Zen garden. This established a brand identity based on calm and mindfulness. I gathered stock photos of sunrises and nature landscapes to compliment the peace and serenity of Mindfulness practices.
Development
Tools
Squarespace
H5P and Lumi Education
Adobe Premiere Pro for video creation
Adobe Audition and Garageband for audio creation
Adobe Photoshop for Image Creation
Canva for Image creation
7taps for mobile learning
Elevenlabs for AI narration
Interactive Elements
The course includes:
Breathing exercises with visual guides and a post-reflection activity
Microlearning course on helpful Meditation tips and resources
Hotspot interactivity for creating a mindful environment
Guided Meditation practice
Post-experience reflection
Accessibility features:
Both visual and audio instructions
Transcripts and captioning for all multimedia assets
Works on all devices
Implementation
Course is published on Squarespace and all H5P interactivities are hosted on Lumi Education. Learners demonstrate learning through self-reflection after sessions.
Challenges and Future Iterations
The hardest part of this project was dealing with the limited options for adding videos and interactive elements to both Squarespace and Google sites (especially on mobile). Google sites was particularly restrictive when it came to customizing the look and adding multimedia. This experience taught me (painfully) how to use iFrames and embed codes to work around these limitations. Many times during this project, I wished I knew more about coding.
For future versions, I'd use a different platform altogether. Building my course on a website builder taught me a lot about web design, which was valuable, but this would work better in an actual eLearning tool where I wouldn't need to rely on third-party sites for embed codes, iFrames, or H5P interactive elements.
H5P was helpful for creating interactions in this course, but it doesn't offer much design flexibility. Having built-in interactive features would save a lot of time and hassle.
If I did this project again, I'd build it using Storyline or Rise, or I'd use custom code on Squarespace for more control over the design.
Competencies
This project shows my skills in:
Creating wellness education content
Web design
H5P/Lumi Education Interactivity creation
Video and Image creation through Adobe Creative Suite
Problem-solving technical platform limitations
Building interactive exercises within constraints
Mobile Accessibility