Roadside Readiness
How I turned a common cycling problem into a hands-on eLearning course
Every cyclist eventually gets a flat tire, often somewhere far from help. Roadside Readiness is a 9-scene eLearning course I designed and built for the Rocky Mountain Triathlon Club (RMTC) to teach members how to change a flat tire anywhere on the road.
I built it solo, from research through final development, to strengthen my advanced Storyline skills as part of Tim Slade's eLearning Designer's Academy. I wrote it, designed it, and animated it. My husband and I filmed the repair footage together, and I narrated the course as Jordan, its guide character.
This page walks through how I went from a training problem to a finished course. If you want the full documentation behind any stage, I've linked it along the way.
Course: 9 scenes, about 45 minutes
Created for: Rocky Mountain Triathlon Club (RMTC)
Role: Instructional designer, developer, animator, and narrator. My husband and I filmed the repair footage together.
Format: eLearning, designed to pair with hands-on practice
Tools:
Build: Articulate Storyline 360, custom javascript with AI assistance
Media: Adobe Firefly, Illustrator, Character Animator, Audition, and Premiere Pro
Planning: Miro, PowerPoint, Google Docs
Analyze
Who gets stranded by a flat tire, and why?
RMTC has around 500 members, and many of them, especially newer cyclists, don't know how to change a flat on their own. That gap has real consequences: getting stranded mid-ride, depending on someone else's time and tools, or paying a bike shop for a repair that takes ten minutes once you know how.
I also looked at how complex the content is. Changing a flat isn't hard, but it involves many small, sequential steps that are easy to get wrong the first time. That pointed me toward a blended approach: eLearning to build knowledge and walk through the steps first, followed by hands-on practice so the skills last. Because my husband and I are both experienced cyclists with the equipment to film our own demonstrations, I could build the course myself instead of relying on stock content.
Read the full Topic & Audience document (PDF) and the Blended Training Solution (PDF) document.
Design
What should learners be able to do?
With the problem defined, I moved on to deciding what the course would teach and how. I wrote eight learning objectives, which state what learners will be able to do, using the ABCD format. They range from identifying the items in a flat repair kit to changing a tire within 30 minutes and inflating it to the correct pressure. Each objective is tied to a level of Bloom's Taxonomy, so learners move from recognizing tools to performing the repair themselves.
From there, I mapped five core topics against the audience, objectives, modality, and how success would be measured for each. The topics are assembling a repair kit, changing a tire, patching a tube, identifying tube and valve specs, and understanding why the skill matters. I also mapped the course's structure and flow in Miro before building anything in Storyline, so I could check the sequence early, while changes were still inexpensive.
Read the full Learning Objectives document (PDF) and Design document (PDF), or view the Action Map and Outline in Miro.
Develop
Turning the design into a course learners can see, hear, and use.
RMTC didn't have a style guide, so I built one myself, aligned as closely as possible with the club's existing logo and brand. It includes a color palette, typography, a mood board, and character designs for Jordan, the course's narrator and guide, and Alex. I used Adobe Firefly to help generate the characters and several images, refined them in Illustrator, and animated them in Adobe Character Animator.
Style guide and characters
Next, I built a prototype in PowerPoint that covers a sample of each slide type in the course. It let me test layout and interaction patterns before building every scene.
Prototype
I recorded all of the narration in Adobe Audition, then brought it into Storyline, Premiere Pro, or Character Animator, depending on the slide.
For the physical repair steps, I wanted learners to see the real thing, not only an illustration. My husband and I planned a full shot list in advance, then filmed it: I performed each repair on camera and he filmed. I edited the footage and synced the audio in Premiere Pro. We also took our own photographs, so the course pairs real photos of each repair tool with Firefly-generated illustrations, giving learners both a realistic and a simplified reference.
I blended video and animation on purpose: video where accuracy and realism mattered most, and animation where it made the content clearer or more approachable.
Audio, video, and photography
View the Style Guide (PDF), the Visual Prototype (PDF), and the full Storyboard (Google Doc).
Three interactions were the most challenging, and I'm proud of how they turned out.
Three interactions
Custom tire lever cursor. In the tire lever scene, Storyline's default cursor is a plain hand, and I wanted something that felt like using a tool. I'm not a developer, so I worked with Claude and Gemini over many rounds of iteration to write custom JavaScript that replaces the cursor with a tire lever when it moves over the rim.
The cursor changes into a tire lever when the learner moves it over the rim of the tire. No audio.
Gear slider. Before removing the wheel, learners choose the correct gear with a slider. I created nine versions of the gear image in Illustrator, each with a different gear highlighted, and set them up as picture states on a single image in Storyline. The slider runs from 0 to 100, and triggers switch between the states as the learner drags it, so the highlighted gear updates in real time.
As the learner moves the slider back and forth, the bright orange gear in the cog image above it changes to match. No audio.
Hex wrench dial. A customized dial styled as a hex wrench, used elsewhere in the course.
The learner moves the hex wrench back and forth, as if turning it. Left and right labels light up to show which way tightens or loosens the axle. No audio.
Implement and Evaluate
How will we know the course works?
Implementation
Roadside Readiness is complete and ready to launch through RMTC. I designed it to work alongside hands-on practice, not replace it. The next step is pairing the course with an in-person workshop, ideally run with RMTC and local bike shops, where members can practice the skill soon after finishing the eLearning.
Evaluation
I built measurement into the course from the start. Each learning objective is tied to a way of checking understanding:
Knowledge checks and activity accuracy inside the course
Demonstrated skill during in-person practice
Self-assessment, which asks whether someone can change a flat on their own, at home or out on a ride
Together, these would give RMTC a clear, practical picture of whether the course is working, not just whether people finished it.
Want to see the course in action?
Preview a scene from the course, or head back to explore more of my work.