Details
Role: UX/UI Designer
Duration: Feb 2024 - Apr 2024
Responsibilities
Stakeholders
Digital Design Director
SVP of Direct-to-Consumer
External Development Team
QA Engineers
Overview
The Problem
Customer surveys revealed that majority of users have difficulties understanding how products were merchandised into different categories — this translated to difficulties when using the website navigation.
Think-Aloud Protocols
Overview
12 participants,
Pooled from existing customers
3 Days of User Testing,
1 Week of Insight Mapping
Observations
Insights
Key Finding
Users relied heavily on the Search Function to find products across all TAP prompts
Key Finding
Users rarely engaged with brand-coded "story-telling" components featured in navigation
Key Finding
Users did not understand product merchandising categories (navigation titles).
Mobile Issue
Search was nested into the main navigation within the header, resulting in an additional screen before users would be able to reach the Search Function
Desktop Issue
Navigation real-estate gave too much space to brand-content vs. clarifying language and product spotlight opportunities
Desktop Issue
T1 & T2 navigation items, despite demonstrating similar/identical visual representation, functioned differently from one another, pushing users to rely on other components outside navigation links
These findings helped inform how I would need to update the UI components and the layout of our navigation design. In particular, by outlining main issues across breakpoints, I determined the greatest pain points for users to determine guidelines of what would need to be addressed in the prototyping phase.
In addition to these UI updates, it became clear that part of the redesign would need to encompass how we merchandise our products. This would be particularly important on Mobile, where we found that key features required additional steps in the user journey. I constructed a high-level Site Map that illustrated the issue of nesting important functions and access points too far within the navigation system. The projected solution removed the requirement of a third tier by shifting up important Navigation Categories into the Main Menu. Final IA decisions related to product merchandising were made by the Direct-To-Consumer team.
Prototyping
Based on these findings, the biggest design overhaul would have to take place on Desktop breakpoints. I hypothesized that surfacing the navigation at the highest level and creating more consistency in behavior would allow users to explore and retrace their steps more easily.
Hypothesis. Surfacing T1 navigation at the highest level and creating more consistency in behavior will allow users to explore and retrace their steps more easily
After a rapid-fire round of prototype testing, the Desktop solution replaced the sidebar navigation with a sticky navigation that simplified the number of sub-navigation categories exposed to the user, while also surfacing more visual information that would cue users' expectations for each of the highlighted merchandise categories.
For Mobile, the main issue to address was the breaking of behavior expectations and the barriers to accessing Search. To address this, I prototyped a version of then navigation that broke out Search from the hamburger menu and included more consistent UI elements across the mobile navigation.
What I hoped to achieve in these designs was overall increased ease of use for customers. On Desktop, the new design exposed navigation with additional visual cues that better communicated expectations about what products would live under each merchandising catalogue. Similarly, on Mobile, this solution reduced the number of screens and interactions required for users to explore the product catalogue and exposed Search as a more seamless experience with increased access points.
Production
I worked closely with our external Development team as well as our Search Function vendor to get the updated navigation on an expedited timeline for the upcoming sale. During this time, I developed a close relationship with our external partners and in working together learned more about how to communicate in a way that helped facilitate a more seamless delivery-to-production pipeline.
During final hand-off, I presented prototypes of both breakpoints and handed off prototype flows, annotations, and a component library. At this point we were heading into early April, and the QA process looked like the following — weekly meetings with Dev team, pushes to staging whenever possible (weekly or biweekly), individual QA responsibilities for navigation revamp with support from rest of team.
Results collected right after launch and during the sale revealed increased CTR for main category navigation across all breakpoints. CVR, however, was harder to associate with the new navigation launch.
Retrospective
This project taught me how to communicate and work closely with developers during the design process. By integrating their insights early on in explorations, we were able to avoid any unexpected functionality roadblocks. In fact, we began discussions as early as the affinity mapping stage.
Outside process, this project taught me a larger lesson about design updates in practice. The global navigation redesign came at the heels of a large website overhaul. Revisiting the navigation in such a short turnaround from the overhaul launch was not a tactical approach I expected, but the results of the improved customer journey during the yearly sale indicated the positive outcome of this strategic shift.
Future Iterations
One of my remaining key concerns at the end of push-to-production was the inconsistency across menu items. While we solved the problem of simplifying our navigation system overall, the team had conflicting views on how to surface a critical PLP like Bestsellers vs. a PLP like Body that would require sub navigation.
To resolve this conflict of opinions, I would like to employ an A/B test of a navigation that prioritizes functional consistency over the one that was launched in order to determine which performed better. This kind of user testing approach was not something we had resources for at the time, and so I think revisiting the design in this manner would produce more helpful insights.