Mega Menu 2.0

Ahotu lists endurance races in 193 countries. Its old navigation was a flat dropdown that couldn't hold that, and every fix had to work two ways at once: for a person clicking through, and for a search engine crawling every link. Along the way, we ran into real problems. At certain breakpoints the columns started overriding the available screen space, so we had to design a fallback instead of forcing everything to fit. Some sports also needed their distances rethought into curated spans rather than raw numbers, so users could filter by something they'd actually recognize. Mobile turned out to need a completely different filtering solution than the desktop mega menu, and a 'Right Now' column went through a lot of testing but ultimately didn't make it into the final release.

Behind the ticket was a simpler problem: the old filtering hadn't kept up with how the site had grown, and a menu that couldn't keep up made Ahotu feel outdated to the athletes it needed to convert. The goal wasn't just a new component: it was a menu effective enough that someone could find their race without friction, and credible enough that Ahotu looked like the platform it actually is.

The ticket asked for a flyout mega menu that made bookable events, top event countries, and event highlights easy to find, while staying fully crawlable. Two disciplines had to agree on the same component: Usability and SEO.

Before drawing anything, we built a reference board to explore how other e-commerce and outdoor retail sites approach mega navigation. We looked at ka-yo.com, Zalando, The North Face, YETI, Care of Carl, and Dometic's. IKEA also became a recurring reference throughout the project. Its approach to navigation helped inform several different decisions at different stages of the design process.

Click to view full size

Research also meant testing our own site. An earlier exploration looked at what happened after someone clicked a category in the menu and landed on the results page, and that's where we found the real problem the whole project ended up solving.

Click to view full size

Three iterations later, that same click led to just two filters being applied: 'Trail running' and 'Half marathon.' The country wasn't forced on the user either: it was just a suggestion they could pick or ignore. That's the real reason behind the final menu layout: instead of clicking one category and having everything pre-selected for you, Distance, Popular Countries, Month, and Popular Events each became their own separate option, so a user could pick from any of them, in any combination, on their own terms.

The final column structure didn't emerge all at once. It evolved step by step, starting with sports, then adding Distance, Popular Countries, and eventually exploring two different approaches to the Popular Events section.

Each iteration was tested against real data as early as possible. Placeholder content was quickly replaced with actual event names and event counts to understand how the structure would perform at scale. From 2,406 events in the United States and 1,406 in France to 650 in Canada and 320 in South Korea.

Sport prioritisation was also based on sales data rather than intuition. Running generated 454 sales, followed by Trail Running with 239, Triathlon with 71, and Walking with 49. This helped guide where we focused our attention first, with Running and Multisports receiving the deepest exploration early in the process.

The sub-nav pill started as a single Figma component with three states: default, hover and active. It is the small selector used to switch between categories like Triathlon, Duathlon and Swimrun. I first built it for Running, then adapted it for Cycling before scaling it up to the full eight-item Multisports navigation. From there, every pill across the project was built from the same component, keeping the interaction and visual behaviour consistent.

The less visible part was making everything work. With seven or more horizontal sub-nav variations, every click, hover and active state had to behave consistently, including the correct underline state. It's the kind of work that disappears in the final design, but getting those small interactions right is what makes the experience feel seamless.

Click to view full size

A parallel taxonomy problem, running underneath the UI work: the old site's distance filters used checkboxes on some sports and free min/max fields on others. A fixed, clickable mega-menu column can't hold either: it needs one curated list, decided sport by sport.

Click to view full size

Doing this by hand for Running surfaced something nobody had caught before: the live filter order was Ultramarathon, Marathon, Half marathon, 5 km, 10 km. Five kilometers listed before ten, in a list that's supposed to run longest to shortest. A real ordering bug, live in production, found only because every value was being manually re-typed and checked. "Nobody had seen it, but I found it."

The same audit is also where the 'span' idea came from. Niche disciplines like Aquabike and Aquathlon don't have a few standard race distances the way a marathon does. On the old site, that was handled with a free-text field where a user typed in their own minimum and maximum distance, but a fixed menu column can't offer that kind of open-ended input. So instead of forcing a text field into a simple menu, I researched the distance names athletes would actually recognize, things like world championship or Olympic-distance conventions, and turned those into a small, named list instead. For Aquabike, for example, that list is: Long distance (140.6 km), Middle distance (70.3 km), Olympic, and Sprint. It's a UX decision about what a user recognizes, not a technical shortcut.

The desktop pattern depends on hover or click to open a flyout, with columns laid out side by side. That doesn't survive a resize down to a phone. The key thing I'd take from this project: mobile needed a genuinely different interaction, not a smaller version of the same component.

What we built instead is a four-level drill-down: tap the hamburger for six sport categories, tap one to reveal its individual sports, tap a sport to reach its filter overview (Distance, Popular Countries, Month, Popular Events beneath), tap a filter to reach its values.

Click to view full size

The convention for desktop mega menus is to drop down from the top. That doesn't fit a hierarchy you're moving forward into. So each level instead slides in from the right: the same direction, every time, tap after tap. The reference for that motion, again, was IKEA's mobile navigation. The back control follows the same logic: identical position, identical behavior, on every single screen in the drill-down, so a user can always step back predictably no matter how deep they've gone. Small rule, but it's the kind of consistency that decides whether a four-level flow feels smooth or feels lost.

Two ideas got real design work and didn't make v1, for different reasons.

Click to view full size

Once tech had a working prototype, we ran a structured review pass: priority-labeled sticky notes, each tracked to sign-off with separate Dev and Des checkboxes.

Click to view full size

• ✓Selected top-nav category (e.g. "Running") stays underlined while its menu is open, closing the gap flagged earlier as "select state needed"
• ✓Winter sports sub-nav reordered by actual race volume, not alphabetically
• ✓Tab selection resets on menu close or category switch, so a stale sub-tab can't persist where it shouldn't
• ✓Mobile account buttons (Log in / Create account) kept in their existing position: continuity over novelty
• ✓Drop-shadow removed from the top edge; a plain visual clean-up

Every sub-tab across every category was wired into an actual click-through prototype in Figma, not a set of static comps handed over with a hope. That's the difference between a design that looks finished and one that's been proven to actually work as a sequence of real interactions, mobile included.

Click to view full size

The point where I'd say the project actually "nailed it": every top-level category finished to the same standard, with real, category-specific content throughout, not just Multisports, which had carried nearly all the detailed exploration.

Click to view full size

And then the version that matters most: what's actually live.

Click to view full size

Click to view full size