The catalogue kept growing. The dropdown didn't.

The gap. The old dropdown worked when the catalogue was small. At scale, it buried the products people actually came for: unclear groupings, hover menus that closed mid-click, and no room for the categories customers were searching.

The challenge. Replace the dropdown with a mega menu that lets customers browse by category and sub-category, surfaces the right product types directly in the navigation, and scales as the catalogue grows. The mega menu should also serve three very different shopping intents at once, deal-hunting, trend-following, and practical everyday buying, and stay consistent across desktop and mobile.

See heuristic review

The dropdown failed accessibility, and that was the least of it.

The first step was identifying exactly where the existing navigation fell short, on both desktop and mobile, so every later decision could be traced back to a documented gap. Four surfaced.

Competitors showed the pattern. Customers showed the intent. Analytics set the order.

With the gaps mapped, I triangulated three lenses, each feeding a different layer of the new hierarchy: competitors for the interaction pattern, customer research for the parent groups, and analytics for what goes where.

I gathered real examples from e-commerce fashion sites to understand how other brands implement mega menus successfully.

What worked across competitors: organised image displays for thematic and non-product categories, and visual text-link images that were easy to click on desktop and tap on mobile.

What didn't: overly text-heavy layouts with too few images were difficult to scan. And even where top-level parent categories were well organised, sub-categories often required too much effort to navigate.

See competitive analysis

A user-focused study helped us understand customer intent. After categorising shopping motivations, three primary user types emerged, each with their own preferred first click in the parent menu.

See customer journey map

Customer journey mapping for a persona

To inform the navigation hierarchy, I analysed Sales Data, Page Value, Site Search terms and Product Quantity from Google Analytics.

• Sales data set the secondary category hierarchy→ Dresses 39% · Tops 32.3% · Bottoms 16% · One-Piece 7.9%
• Page value revealed high-interaction parent categories→ Singapore: Tops, Bottoms, Clothing · Malaysia: Bottoms, Tops, New In
• Top search terms flagged what to surface directly in the menu→ Knit (material) · Shorts (product) · Denim (material) · Culottes (style)

Restructuring the tree, category by category.

With the hierarchy set by the research, I rebuilt the full navigation tree, weighing each existing category against the data before deciding whether to keep, rename, or restructure it.

Key observations by category:

• Collections were rarely searched and the copy wasn't resonating, customers needed a clearer route to occasion and thematic products
• New In and Clothing had high conversion rates and needed to stay prominent
• Lifestyle and Gifts needed copy improvements

From a flat dropdown to a full mega menu

Wireframe proposal. Content was divided into two areas: the main navigation and a utility bar. All utility bar items became direct links, freeing the main navigation to expand into a full mega menu.

Mega menu concept. Most users begin their journey browsing by product style, occasion, latest trends, or sale items. Given Love, Bonito's strong social media following and regularly updated feed, I also designed a featured marketing section for users who are already familiar with, and loyal to, the brand.

Workshop and stakeholder review. After designing the wireframes, I ran an internal workshop with key stakeholders including the Founder, COO, Customer Care, Merchandising, Marketing, and Product teams. Adjustments were made based on their input before moving into tree testing.

Ten shoppers, six tasks, tested on the sidewalk outside the store.

Rather than recruiting a panel, I took the test to where the customers already were: outside the Love, Bonito store at 313@Somerset, with walk-in and window shoppers.

Scenario tasks. A mind map helped identify the most critical access points. Six scenarios were selected based on search history and upper-management priorities; all correct answers were locatable within the header and sub-header navigation.

Objectives: compare performance between the old and new site navigation, and identify the pathways users take to find a specific product.

Metrics captured:

• Success rate: percentage of users who found the correct category for each task
• Task performance: time taken on old versus new navigation
• Directness: users who found the right category immediately, without backtracking
• Pathways: observed first clicks and nominated answers using a think-aloud approach

What was hard, and what I'd do differently.

What was hard. Budget constraints meant the test ran on manual setup and manual data cleaning, which took far longer than planned. And because key stakeholders weren't in the room during testing, the results had to be re-proven afterwards, with video recordings and written reports, before the final design was approved.

What I'd do next. Bring stakeholders into the sessions from the start, so the evidence lands live instead of second-hand, and budget for a dedicated testing tool up front.