Andrew Vuong | Product Designer

Vans

Navigation

+300%

Search speed

100%

Task success

Problem

Users were getting lost in the existing navigation flow leading to lower product discovery and conversion.

The existing Product Listing and Product Detail pages had usability and functionality issues that impacted the shopping experience. Additionally, the visual design no longer reflected the brand’s evolving design system, creating a need for both functional improvements and a refreshed redesign.

Goals

Validate switching from gender-based to product-based navigation.

Reduce time to find product categories.

Align visual design with updated PLP and PDP.

Role

My role was to lead the UX of the redesign and collaborate with the e-comm, marketing, UX, and engineering teams. I designed all iterations of the UI, worked with research teams to conduct user tests, and aligned with stakeholders.

Lead the UX of the redesign and collaborate with business partners. Design all iterations of the UI, conduct user tests, and align with stakeholders.

Team

UX, Data Analytics, Research, Business, Engineering, Ecommerce, Marketing.

Final Designs

Product Listing Page

The old page-by-page menu made category browsing slow and frustrating. The new accordion-style navigation allowed users to find and switch categories faster and more easily, improving both speed and accuracy.

Business challenge

Users were unable to quickly find categories they were searching for and sometimes getting lost, leading to incomplete conversions.

User challenge

Our users found the old structure too complicated and difficult to navigate facing challenges distinguishing between product categories and models.

Process

My process began with competitive research and data analysis to validate and prioritize key problems. I explored solutions through ideation and prototyping, followed by multiple rounds of user testing and iteration. Once refined, I presented our recommendations to stakeholders and collaborated with development for a smooth handoff.

User tests

We conducted usability testing and card sorting to evaluate a new navigation structure. Feedback from users helped validate the overall direction, revealing improvements in clarity, ease of use, and speed. Insights from testing were used to refine the taxonomy and guide final design decisions.

“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.”

Key Takeaways

Successes

Stakeholders and users responded positively to the results. Leveraging research to guide our design strategy and exploring multiple iterations helped us identify strong solutions and build stakeholder confidence throughout the process.

The project successfully met its goals by grounding design decisions in extensive user testing. Our approach and the team’s trust in our process enabled us to confidently implement and refine both new and existing features.

Opportunities

Process and communication posed challenges. The organizational structure made close collaboration between design and development difficult, despite our best efforts.

There was room for more frequent communication between design and engineering during development. Regular check-ins would have helped ensure accurate implementation and resolved issues early. Going forward, being proactive about cross-team collaboration is key to a smoother, more successful implementation.

Want to hear the full story?

Get in touch for a complete case study presentation.

Contact

More Work