Andrew Vuong | Product Designer

Vans

Product listing and product detail pages

+3.2%

Add to cart rate

+0.8%

Conversion rate

Problem

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, on-brand experience.

Goals

Fix usability issues to improve shopping experience.

Optimize features to increase KPIs.

Refresh visual design for a modern, branded feel.

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 PLP Designs

Product Listing Page

Focused on information hierarchy, clarity, and accessibility.

Final PDP Designs

Product Detail Page

Focused on guiding user to checkout with minimal friction, information hierarchy, and visual impact.

Business challenge

The PLP and PDP were underperforming due to functionality issues. The pages didn't provide a seamless or engaging shopping experience, impacting conversion.

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.

User challenge

Users were experiencing friction throughout the shopping flow, making their shopping experience unpleasant and unintuitive.

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.

Process

I followed a user-centered design process to identify key pain points and validate assumptions through research. From there, I prioritized problems, ideated solutions, and tested prototypes with users. Based on feedback, I iterated through multiple rounds before presenting final recommendations to stakeholders and handing off to development.

User tests

We had two rounds of qualitative testing to discover user feedback and preferences. Here are some things our users had to say.

PLP

“More clean, organized, and easy to read.”

“Easier to navigate, not as much information overload.”

“[Filters] look cleaner and less dingy than the current design.”

PDP

“The thumbnails feel more engaging and easier to navigate.”

“[Sticky add to cart] is a super helpful feature.”

“Love the size tiles letting you see what’s available at a glance.”

Key Takeaways

Successes

Stakeholders and users were pleased with the results. A clear design strategy and thorough testing gave us the data to support our decisions, leading to a 3.2% increase in add-to-cart rate and a 0.8% boost in conversion.

Opportunities

There’s room for closer collaboration between design and engineering to ensure accurate implementation and alignment on feasibility. Being proactive with regular check-ins helps maintain clear, consistent communication throughout the process.

Want to hear the full story?

Get in touch for a complete case study presentation.

Contact

More Work