Overview
Creating an interactive course for safer E bike riding among local high schoolers
With the rising popularity and accessibility of E bikes in San Diego, especially among high school students with little road experience, local hospitals are seeing more accidents, some even being fatal.
In collaboration with UCSD Health, Scripps Health, San Diego Bike Coalition, Rady Children’s Hospital, and Safe Kids San Diego, we translated pages of E bike safety content provided by educators into an interactive online course to be implemented at San Diego high schools (specifically Encinitas), with the ultimate goal of reducing E bike injuries.
Problem
Even with the spike in E bike accidents among young teens, there was no system to educate and keep students accountable
With no system in the local community, teens are left to navigate safety information on their own, often without guidance or accountability. This gap means many are learning through trial and error, which can lead to accidents.
There needs to be a system that fills the educational gap to ultimately lower the number of injuries
Introducing a structured program directly into high schools would reach teen students where they already are, making it easier to ensure they engage with the material and apply it.
Solution
An online E bike course that breaks content into interactions and bite-sized lessons
Dense pages of text weren’t keeping students engaged, and they preferred learning through interactive experiences. We introduced Timmy the Tire to guide students through 10 modules, using character-driven stories and interactions to make the content engaging and easier to absorb.
Quizzes after every module to support knowledge retention
At the end of each module, short quizzes help reinforce key concepts and give students a clear sense of what they might need to revisit.
Encouraging progress with a milestone map and a certificate redeemable for an E bike parking pass
Students need clear milestones, visible progress, and tangible rewards to stay motivated from start to end. Course and module progress indicators help students understand where they are, while a journey-based milestone map encourages them to unlock content and earn a completion certificate redeemable for an E bike parking pass.
research
Existing online learning platforms helped us understand the standard
We evaluated the strengths, weaknesses, and potential improvements of various learning platforms, especially how they handled interactions and animations, as well as common features.
We also wanted to hear directly from high school students to understand their specific needs
Because most learning platforms are for a wide age range, we sent out a survey to high school students to see how they learn best. We found that students tune out during dense text and need engagement through animations and interactive activities, as well motivation through progress indicators.
Design Process
After compiling our research, we ideated and mapped features to address expectations and needs
We ideated features based on our research, charting features based on their impact on the experience, and implementation effort. This guided which features were designed and developed in each project phase.
We established a design system early to keep the team efficient and consistent
We created a set of styles to to reflect the course's core values: engaging, friendly, and approachable. This helped us to iterate on designs quickly, which we had to do for 10 modules.
Using components to scale and adapt rapidly as we got new module material
Starting MVP, we only had the copy for 2 modules of content, which meant we had to prepare to integrate new content and make sure our designs can adapt, while staying consistent. So, we created reusable templates and design components. This made it easy to prototype new modules quickly while ensuring every screen looked and felt part of the same experience.
Exploring ways to break down information into various types of interactions
To keep students from getting bored with repetitive activities, we experimented with a variety of interaction types. We reused some interaction types across modules, but mixed up the format and context enough to keep them feeling fresh.
Multiple rounds of usability testing helped us determine points of iteration
We went through two rounds of usability testing through MVP and V2 designs to figure out areas of improvement. Fellow designers who weren’t on the project helped us uncover usability issues, while our developers shared feedback on the technical side to refine the experience and guide iterations.
01 Switching to paginated pages to break the content into more manageable chunks
Originally, each module was an infinitely scrolling page, but testing showed this made it easy to skip interactions and felt cluttered. Switching to a paginated design created a clearer visual hierarchy and encouraged students to go through the whole interaction.
02 Adapting progress indicators to make progress easier to see and understand at a glance
Our first in-module design tracked what percent of the course you had completed, but this lacked specificity in how many interactions were left. Instead, we switched to a step-by-step progress bar to better represent the paginated format and show exactly how many sections were left in the module.
03 Separating competing actions into a structured, linear onboarding journey
We noticed users getting confused during the course onboarding section because of conflicting actions. So, we redesigned the flow to be more linear, with only one primary action per page and button loading animation to prevent users from skipping important content.
Dev Handoff
As of August 2025, we’ve officially launched the project and are working to collect success metrics (woohoo!)
We plan to certificates earned, and average quiz scores per module to gather quantifiable numbers to roughly measure impact as schools in the Encinitas area push out this course.
Our long term goal is to see a decrease in local E Bike accidents in the Encinitas areas through an improved knowledge of E bike safety post course. Ideally, with access to sufficient tools to support comprehensive tracking, we will also measure success through improvements in pre- and post-quiz scores, and high course completion rates, as well as adoption of this course in more schools in San Diego county!
Takeaways
What I’d do differently: Designing for responsiveness
I was so focused on building out interactive designs that I overlooked responsiveness until too late. Once we began implementation testing, we noticed navigation and content getting cut off on different screen sizes. Fixing this meant backtracking, and since our designs were already in its final stages, it became much harder to adapt. This has taught me that testing and designing for responsiveness needs to be part of the process from the very beginning.
Learning how to design and prototype a wide variety interactions
After 20 weeks of ideating, exploring, and prototyping, I created many different kinds of interactions. It took lots of experimenting and reworking designs that didn’t work as expected to learn that the most effective micro-interactions guide users, make experiences more engaging, and feel most impactful when seamlessly integrated into the larger user experience.
And sometimes, it simply takes MANY iterations to get there. But that's part of the process too!
