Rethinking the Site Navigation of Love, Bonito
Love, Bonito's navigation was built for a startup, and the brand had outgrown it. As one of Asia's leading omni-channel fashion retailers re-platformed for enterprise scale, I led the end-to-end redesign of its site navigation, from heuristic and analytics review to a mega menu validated through tree testing outside the flagship store, where task completion rose from 12% on the old structure to 80% overall on the new.
Love, Bonito is a vertically integrated, omni-channel fashion store across Asia. I joined when LB secured funding to invest in its technology stack, transforming the store from a marketing-led experience into a user-centred, omni-channel destination.
My role: I owned the whole web redesign but for the case study, I will focus on the navigation redesign, a critical e-commerce experience that helps users quickly find what they're looking for. As part of the research, I've conducted heuristic evaluation, competitive analysis, quantitative and qualitative research, prototyping for tree testing.
Business goals:
- Mega menu: replace the dropdown menu with a structure that can actually hold the catalogue
- Findability: let users browse by category and sub-category to find and purchase what they came for
- Relevance: surface the right product types directly in the navigation
- Scalability: a menu structure that accommodates future product additions without another rebuild
This is a walkthrough of the new site navigation for Love, Bonito, a critical piece of a revamped website experience for one of Asia's leading omni-channel fashion brands.
As the product shifted from a startup into a robust and omni-channel platform, the e-commerce structure needed to keep pace. The old dropdown worked when the catalogue was small; at scale, it buried the products people actually came for.
The goal: replace the dropdown with a mega menu that lets customers browse by category and sub-category, surfaces relevant product types directly in the navigation, and scales as the catalogue grows.
UX challenge: the navigation had to serve three very different shopping intents at once, deal-hunting, trend-following, and practical everyday buying while staying consistent and deliberate across desktop and mobile usage.
The first step was identifying where the existing navigation fell short. Mobile and desktop decisions needed to be consistent and deliberate. Four critical gaps surfaced.
Not accessibility compliant.
The site failed web content accessibility standards, a hard blocker for an enterprise-ready platform.
Unpredictable interactions.
Hover-triggered menus on desktop opened and closed unexpectedly, confusing users throughout the navigation process.
Unclear product groupings.
Styles, thematic items and non-product items were arranged in the dropdowns without a logical structure.
Wasted mobile space.
Unused white space throughout the mobile menu pushed content out of reach and slowed scanning.
With the gaps mapped, I triangulated three lenses: what competitors do well, what our customers intend, and what our analytics prove. Each lens fed a different layer of the new hierarchy.
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.
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.
Shops for the deal and the moment. Likely first clicks: New Arrivals, Sale, Gifting, Track Restocks.
Shops for what's current. Likely first clicks: New Designs, Latest Trends.
Shops for a purpose. Likely first clicks: Work Wear, Daily Wear.
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)
Parent menu. Prioritising the most frequently accessed items meant users wouldn't need to scroll through the entire menu to find what they were looking for. For Love, Bonito, this translated into three clear parent categories: Product-specific (clothing, shoes), Non-product (living, gifts), and Thematic (sale, bestsellers).
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
Mega menu. The analytics fed directly into the structure:
- Bottoms split into separate sub-categories: Skirts, Pants, and Shorts → all top search terms
- The One-Piece category renamed to include jumpsuits
- Clothing length made visible in the Dresses category: Midi, Maxi, Long
- Occasion filters to include Formal; material filters to include Lace and Tweed; colour filters to include Black, Pink, and Dusty Blue
Click to view the full treeWireframe 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.
Participants were carefully selected and a high-fidelity mockup was created so the test accurately reflected a real browsing experience. The test was conducted on-site outside the Love, Bonito 313 retail store, 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
The redesign shipped as part of Love, Bonito's re-platformed storefront: a full mega menu on desktop, a restructured menu on mobile, a utility bar of direct links, and a featured marketing section for the brand's loyal social audience.
The mega menu, expanded.
Three parent groups - product-specific, non-product, thematic - with sub-categories visible at a glance instead of buried in dropdowns.
Under featured, a dedicated marketing section for the loyal. These are for customers arriving from LB's social feed who already know the brand, campaigns and trends.
The restructured mobile menu.
Dead white space reclaimed; the same hierarchy as desktop so users never re-learn the structure between devices.
Old site navigation: 88% of tasks had a low success rate or high task-completion time. All six tasks showed performance issues.
New site navigation: 80% overall success rate. The lower score was traced to a single serious usability issue that affected six of ten participants, skewing the overall result.
Turning data into action. Using first-click interactions, I identified where users struggled to find what they were looking for. Where first clicks were spread across multiple areas, items were cross-listed across several categories to reduce dead ends. Since launching the new navigation, a significant increase in search-bar usage has been observed, now added to the list of assumptions for future testing.
Just 12% of tasks performed well on the old navigation however some performed with high completion times.
Three of six tasks performing well; the gap traced to one fixable usability issue.
A significant rise since launch, logged as a new assumption for the next round of testing.
Invest in the right tools early. Budget constraints meant the test relied on manual setup and data cleaning, which took far longer than planned. A dedicated testing tool would have saved significant time.
Bring stakeholders in from the start. Because key stakeholders weren't involved during the test itself, considerable effort was needed after the fact to convince them the results were accurate such as video recordings and objective written reports were required to get the final design approved.
Test with the user, findings might differ from assumptions. User testing surfaced insights that desk research alone would never have uncovered. Every round of testing added something genuinely new to the design.