MeUndies Navigation Redesign

Background & Goal

The MeUndies Engineering & Digital Product (EDP) team was proving to be a bottleneck during product launches, as new products had to be hard coded into our navigation schema. In addition, when changes were to be made to the navigation, a ticket would have to be created for an engineer to build in the change. The design of the current navigation was also both visually outdated and not scalable enough to accommodate future products.

Thus, the goals of the navigation redesign project were to:

Give marketing and site merchandising the autonomy and flexibility to make changes to the navigation without the help of the EDP team
Redesign the navigation to align more with our brand visually, scalable enough to accommodate future product launches, and improve usability and findability of products

Old navigation schema (pre-redesign).

Redesigned navigation schema.

TreeJack Testing

The UX team worked cross-functionally with the product & merchandising team to understand patterns for organizing products in the navigation they wanted to test. We tested three variations with users, and each variation had users accomplish the same tasks. Results from the test informed the category names we used for future products, where we would keep Gift Cards in our main navigation, and enlightened us on how customers shop for underwear on our site altogether. We originally had "Packs" as an L1 category in our main navigation, but we found that test participants wanted to find the style they liked first before buying multiple quantities. Only 25% of participants went to "Packs" first when asked to find where they could purchase multiple pairs of underwear, while 75% went to their preferred style first (e.g., "Boxer Brief").

Two design concepts tested with users for the mobile navigation. Concept A on the left and Concept B on the right.

Initial Designs & User Testing

Background: MeUndies was in the middle of a rebrand that was being defined as we were designing the navigation, so we wanted to put two fairly different visual concepts in front of users. We also wanted to test the usability of each navigation concept.

Test Objectives:

Identify the concept to move forward with
Uncover critical usability and category discoverability issues with each design concept
Understand brand perceptions for each concept

Outcome: Concept A was more favorable. Users liked the "Featured" tiles in Concept A because it was a convenient way to see the primary offerings of our brand up front. Users also preferred the visual style of concept A. Concept A also used iconography next to product categories in the L2 screen to contextualize the category names, which was helpful for users to quickly identify product categories.

Motion Design

We were creating the visual design system for the navigation as we went, including motion design, which was the final piece of polish. I worked primarily on how the desktop navigation would expand & collapse and the various hover states. Being that the navigation was a full-screen takeover, I wanted the opening animation to be slow enough to contextualize where the menu is coming from, but not too slow as to be frustrating and annoying for the user to open every time. The result was a smooth opening animation with cascading links on the left and products that appear on the right via an opacity change, both on the same easing curve.