Scenario Based eLearning Simulation
This is an eLearning simulation that allows the user to test their reaction speed and get a rating on their performance. The purpose is to give users a means for tracking growth or depletion in this area. There are resources attached to the simulation that can be practiced and reaction speed re-timed again and again.
Audience: Customer Service Representatives
Responsibilities: Instructional Design, eLearning Development, Visual Design, Storyboard, and Mockups
Tools: Articulate Storyline, Figma, Mindmeister
I developed this interaction as a tool for an engaging way to check a commonly untested skill. There are embedded resources that can provide a challenge to the user when looking to improve their speed. .
Overview
Process
When creating the concept for this interaction, I wanted to challenge myself to use some outside applications and then integrate them into a Storyline project.
I decided that I would use After Effects to make a custom timer that provided some extra pressure throughout the project and also added some visual appeal. I wanted to make the timer have a countdown effect that was both numerical and also visual. This was accomplished by building a circle around the timer and then make a track path that matched the seconds as they counted down. Finally, I added the "bump out" effect to build a more dramatic feel with each tick down.
Additionally, I used JavaScript to create a code that would track the time it took the user to complete the activity. Doing this also allowed me to explore variables and layers with the ending feedback that is submitted upon completion. Although there are some Articulate Storyline timer tools that have been added to their selection, I wanted to ensure that I could calculate the exact values I was looking to track (in this case: time spent on each slide). Using JavaScript allowed me to completely customize what I needed tracked and integrated seamlessly within the project.
Visual Design
Adobe Illustrator was used to take the vector graphics I was looking for and manipulate them to match the feel and theme I was aiming for. Illustrator also provided a way to recolor the graphics as necessary, although I ultimately decided to keep them mostly transparent.
The color palate for this interaction was a light, pale green which I chose because of its calm and "earthy" feel. I wanted to take this approach since I wanted the main focus to be on selecting the correct option instead of having a distracting or unappealing background.
Final Thoughts
In the end, I wanted to create a project that stretched my skillset and allowed me to "play" with what is possible. Although, I only scratched the surface of all that can be accomplished, I was excited about the ease in which all the tools I used worked together. In the future I will continue to push myself to try new ways to creating engaing, fun, and effective learning solutions.