This is a scenario-based eLearning concept project designed to help swimming instructors provide efficient feedback for their students. Throughout the course, the learner engages in a series of real-life, low-risk scenarios, ultimately learning what types of feedback lead to student growth. I also implemented JavaScript to include a downloadable PDF certificate of completion with the learner's name and date. This project is best viewed on desktop.
Audience: New Swimming Instructors hired within the last 9 months
Responsibilities: Instructional Design, Project Management, Action Mapping (Needs Analysis), eLearning Development, Storyboarding, Visual Design, Mockups, JavaScript Implementation
Tools Used: Articulate Storyline 360, Figma, Adobe Photoshop, Visual Studio Code, MindMeister, Google Docs
In recent years, the local park district aquatics department, Swim League, has seen an increased number of students registering for swim lessons. To combat this, Swim League has hired more qualified swimmers as swimming instructors. These instructors would be teaching swimming levels 1 through 5.
Since the increase of students, Swim League have noticed students are often repeating level 3 and up 2-3 times more often than years prior (even after reducing the class size). This brings up a concern because this type of pattern only appears to new instructors (hired within the last few seasons). With the amount of enrollments, students not being able to pass holds the waitlist longer for those students who are eager to register for swim lessons.
To solve the skill-based problem, I proposed an immersion scenario-based eLearning experience to help swim instructors practice providing specific and actionable feedback in a risk-free environment. The scenario-based eLearning will show instructors the realistic and memorable consequences.
After the proposal was accepted, I acted as the Subject Matter Expert (SME) to develop an action plan suited for the results. I used Cathy Moore’s action mapping process to dissect the problem and identify any contributing factors. This would be the time I conduct interviews to understand instructors’ responsibilities, expectations, and common mistakes. All this information was captured using Mindmeister to develop an action map.
After thorough investigation and understanding, I proposed a specific and measurable performance goal that would incorporate the learning experience.
Session retake per student will decrease 60% by the end of the year as the instructors provide more constructive feedback.
I worked as the SME to develop actionable and observable tasks and behaviors the learners would need to meet the performance goals. After careful and thorough analyzation with the client, I determined the problem was boiled down to 3 components:
With this information, I was able to identify the high-priority actions. In the end, this allowed me to get to the bottom of the issue and focus the training to just providing strength and actionable feedback to swimmers.
The performance goal revealed two high-priority actions. These actions became the foundation of the entire eLearning experience and reduced cognitive load.
After action mapping was approved, I moved into the development text-based storyboard using the high-priority tasks. The scenario-based questions were determined by the tasks directly correlated to the performance goals and learning objectives. The questions were presented with a correct choice and two distractors.
If the learner chooses the distractor, they will see a real-life consequence, and be redirected back to the question with a “try again” button. The learner can also seek assistance from the mentor anytime when choosing the options for each scenario.
The mentor was something that I proposed as it was more fitting. This was a better choice because the learner can choose when and what they needed to review, rather than reading through information they already knew.
As the learner continues on the scenario, it was important for them to see their progression. Because of this, I incorporated a progress bar for them to monitor as each scenario was completed.
While working and receiving feedback from experts, it helped that the storyboard contained information that was clear for anyone who would be reviewing it (including SMEs, developers, any stakeholders).This was essential part of the design process as I embedded instructional practice and learning theory to make the experience as authentic as possible for the learners.
I started the visual design mockup as soon as the storyboard was approved. The organization’s brand color scheme along with the typefaces were used. I used Figma for clients to look through the visual assets to provide any feedback. The font type, size, color, button designs, progress bar were all approved before moving on to prototyping.
After applying any feedback regarding the theme and the assets of the mockup, I continued using Figma to create several layouts through wireframing and then later with color scheme and assets. The assets, texts, and color theme were all put together in layouts for opening slides, prompt slides, question slides, and mentor slides. After the approval, I developed the rest of the visuals in Figma. This saved a lot of time because I was able to get immediate feedback and approval without drastic change later on Storyline.
After completing the mockup, I moved on to creating a prototype on Articulate Storyline 360. The mockup designs helped me streamline the design of the entire prototype. Part of the streamlining process was to make sure that all the question slides, mentor slides, and consequence slides had similar designs. This way, the development would require less time with more consistency.
With the first draft of my prototype, the feedback was to provide some animations on the swimmers and adding audio sounds. This challenged me to gain a deeper understanding of Storyline’s audio editing function. In addition to animating the swimmers when swimming, I also animated the success meter as well as changing the state of the buttons. This made it more clear to the learners what was interactive on each slide.
When the feedback was given and final tweaks were made, it was ready for full development. The revisions that were made at this stage was really crucial as it made the process more productive and efficient. When the prototype was approved, I moved onto the full development.
During the full development, I used Articulate Storyline 360 to add features to complete the experience. Audio sound of the swimmers swimming was added along with animations to make the experience more engaging. I also added variables and triggers for each of the questions responses to make sure there was an opportunity to learn for every choice made (including the different distraction choices).
The challenge for this project was to provide a certificate at the end of the learning experience. I created a certification through Figma and integrated javascript on Visual Studio Code to generate a certificate for the learner with a custom font.
Mentor: The learner has access to the mentor, named Melanie, to assist them in every real-life scenario whenever support is needed. Each question has a mentor that would be able to provide additional support that corresponds with the situation.
Correct Feedback: When the learner chooses the correct response for the questions, this scene will immerse the learner by walking them through the positive consequences, then moving forward to increase their success meter.
Incorrect Feedback: If the learner chooses the incorrect response for the question, the scene will immerse the learner by walking them through the consequences of their action and seeing the result of the students’ behavior.
Downloadable certificate: I used Adobe Photoshop and Figma to create a custom certificate. The learner would be able to download this at the end of the experience. Once the learner completes the learning experience, it leads them to a slide that asks them to type their name and a submit button that will generate a certificate using their name.
It was really important to have a final test as it provided one more round of feedback. My ideal goal would be to have every person who would interact with the learning experience to provide feedback.
The feedback provided during the final testing were tweaks of spacings between the wordings, margin spacing, and any alignment with texts. With the final round of testing, it was encouraged that the learning experience be opened across multiple devices to make sure all aspects functioned correctly.
As a result of the project, the main feedback was that the project was user-friendly, professional, consistent, and clear. The users enjoyed the color scheme and animations as it made the experience a lot more interactive.
Given the chance, I would like to incorporate xAPI for data on user’s interaction. I would like to provide feedback to the learners at the end of the course whether or not the certificate of achievement would be presented and to see which part of the learning experience was the most difficult.
Through this project, I learned that every detail was important in the learning experience, from text size to animations, to providing real-life scenarios. Being able to go from such a big picture through action mapping and efficiently providing an end result that suited not only the SMEs but also the learner was one of the best feelings.
Take a look at my other projects below!
This is a scenario-based eLearning concept project designed to help sales representatives convert leads to clients.
Learn MoreReach out if it looks like we can collaborate! Just leave a message to get in touch.