Embedded Files
Overview
This scenario-based mini course aims to provide on-boarding training on summer camp safety for newly hired camp counselors. This e-learning course meets the WCAG2.1 Accessibility Standards and is fully compatible with screen readers and key board navigation. It can be experienced on a desktop or any mobile device.
Responsibilities: Instructional Design, eLearning Development, Graphic Design, Research Design, Data Analytics, Accessibility Specialist
Tools Used: Articulate Storyline, Vyond, Adobe XD, Adobe Illustrator, Camtasia, NVDA, etc.
Target Audience: Newly Hired Camp Counselors
Problem
The client is a wilderness education organization based in San Francisco Bay Area that provides youth naturalist programs, including backpacking, outdoor summer camp, overnight camping, etc. All camp staff are required to have the knowledge and experience to lead a safe and positive camping experience.
However, the client is concerned because many newly hired staff were not following instructions on trip preparation, hiking and camping safety, and failed to perform appropriate first aid when accidents happen. This resulted in negative camp experiences for the customers, which lead to a decrease in customer retention and lost revenue for the business.
Solution
After researching and analyzing with the client, I determined that the source of the new employees’ performance issues was a lack of skill and knowledge. For this reason, I proposed an immersive scenario-based eLearning experience to provide basic training on preventable accidents commonly occur during overnight camps for newly hired camp counselors.
Accessibility Features
This course meets the WCAG 2.1 Accessibility Standards, including:
Key board navigation & screen reader compatibility
Close Captions
Alt text for images & media files
Alt text for buttons– all states (normal, hover, completed)
Quiz format: multiple choice & multiple responses
Additional audio feedback -“Ask Tom” button.
Downloadable accessible transcripts
For example, in the beginning of the course, learners could choose whether they would like media and slide auto-advances or not based on their own preferences.
Image: Media Preferences Slides
Process
Creating this project was an ongoing process that required constant analysis and iteration. With ongoing feedback and user testing, I was able to develop a polished final version of this product.
I designed and developed this eLearning experience from start to finish. To accomplish this, I first created an action map and wrote a text-based storyboard. After the first review cycle with feedback and approval, I designed visual mockups and developed an interactive prototype. After another review cycle, I completed the final product you see here.
1. Action Map
To identify the focus of the eLearning simulation, I worked with a camp director and a group of camp staff, who acted as my SMEs throughout the project. Using Backward Design approach, I first identified the goals of the training and then used Mindmeister to develop an action map.
By action mapping the areas to address with eLearning, I was able to save the client time and money, because it allowed me to get to the root of the performance issue and focus the training on questions that were directly impactful to lead a safe outdoor camp .
Image: Action Map using MindMeister
2. Text-Based Storyboard
Once I identified which actions, choices, and consequences to include in the training through action mapping, I drafted the text-based storyboard. To engage learners and maximize learning efficiency, I prioritized 4 features in the training to support active learning:
1) Scenario-based learning
2) Micro-learning
3) "Ask Tom" button:
4) Learn from mistakes:
This storyboard serves as a blueprint and allows the client to see word for word exactly what is included in the training. The storyboard, upon its completion, was sent to stakeholders for review and feedback.
Image: Text-Based Storyboard
3. Visual Mockups
I used Adobe Illustrator to create the course thumbnail.
Image: course thumbnail
I used Adobe XD to create a slide for each changing scene in my learning experience. I iterated the look and feel of the slides to create a custom theme and template for what the project would become. I then moved everything into Storyline to refine the details.
Image: screenshot of visual mockups in AdobeXD
4. Interactive Prototype
Using Articulate Storyline, I developed an interactive prototype to collect feedback on functionality and development. The prototype consisted of the slides for the title, intro, two complete scenarios, and an outro. By adding the triggers, states, animations, and sounds, I was able to get a feel for how the project would become when completed.
Image: introduction scene with Tom, the training mentor
At this point, it's time for another cycle of review and feedback. One of the feedback I collected was to make the learning experience more immersive. Therefore I decided to use animated videos to replace the text-heavy consequences in each of the scenarios. This change received immediate positive feedback from the client since it would greatly enhance the learning experience for the learners.
Image: animated consequence video for each choice learners make
5. Full Development
Once I got the green light on the prototype, I developed the rest of the scenario-based slides and iterated on them until all animations, sounds, visuals, triggers, and variables flowed perfectly together.
Image: alt text added for all images and media files
6. Additional Features
Since it is a mandatory training for new employees and they would need all the knowledge in real-world situations, I decided to implement two features:
1) Use audio for ""Ask Tom": in each scenario, learners have an opportunity to click the ""Ask Tom" button when they need some help make the right choice. By making Tom's suggestions in audio, learners are still able to read the choices while hearing the helpful information from Tom.
Image: "Ask Tom" button triggers audio message
2) Gamification: To make the learning experience more engaging, I incorporated gamification learning theory in the training and designed a token reward system. For each correctly answered question, learners receive a token, and they would only receive a completion certificate if they got all five tokens.
Image: Token reward system keeps track of learners' progress and engagement
Page updated
Google Sites
Report abuse