Overview
As part of the July 2025 eLearning Design Challenge from the eLearning Designer's Academy, I created an immersive, scenario-based learning experience designed to raise awareness about heat-related dangers on hiking trails in Caballero County Parks.
This fully responsive course blends Storyline, Rise, custom HTML/CSS/JavaScript, and AI-generated media to guide learners through real-life decisions that impact health and safety outcomes.
Audience
Hikers accessing trails at Caballero Parks.
Responsibilities
Instructional design
Action mapping
eLearning development
Visual design
Accessibility
Testing
Toolkit
Articulate Rise
Miro
ChatGPT + Sora
Photoshop
HeyGen
Mighty Plugin
Challenge / Problem
Hiking in Caballero County is a beautiful but potentially dangerous activity in the dry, hot summer months. Rangers have observed an increase in calls related to dehydration and heat exhaustion.
Solution
This course simulates conditions on the trails and helps learners prepare appropriately. Users are thrown into realistic scenarios and make decisions in a safe space. The fully responsive and mobile experience with downloadable park brochure allows users to have the resources they need on hand at the trails.
Instructional Design Process
Action Mapping
I started by creating an action map in Miro to define key goals and realistic decision points (trail choice, hydration, response to symptoms). I designed a narrative that branches based on learner decisions and illustrates real-life consequences.
A welcoming experience with a video of a park ranger giving our hikers / learners tips and offering a downloadable park brochure opens up the course.
I designed the brochure using my original photography and reference data provided on dehydration and overheating for use in later scenarios.
Custom Dev. With HTML
Using the custom HTML blocks from Mighty I was able inject a variety of custom interactions:
Trail Selection interactivity that branches the course in Rise
Interactive image buttons using a custom index.html file
Developed and included JavaScript to hide the native navigation button in Lesson 2 and 3
Custom Exit Interaction
Ensured full responsiveness across devices
Visual & UX Design
Used the Mighty plugin in Rise to:
Customize the look and feel of the welcome and trail selection screens
Match brand colors and fonts using the color picker
Add smooth transitions and interactive blocks, including an image comparison slider
I designed a downloadable park brochure accessible via QR code in the welcome video. Enhanced AI-generated visuals in Photoshop to better reflect the environment and immerse the learner.
Applying consistent branding, including typography and color palette, I was able to reflect a natural, outdoor hiking theme.
Results and Feedback
Implementation:
The course was deployed to park visitors and is fully accessible on mobile, allowing users to engage on the go. A downloadable park brochure and map are also provided for reference while hiking.
Evaluation:
Following delivery, performance change will be measured through visitor feedback surveys, incident reports, and ranger observations, with the goal of achieving increased awareness of heat-related risks, improved decision-making on the trails, and a reduction in heat-related incidents.
“Such a thoughtful and well-executed course! Loved seeing the way you worked in custom code as it really added that extra polish! 🙌 😎 ”
Final Touch
Like many hikes in real life, the course ends at the park gift shop. Learners receive a free park sticker and exit via a branded thank you screen linking back to my portfolio.
