Project: Navigation Redesign | Role: Product Manager

The Challenge.

An example of Free People’s mobile navigation menu

 

A major theme that was popular in my organization when this project started was taking our brands’ different sites and combining them onto one central codebase so that we could develop and test more efficiently across all our sites. When Navigation Redesign was added to our roadmap, it was added with that one major idea in mind: create one navigation system that all the brands could utilize.

Sounds easy enough, no? Well, early on it became clear to us that the brands were all using their headers and navigation in very different ways. Finding one standardized layout seemed like a pretty large challenge ahead of us. However, instead of becoming paralyzed by the gigantic task being asked of us, I took a deep breath and jumped in to the data head first. I knew being able to make data driven decisions would help us be able to formulate and back-up a recommended path forward.

Exploration.

Data is everything.

After a quick brainstorm with my UX partners, we settled on some questions that would help us figure out which data we needed for this project.

  1. What are the current pain points with our existing navigation?

  2. What are our competitors doing in this space?

  3. How are our customers utilizing our existing navigation?

To start answering those questions, we created or compiled the following:

  • Current state analysis of our taxonomy and navigation

  • Competitive analysis

  • Comprehensive navigation analytics dashboards

  • Key takeaways from best practices and industry research published by Baymard Institute and Nielsen Norman Group

  • Notes from brainstorming sessions with key project stakeholders related to their wants, needs, and desires for their headers and navigation.

  • Documentation to consider around WCAG compliance

So. Much. Data! By compiling and reviewing all of the above, we were able to deeply and wholly understand our business and customer needs for navigation. Once we had a better grasp on the data, we were able to move on to scope and goals.

Scope.

I knew we needed to define scope for this project. In an ideal world, we’d be able to create a cohesive strategy across our header, footer, mega menu, and category navigation. However, given realistic development capacity and time needed to spend on other projects, we needed to pick someplace to start and move on from there. Using research and data to pinpoint the most critical starting point, we decided to begin with a complete header + mobile navigation redesign.

Goals.

Moving to one code base wasn’t a good enough reason to completely redesign the sites’ header and navigation. We needed to define clear and concise goals for project that would help us align on good solutions. Throughout all of the steps of the discovery process, a few themes kept popping up over and over again:

  1. Maintainable/Scalable: we needed to support all 3 brands on one codebase, allowing for more efficient development in a customizable way

  2. Mobile Optimized: we needed to ensure that our navigation is better optimized for small screen use

  3. Customer Focused: we needed to support easy shopping and effective product discovery, reducing customer decision fatigue and letting our customers define their own scope while browsing

Now, we’re getting somewhere. Onward to design!

Design.

Visual funnel of our design process from concepts to testing

 

Delivery.

In addition to leading my team through product discovery for the header redesign, I also oversaw delivery and release planning. Since this project spanned multiple teams, I worked to help plan and clear dependencies prior to my development team picking up user stories. I coordinated release with QA and engineering teams, and oversaw brand demos and set-up coordination. I had the unique role to be able to lead this project all the way from idea to reality.

Although I wish I could say it was completely smooth sailing, many challenges arose throughout development. We uncovered multiple bugs with the header that we weren’t previously aware of, and we ran into endless requests to expand our MVP features and deliver more. Thankfully, I was able to return us to the goals we outlined at the start of our project to help prioritize and reduce scope creep throughout development.

I should also mention that, while leading my development team on building the header redesign, I was simultaneously leading product discovery for phase two: a redesign of our mega menu. That project had similar challenges to the header redesign, but thanks to the upfront work we did to really understand our customers’ pain points around navigation, we were able to come to final solution with fewer obstacles. That mega menu work is currently in development, and set to release this year!

Examples of the header on Urban Outfitters, Free People, and Anthropologie sites

Success.

As we all know, a product manager’s role does not end when a feature is released. After launch, I led a robust performance monitoring program to ensure that we had satisfied our goals and completed what we set out to do. Partnering with the analytics team, we decided to do two weeks of close monitoring, followed by 30, 60, and 90 day check-ins. We wanted to give our customers time to adjust to the new navigation while still looking for red flags that may indicate optimization is needed along the way.

Findings.

Although the navigation redesign project is currently in phase two (mega menu redesign) and not fully complete, we were able to glean some learnings with just the header redesign live.

  1. We saw positive improvement in all downstream metrics, including overall CVR for the site. Customers were finding the products they wanted to find, potentially even better than before!

  2. We saw a shift in engagement from navigation to search. We have many hypotheses for why this might be, but ultimately cat views per session and pdp views per session generally stayed flat or trended positive, so customers were still able to navigate successfully.

  3. Although mobile navigation had the most striking changes from our previous nav, the metrics didn’t show us any red flags. Our customers adopted to the new UX quickly and easily.

Next Steps.

Some features were descoped from MVP due to time constraints, or inconclusive A/B testing results. I’d like to return to A/B testing to help us understand where we can continue to optimize our designs moving forward.

Additionally, once the mega menu redesign is live, I will be working to create a new baseline for how our customers are engaging with our overall navigation. This should help us better understand the customer journey. We’ll use these learnings to continue to monitor the health of this product and inform optimizations.

Reflections.

This was one of the most challenging projects of my career to date. I faced stakeholders who didn’t want to align, multiple team members moving on to new opportunities mid-project, and inconclusive A/B testing results. Some days, it felt like every step of the way I found a new challenge to overcome. Guess what? I overcame them, every last one. This project really taught me to trust my gut and have faith in my team to deliver world-class features that put the customer first. I know that if I could create one header and navigation that works for three brands with wildly different business needs, I can do anything. Anything.

This project also taught me that I simply cannot do everything alone. Everyone on the team has a very important role to play, and although I’ve always loved collaboration, this project really showed me how absolutely essential it is. I could not have done this without my UX, UI, engineering, analytics, and product partners. This truly was a group effort. As a community, we did something that felt impossible two years ago. Now, sky’s the limit!

Previous
Previous

Product Reviews