VANS NAVIGATION

The vans.com navigation needed a redesign to reflect a new taxonomy. The new navigation changed to lead with what users are shopping for (shoes, clothing, accessories, etc) from who users are shopping for (mens, womens, kids). Most users are shopping for shoes and a majority of our styles are gender neutral, leading the team to explore changing the taxonomy. We wanted to dig deep to explore if this approach ultimately makes sense with our brand and audience. We focused largely on mobile as it was the more complicated experience.
‍
vans.com‍

My Role

My role was to oversee the UX/UI of the redesign and act as the bridge between the e-comm, marketing, UX, and development teams. I designed the initial and subsequent iterations of the UI, worked with UX teams who conducted and analyzed research and user testing. I iterated designs based on research and user feedback, and presented to stakeholders.

User Feedback

“So well designed. Very easy to use. Many websites have too many details. Would love to shop in it.”

“Everything looked really good. The navigation and the menu is really easy to use and it felt really natural.”

Final Designs

Before

In the old design, we used a page by page navigation for the menu. With this design, we found that users spent more time getting to the category they're looking for. If users wanted to go back to a different category, they had to reach to the top left of their screen to go back a page or a few pages to another category.

AFTER

In the new design, we used an accordion style navigation for the menu. With this design, we found that users spent significantly less time getting to the category they're looking for. If users wanted to go back to a different category, they simply had to scroll up or collapse the section they're in. Test results showed that users were able to find the category they were looking for quickly and accurately.

Goals

• Validate taxonomy switch from leading with who users are shopping for in gendered categories (mens, womens, kids) to a genderless approach leading with what users are shopping for (shoes, clothing, accessories, etc).

• Decrease the time it takes for a user to select a specific category. Make navigating between categories easier and more seemless.

• Update visual design to match the redesigned PLP and PDP.

Team

Creative Director: Matt Shipman
Director, UX Design: Jenny Hanlon
UX Researcher: Kaela Burns
Lead UX Designer: Matt Lane
UX/UI Designer: Andrew Vuong

Process

1. Competitive research and analytics data gathering.
‍
2. Ideate/explore initial designs based on research and new features we want to add.

3. Qualitative testing with new designs.

4. Analyze test results and iterate designs accordingly.

5. Repeat testing and iterations for 1-2 rounds.

6. Present findings and recommendations to stakeholders.

7. Connect with development for handoff.

Site Analytics

To start validating the taxonomy switch and order of categories, we looked at the click rate analytics. Shoes had the highest click rate, 4x - 9x higher than the second most clicked category, Clothing, followed by Accessories.

Competitive Research

The argument between gender vs product first was a challenge for our research team. We looked at different shopping experiences, focusing on active lifestyle brands. We looked at REI, Mizuno, Brooks, Rawlings, and Zumiez. Gender agnostic shopping is a common pattern in sporting goods stores. As the world is changing, gender in shopping is becoming less important and it's a pattern shoppers are getting used to seeing. Vans products are largely gender neutral, especially our shoes. With all this in mind, the team felt comfortable deprioritizing gendered categories to lead with product categories in the navigation.

User Testing

The initial tests tested the new look and layout of the navigation.

Results

Key Takeaways

• Nav is clear and easy to find.

• Dropdown categories made sense to most users.

• Users were able to successfully complete task of navigating to Mens shoes and clothing.

• Users liked the ability to drill down into subcategories.

• Organization of content and design were valued by users.

Opportunities

• Explore why certain text is bold while others aren't.

• Create greater contrast between subcategories in dropdowns.

• Filter by gender after selecting category caused some confusion.

User Testing

We utilized a cart sorting exercise with 25 users to give us ideas and further validate the order of the new taxonomy. The card sorting results led us to explore the menu sections deeper and conduct a preference test to see how users felt about the order of the categories.

Results

Key Takeaways

Overall we found that user preferences had a lot to do with how they shop and the order they preferred. Some users showed mental models of exploratory vs targeted shoppers. Users who described a more exploratory approach to shopping liked seeing featured items first, while users who described a more targeted approach were more likely to consider “Featured” to be unnecessary. The only placement users were strongly against was having gender at the bottom of the menu (Option B). Based on the test results, we proceeded with Option C, leading with genders and following with featured items.

Successes

The project is on a successful path in achieving the goals we set for ourselves. Due to the way we approached the redesign and the extensive user research and testing, we were able to support key decision making in our designs. The team’s trust in our audience’s feedback allowed us to confidently implement the designs and even add to it to this day. Though not launched yet, we have enhanced the navigation with new features to make the shopping experience even easier for our users.