This concept project is a scenario-based eLearning experience designed to give drivers the confidence to change a wheel during a tyre puncture to reduce the amount of roadside recovery assistance callouts.
Experience the Full Project
Audience: Car and van drivers
Responsibilities: Instructional Design, eLearning Development, Visual Design, Storyboarding, Action Mapping, Prototyping
Tools Used: Articulate Storyline, Vyond, Canva, Java Script, Freepik
_____________________________________________________________________________________________________________________________________________
Tyre punctures are one of the top three causes requiring roadside recovery assistance due to the driver not knowing how to change a wheel on their vehicle. This is costly for breakdown services and can lead to other accidents not getting immediate attention due to recovery support assisting with replacing customer’s tyres.
After looking further into this issue, it is apparent the drivers are not confident changing a wheel on their vehicle due to no prior experience of doing so or not having the confidence while on a commute.
Through creating a scenario-based eLearning experience, learners can practice making choices during a tyre puncture scenario. The overall outcome is for drivers to have the knowledge to change a punctured tyre and feel confident to do this during a commute. This will reduce the financial impact of the problem by providing drivers with a risk free environment to make choices and see consequences.
To create a captivating learning experience, I followed the ADDIE model of instructional design. ADDIE is short for analysis, design, development, implementation and evaluation. For the analysis stage, I consulted an experienced Breakdown Roadside Mechanic as my subject matter expert (SME) to define the main stages required, by a driver, to change a tyre puncture.
After this, we set an overall goal for the project which is the following: tyre puncture call outs to decrease by 20% through drivers having the confidence to change their own tyre.
Moving onto the design phase, I continued to work with the SME to create a branching scenario based on main stages of changing a tyre. There are numerous situations where a tyre puncture may occur, however, I chose to base this scenario on a family of a Mum, Dad and two children driving to the beach for a day trip.
Through on-going communication with the SME, I ensured the scenario was built on reality. If the learner makes an incorrect choice, after being asked a question, they are shown through animation and text the potential consequences, such as a tyre blow out or a near miss with another vehicle. They are then taken back to the initial question. Alternatively, if the learner selects the correct choice, they are shown the positive outcome and directed to the next question in the scenario.
At any time during the scenario questions, the learner can access a job aid which provides the information required to make the correct choice.
.png)
Slide from branching scenario
______________________________________________________________________________________________________________________________________
Job aid
Style guide
Once the branching scenario was approved, I began developing visual mock ups. I used Canva to design graphics and create a style guide and found the characters and backgrounds in Vyond suitable for the overall look and feel of the project. I followed C.R.A.P principles (contrast, repetition, alignment, and proximity) to maintain a consistent design throughout the project. This included rounded prompt boxes, equal spacing between design elements and a continuity of colour throughout the project. Satisfied with the design of elements, I moved on to creating a visual storyboard. The storyboard combined the visual mock ups with text from the branching scenario. When the storyboard was in place, I moved onto developing the project in Articulate Storyline, adding interactivity, animation and focused on the user experience (UX) design of the project.
Scenario scene 6
Completion - final scene
Scenario scene 18
I created a visual storyboard in Canva and then was able to collate all the visuals and text from the branching scenario in one place.
Through doing this, I was able to focus on the programming of each slide and prepare to develop the animation in Vyond and bring the project together in Articulate Storyline.
Before creating the whole project, I developed an interactive prototype to gather feedback on the functionality of the resource. The prototype was made up of the screens 1-12 of the branching scenario – the welcome screen to the outcomes of question one. Through developing these screens, I would get a clear, overall sense for the project’s flow.
After creating the welcome screen, I demonstrated the purpose of the progress meter, a form of gamification, to show how the learner will progress through the resource. To show progress, a tyre would change colour, as per the style guide, accompanied by a positive sound effect to recognise a correct choice. An incorrect choice leads to no change in colour and a negative sound effect. The progress meter required the use of variables to recognise whether the learner got the question correct or not.
In the beginning slides, I showed how a job aid can be accessed at any time during a question, through clicking on a button next to the progress bar – this required the use of layers. I brought the visual storyboard to life through animation using Vyond. This included using motion paths to animate the car and the use of camera movement to zoom in on sections of a scene. When I was pleased with the animations created in Vyond, I used Articulate Storyline to incorporate smooth fading transitions of text prompts.
When I had created the protype, I moved forward onto user testing and from here was rewarded with a positive response and constructive feedback which allowed me to tweak and modify the protype to enhance the experience further.
______________________________________________________________________________________________________________________________________
The full development of the project was straight forward having developed a fully functional protype. I was able to ensure continuity throughout using my acquired knowledge in Vyond and Articulate storyline.
Key Features
Use of Animation
Vyond has supported really bringing the story telling element of the project to life. The animations automatically engage learners with the varied and subtle movements such as the expressions on characters faces to reflect emotions during a scenario. Also, the animation in this resource has built an element of fun, increasing engagement and confidence in the users as they feel more at ease.
Background Music and Sound Effects
I used background music to accompany the introductory slides to enhance engagement and music on the last two slides when informing the user whether they has been successful or not. As the course progressed, with text to be read and interpreted, I found background music would be a combination of visual and audio overload – as outlined in Mayer’s Principles of Microlearning Multimedia design. I used carefully planned sound effects during all animations before the questions were introduced.
Gamification and Job Aid
The progress bar gives the learner immediate feedback allowing them to track their progress through the resource. Adding subtle sound effects for correct and incorrect answers adds a sense of fun. The use of progress bar encourages learner to use the job aid to help them answers correctly which is available with every question.
Development in Storyline after importing video from Vyond
Certificate awarded upon successful completion
Branching Scenario
The scenario-based approach, to this project, has allowed me to show the outcomes for every answer to each question through animation and a text summary. If the learner answers any question incorrectly, they will be shown why they are incorrect and need to start the resource again. I used variables and conditions to track the learners response to questions meaning they would either complete the resource successfully or need to start again.
Certificate
I designed a certificate in Canva which rewards the user when they successfully achieve the correct answer to all questions. The user is required to insert their name and then download a copy of the certificate, in PDF format. To do this, I used triggers in Articulate storyline and JavaScript.
Unsuccessful completion scene
Option to print a certificate
There are several directions I would like to take this concept project. User feedback proved valuable and these are the following areas commented on for potential development:
Extended Branching Scenario Narrative
Some of the feedback from user testing commented on, a need for, guidance on cars that do not have a spare wheel and provide a repair kit with sealant as an alternative. If I was to develop the resource further, it could be that the branching scenario is extended to include action to take without the use of a spare wheel. User feedback also commented on the need for more guidance on how to fix the spare wheel onto the car after removing the spare wheel. Again, this could be resolved by, once again, extending the branching scenario to illustrate the process of fixing on the spare wheel securely. The job aid would be updated to reflect this addition.
Personal Reward
Creating this experience has given me with the opportunity to work with an SME through to receiving feedback from users and peers. This project has allowed me to build on my instructional design skills while using new programs to create a captivating experience. I have loved the whole flow of the process from identifying a business need to bringing a scenario to life.
