Motivation
My name is Jenna Mandel. As the creator of Dirt Bike Break Down, I've combined my three passions—videography, dirt biking, and coding—into one comprehensive project. My vision is to create a space where dirt bikers of all niches and skill levels can connect, laugh together, and engage in meaningful interactions. Accessibility has been a core priority from the beginning, which is why I've designed the entire website with consideration for screen reader users, keyboard-only navigation, and color blind accessibility features.
Development & Design
To gather valuable feedback, I conducted user testing with three dirt bikers from diverse backgrounds and skill levels. Each tester evaluated wireframes and early episode drafts, providing crucial insights into the site's functionality and content. I created comprehensive wireframes for all site pages and features using Google Slides, often presenting multiple design variations to understand which aesthetics resonated most with my target audience and why they preferred certain elements over others.
Main Page Iterations
Throughout the design process, my vision for the website evolved considerably. Initially, I only knew I wanted to incorporate a checkered pattern into the site's aesthetic. As I developed plans to include a Physics break down segment in each episode, I was drawn to a chalkboard theme that would complement this educational element. While I originally preferred a sleek black background, feedback from testers showed a clear preference for a lighter design, which led me to pivot toward a whiteboard aesthetic instead. This feedback formed the foundation of my design direction, balancing my desire to create something fun and engaging without making the site overwhelming to navigate or visually process.
Episodes List Page Iterations
Episode Page Iterations
Initially, I planned to showcase all episodes on a single page where viewers could watch content directly, with videos changing dynamically when selecting different episodes. After further consideration, I opted for a more structured approach by creating dedicated pages for each episode, complemented by a separate episodes list page for easier navigation. The gallery demonstrates several refinements I implemented, including the addition of episode duration and release date information, as well as optimized spacing for both desktop and mobile viewing experiences.
Banner Iterations
Throughout the website development process, my banner underwent several redesigns as I refined the site's visual identity. Despite creating designs I initially loved, I often found they either looked awkward when implemented or failed to align with my evolving vision for the project. This iterative approach ultimately led to a banner that truly complemented the site's purpose and aesthetic direction.
Website - Key Features
The color wheel feature attached to the navigation bar was my first interactive element designed to enhance user engagement. Initially, this feature only changed the checker pattern colors within the navigation bar itself. However, after receiving user feedback, I expanded its functionality to transform the checker pattern across the entire site background instead. This modification significantly improved the overall aesthetic and created a more cohesive design experience, making the interactive element feel like an integral part of the site rather than an isolated feature.
Interactive polls represent a cornerstone feature of my site, directly supporting the project's central vision of fostering simple yet meaningful engagement among users. By implementing these polls, I created an accessible way for dirt bike enthusiasts to connect and interact in an enjoyable, low-pressure environment that encourages community engagement.
For both the episodes list and individual episode pages, I focused on creating an experience that balances visual appeal with functional design. My goal was to develop interfaces that capture the energetic spirit of dirt biking while ensuring users could intuitively navigate content without confusion or distraction. This approach allowed me to create pages that feel playful and engaging without sacrificing the straightforward usability that viewers expect.
The footer, though added later in the development process, became a defining design element for the entire site. After creating its distinctive look, I was so pleased with the result that I redesigned the banner to match this aesthetic, creating visual cohesion between the top and bottom of each page. Beyond its visual appeal, the footer serves an important functional purpose by housing essential links to our YouTube channel, Spotify playlists, and contact email—providing visitors with clear pathways to connect with Dirt Bike Break Down across different platforms.
Episodes - Highlight Reel
Software & Tools
Our filming setup combined simplicity with quality, utilizing an iPhone mounted on a tripod with a ring light to capture HD footage that meets film industry standards. For the first two episodes, we intentionally chose Jordan's bedroom as our set to create an intimate, conversational atmosphere. The background featured meaningful elements that reinforced our dirt biking theme—our dad's vintage buggy graphics adorned the wall behind us, while our signature T-Rex stuffy and Shawna's retired dirt bike helmet were positioned to our right. This thoughtful arrangement created a space that felt both personally inviting and authentically connected to our podcast's motorsport focus.
Tackling the editing process introduced me to Descript software, which initially required time to master but quickly became an invaluable tool in my workflow. I selected this platform specifically for its reasonable pricing and powerful transcription capabilities, along with its extensive music library and audio adjustment features. Despite a few minor quirks, the intuitive interface accelerated my learning curve considerably. Though time-intensive, the editing journey proved deeply rewarding—not only did I enjoy the creative challenge, but I also discovered my unique voice as an editor while bringing each episode to life.
My hosting strategy evolved as I implemented more complex features for the site. Initially, I deployed through GitHub Pages for its simplicity and version control capabilities. After securing a custom domain through NameCheap to enhance the site's professional appearance, I encountered a technical limitation—GitHub Pages' static hosting couldn't support the dynamic .php and .jsonp files required for my interactive polls. Fortunately, NameCheap's hosting services provided the perfect solution, offering a user-friendly cPanel file manager that made deploying and managing these essential interactive elements straightforward and efficient.
GitHub Repository
For version control and project management, I leveraged GitHub throughout the development process, using Visual Studio Code as my primary interface for managing commits and uploads. For those interested in exploring the technical details behind Dirt Bike Break Down, including code structure and implementation specifics, you can access the complete project repository through the GitHub link provided above.
Future
Looking ahead, I've noted several enhancements that would elevate both the production quality and user experience of Dirt Bike Break Down. On the content side, I plan to revisit our existing episodes to improve audio clarity and narrative flow, particularly by incorporating additional audio elements that better engage listeners and provide clearer segment transitions. Technical improvements are also a priority—upgrading to professional microphones, correcting the resolution issues in our MaveriX episode, and refining our set composition to achieve more balanced framing. Content expansion remains important, with plans to include footage of Jordan, Shawna, and me actively riding. For the website itself, I aim to increase user engagement by developing additional interactive polls and implementing a dedicated contact page where viewers can suggest future content, creating a more collaborative community experience.