DESIGN PORTFOLIO
LAIRD SUPERFOOD - Sisters, Oregon
CASE STUDY STRUCTURE - Optimizing The Mega Menu For Seamless Navigation
1. Project Overview: Introduction
Scope
Background
2. Empathize: Understanding the Landscape
Understanding the Problem
User Behaviour Analysis
Key Observations
3. Define: Defining the Structure
Clarifying the Map
User Persona
Problem Statement
4: Ideate: Structuring a Better Menu
Proposed Improvements
Rearranging the Puzzle: Brainstorming & Solutions
5 Prototype: Bringing Ideas to Life
Building the Solutions
Wireframes & Mockups
Design Documentation
6. Test: Refining Through Testing
Testing Insights & Impact: AB Testing, Customer Feedback Surveys
7. Conclusions
Final Takeaways
INTRODUCTION:
Project Scope
Project Name: Laird Superfood
Designer: Pete Ficht
Timeline: 2020-2021
Background
The Laird Superfood website’s navigation system needed improvement. Users found it challenging to access products efficiently, often struggling to locate categories. The previous drop down menu on Laird Superfood’s website made navigation challenging, leading to high drop-off rates. Users struggled to locate specific product categories, and filtering options were limited. The goal of this project was to streamline navigation, improve product discoverability, give more space for ads and to ensure intuitive navigation.
Empathize: Understanding the Navigation Challenges
Understanding the Problem
Analyzing site data, I found that many users struggled to locate specific products due to a cluttered navigation structure. The existing menu listed products in multiple ways (by category, benefit, ingredient), leading to confusion.
User Behavior Analysis
Heatmaps: Revealed where users hovered and clicked, showing confusion in menu navigation.
Customer Feedback: Indicated frustration with the lack of clear organization.
Competitive Benchmarking: Other brands had well-structured menus with categorized listings and intuitive filters.
Key Observations:
Users had to dig through multiple layers to find products.
Filters were not prominent, making it difficult to refine search results.
The mega menu was visually overwhelming.
Old Menu Screenshot
DEFINE: Synthesizing the Structure
Clarifying the Map
The goal was to create a more intuitive navigation system. I restructured the menu to focus on three primary categories:
Shop by Product Type (Creamers, Hydration, Protein, etc.)
Shop by Goal (Energy, Recovery, Wellness)
Shop by Ingredient (Matcha, Turmeric, Functional Mushrooms)
User Persona
Problem Statement:
"Laird Superfood customers struggle to navigate the mega menu efficiently. How might we simplify product discovery and improve accessibility?"
IDEATE: Structuring a Better Menu
Rearranging the Puzzle: Brainstorming & Solutions
I tested multiple structures using card sorting exercises with internal stakeholders and customers to ensure the categories were intuitive.
Grouped products based on purpose (performance, recovery, hydration) rather than just categories.
Introduced filtering options within the menu.
Simplified menu levels to reduce cognitive overload.
Proposed Improvements:
Here's a structured table outlining the Proposed Improvements for the Mega Menu based on the insights. This table clearly presents the current state, proposed solutions, and benefits to guide improvements in the mega menu design.
Proposed Improvements for the Mega Menu
PROTOTYPE: Bringing Ideas to Life
Building the Blueprint
With the new structure defined, I designed a cleaner, more intuitive mega menu incorporating:
Consistent Visual Hierarchy: Ensured logical arrangement of categories.
Hover-Triggered Dropdowns: Allowed users to preview subcategories without clicking.
Quick-Access Links: Included direct shortcuts to top-selling products.
Design Outputs:
Wireframes & Mockups: Redesigned the mega menu layout.
Low-Fidelity Sketches: Explored different layout options.
High-Fidelity Prototypes: Presented final interactive versions for usability testing.
Design Documentation: Ensured a smooth developer handoff.
Early Wireframing & Ideation
Key Design Features Implemented:
Multi-Column Layout: Reduced clutter and improved organization.
Hover States & Quick Links: Enhanced accessibility to key sections.
Sticky Navigation: Ensured easy access while scrolling.
New Mega Menu Screenshot
TEST: Refining Through Testing
To validate the new design, we conducted in-house usability testing. We also performed eye-tracking studies and A/B testing.
Testing Results & Impact
Conclusion : Refining Through Testing
Final Takeaways:
The redesigned Laird Superfood mega menu significantly enhanced user experience, leading to increased conversions, improved product discovery, and higher customer satisfaction. This project reinforced the importance of a data-driven UX approach, blending analytics with human-centered design principles to create a more engaging and effective eCommerce experience.
Key Learnings
Data-Informed Design Decisions: Heatmaps, A/B testing, and user feedback drove meaningful UX changes.
User-Centric Categorization: Structuring navigation based on user intent resulted in better engagement.
The Power of Iteration: Testing and refining design solutions were crucial to success.
By optimizing the mega menu, Laird Superfood provided its customers with a more seamless shopping experience, strengthening brand loyalty and driving business growth.