Every year, the Brookhaven community comes together for a remarkable event that combines fitness, fun, and philanthropy – the Brookhaven Bolt. This annual 5K Run/Walk/Stroller push through the picturesque Ashford Park neighborhood is more than just a race; it’s a celebration of community spirit and local education, with all proceeds going to support Ashford Park Elementary School.
The Brookhaven Bolt utilizes Race Roster to streamline the registration process and race management. This event management platform offers online registration, secure payment processing, and advanced participant tracking. So, we needed to create a website design that seamlessly interacted with Race Roster’s platform, providing a clear, prominent pathway for participants to register. This meant designing strategic call-to-action buttons, creating a clean user interface that would complement the Race Roster registration process, and ensuring that visitors could easily understand how to complete their registration with minimal friction.
Brookhaven Bolt’s previous website (see below) didn’t reflect the race’s true character—a vibrant community event that brings people together for a great cause.
The organizers recognized they needed something more. They needed a modern, polished site that would showcase Brookhaven Bolt as the premier community race it has become. And that’s where we came in…
Our Project Approach
Our design process for this project started with a comprehensive discovery meeting to understand the event’s core objectives and target audience. The primary goal was to create a website that would not just inform but actively encourage participation and sponsorship. To accomplish the new look and feel the organizers desired, we knew a logo refresh would also be needed. Otherwise, we’d have a clash between the old branding and the new site design.
After our discovery meeting, we began reimagining Brookhaven Bolt’s logo. We transformed the static “bolt” concept into a dynamic, stylized runner leaning forward, creating a sense of momentum that literally embodies the race’s character. By overlapping the words “Brookhaven” and “Bolt,” we visually represented connection and forward motion. The typography leans subtly, mimicking a runner’s stride, with the letterforms bleeding into each other to suggest the fluidity of movement. This design approach turned the logo from a simple wordmark into a storytelling element that speaks to the race’s essence.
After the organizers approved the logo, we began working on the website design. The new logo’s dynamic energy became our north star. We developed a modern website design that prioritized the user experience and would sit on top of the WordPress platform. The new site features a clean, professional layout designed to make information easily accessible and registration seamless, with a clear integration point to the Race Roster platform.
We implemented a responsive design that performs consistently across desktop, tablet, and mobile devices. Technical considerations included optimizing for fast loading speeds, ensuring mobile compatibility, and creating an intuitive navigation structure that guides visitors toward race registration, sponsorship info, and event details.
While the turnaround time for this project was tight, we were able to launch on February 17, less than one month later, to coincide with the race registration opening.
Design Highlights
The visual design of the Brookhaven Bolt website was intentionally crafted to capture the race’s vibrant community spirit.
We selected a bold color palette of purple and yellow – colors that not only pop visually but also represent energy and community. The deep purple provided a professional backdrop, while bright yellow accents created dynamic call-to-action elements that immediately drew the eye.
Typography played a crucial role in our design strategy as well. We chose a modern, readable font (Poppins) that balanced readability with a contemporary feel, ensuring that information is easily digestible across all devices. Large, clear headings and strategic text hierarchy guide visitors’ eyes exactly where we want them to look.
The imagery on the site focused on authentic moments from previous Brookhaven Bolt races. We chose images that captured the event’s true spirit – runners of all ages participating together, showcasing the race’s inclusive community feel. These weren’t staged photos but real moments demonstrating the event’s energy and purpose.
The site also includes subtle animations that bring these images to life. As visitors scroll, images and text move into place with a smooth, natural progression. These animations serve a practical purpose: guiding users through the site while maintaining visual interest. Parallax scrolling and gentle loading effects create a sense of depth and movement. Each section reveals itself dynamically, mimicking the progression of runners on race day.
The Launch!
As the 2025 race approaches, the new website stands as a testament to what’s possible when design meets purpose – a clean, exciting digital platform that invites participation and celebrates community. The race is on, and now, so is their website! Check out the Brookhaven Bolt website here.
