Mega Menu Redesign
Modernizing the UI and improving the usability of Costco.com’s mega menu
My Role
UX Researcher and Designer
UX Design Methods
• Competitive analysis
• Usability testing
Deliverables
• Research findings slide deck
• Interactive prototypes (mobile & desktop)
• Design specs document for development
Problem
Costco.com’s mega menu had not be redesigned in five years and was slated for an UI update as part of large site-wide redesign effort.
Objectives
(1) Improve the presentation of the information architecture to make the breadth of products less overwhelming.
(2) Maintain business control over ad real estate.
(3) Modernize the look and feel of the mega menu.
Research
Research Questions
I investigated two research questions:
(1) What usability issues are present with the current mega menu?
(2) How are mega menus displayed in other retail websites? What patterns can be found in the hierarchy and interaction behavior?
Usability Testing the Original Mega Menu
To determine if there were usability issues with the original mega menu, I ran two remote usability tests with Costco Members using Usertesting.com. One tested the desktop experience while the other tested mobile. I asked users to look for specific items that were discoverable in the second and third levels of the menu.
“After I scroll over Furniture & Mattresses, I can't actually see where I am. There's no indication that I'm here. It would be nice to have some visual confirmation.”
“When you’re looking at this giant page...it almost feels jumbled together. I felt like you could have showed the sections more distinctly so you could read a little better.”
Usability Test Findings
The desktop usability test results revealed problems with wayfinding and hierarchy. The most common feedback I heard from users was that they were confused about what category they were viewing and there was not enough distinction between parent and child categories.
The tests did not reveal any usability issues with the mobile menu design.
Competitive Analysis
I analyzed the mega menu structures of 19 ecommerce websites, all of which were similar to Costco.com with a wide breadth of products sold. This included Amazon, Target, Sam’s Club, REI, and Bed Bath & Beyond. I looked for patterns in how the mega menus were presented in both mobile and desktop.
Desktop Findings
Desktop mega menus were presented in three ways:
Focused Panels: When a user selects a top-level category, the panel is replaced with second-level categories (e.g., Amazon).
All Subcategories: When a user selects a top-level category, the second and third-level categories display together (e.g., REI).
Progressive Disclosure: When a user selects a top-level category, the second-level categories display. When they select a second-level category, the third-level categories display (e.g., Bed Bath & Beyond).
Focused Panels example
All Subcategories example
Progressive Disclosure example
Mobile Findings
The two most popular presentations for mobile menus were:
Focused Panels: When a user selects a top-level category, the panel is replaced with second-level categories (e.g., Walmart).
Accordion: When a user selects a top-level category, the second-level categories display below it (e.g., Boxed).
Focused Panels example
Accordion example
Design Result
Desktop
I designed a new menu based on the research findings, business objectives, and design patterns for the larger site-wide redesign.
Old mega menu
New mega menu
The new design incorporated the following changes:
• Stronger visual distinction between categories and subcategories by progressively disclosing second and third-level categories in separate panels. I also added the parent category to the top of each sub-category.
• Dedicated promotions panel to maintain ad space controlled by business.
• Shorter mega menu height by reducing font sizes.
Mobile
Old mobile menu
New mobile menu
Since the usability test results did not show any issues with the current mobile menu, only font size and color changed to align with the new desktop mega menu styling.
Usability Testing the Redesigned Menu
To see if I had improved the usability of the mega menu, I ran two more remote usability tests with the same tasks I had used to test the original design. All users successfully completed the tasks and showed less confusion than the original tests. The new desktop and mobile mega menu designs went into production in 2019.