Ride Ride SD
Role
Product Designer
Team
1 PM, 4 Product Designers, 8 Developers
Team
Figma, Illustrator
Timeline
20 Weeks
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
The Challenge
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.
Problem
Why it Matters
There needs to be a system that fills the educational gap in order to ultimately lower the number of injuries in the community
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.
The Solution
An online 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
Competitive Analysis
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. What stood out was how much other learning experiences lean on interactivity and learning checks, not just to keep people engaged, but to reinforce long-term retention of the material.
Research
User Surveys
We also wanted to hear directly from high school students to see which features to focus on
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.
Process
Ideation & Feature Scoping
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.
Process
Design System
We established a design system early to keep the team efficient and consistent
We built the course’s brand from scratch to reflect its core values: engaging, friendly, and approachable.
Four designers versus interactions and animations for 10 modules, how do scale and adapt?
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.
Process
Prototyping Interactions
We prototyped and tested many different 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.
Process
Usability Testing
Multiple rounds of cross-functional testing helped us determine points of improvement and 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, understandable 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 adapt to the new 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.
Process
Launch
As of August 2025, we’ve officially launched the project and are working with to collect success metrics (woohoo!)
We plan to track accounts created, 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 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
Looking back, I would’ve established clearer guidelines for responsiveness earlier. Since we considered it after we had mostly established our designs, it was harder for us to scale down and we had to do a lot of extra work to redesign components and discuss with our developers.
Learning how to design and prototype microinteractions
After designing interactions and prototyping animations for 10 months, I’ve learned that micro-interactions guide users, make experiences engaging and should be designed to be integrated with the rest of the user experience.
