I redesigned the customization platform for Vans shoes leading to a 26% increase in conversion.

Customizer-hero-2

My role
UX / UI design
System design
Copywriting
Prototyping
Presentation

Team
UX design manager
Project manager
3rd party engineers
Ecommerce optimization manager

Stakeholders
Director, Interactive Design
Director, Digital Customization

My role
UX / UI design
System design
Copywriting
Prototyping
Presentation

Team
UX design manager
Project manager
3rd party engineers
Ecommerce optimization manager

Stakeholders
Director, Interactive Design
Director, Digital Customization

Background
The Vans customization platform was designed in 2016 by a third-party vendor. The design had no system, confusing patterns and failed accessibility tests. However, due to contractoral and engineering constraints, we were limited to what we could change.

Goals
• Modernize the user interface
• Pass accessibility tests
• Improve UI, UX and copy where possible

Background
The Vans customization platform was designed in 2016 by a third-party vendor. The design had no system, confusing patterns and failed accessibility tests. However, due to contractoral and engineering constraints, we were limited to what we could change.

Goals
• Modernize the user interface
• Pass accessibility tests
• Improve UI, UX and copy where possible

Audit and competitive analysis
I began by examining the current design in an audit with screenshots, notes and my concerns and recommendations. Simultaneously, I conducted a competitive analysis by analyzing competitors like Nike, Puma, Converse and New Balance, but also considering other places users customize products like furniture and cars.

Audit and competitive analysis
I began by examining the current design with screenshots, notes and my concerns and recommendations. Simultaneously, I conducted a competitive analysis by analyzing competitors like Nike, Puma, Converse and New Balance, but also considering other places users customize products like furniture and cars.

Define-1

Strategic articulation
To sell my vision and express calculated risks to stakeholders, my strategic articulation must be clear, concise and backed with findings of the discover phase.

I use the strategy and the findings of the audit and the competitive analysis to point out problem areas and outline my vision and goals for the project, aligning with my stakeholders and team members.

Strategic articulation
To sell my vision and express calculated risks to stakeholders, my strategic articulation must be clear, concise and backed with findings of the discover phase.

I use the strategy and the findings of the audit and the competitive analysis to point out problem areas and outline my vision and goals for the project, aligning with my stakeholders and team members.

Rapid, Paper Ideations
I start with traditional pen and paper to express anything and everything that comes to mind as a possible solution. Then I go back and question my ideas and how they may or may not work.

UI Explorations
After the paper exercise, I move onto digital to develop my solutions.

Rapid, Paper Ideations
I start with traditional pen and paper to express anything and everything that comes to mind as a possible solution. Then I go back and question my ideas and how they may or may not work.

UI Explorations
After the paper exercise, I move onto digital to develop my solutions.

Instructional "Splash" Page
In addition to the designs I promised, I also designed an instructional splash page similar to what you'd see when you play a video game for the first time. ALL of our user research participants indicated confusion and feelings of being overwhelmed when using the Customizer. They expressed that they wish they had a "guide" to look at. 

Retest and Monitor User Feedback
After launch, we knew we had to continue to gather customer feedback and montior metrics and usage.

Instructional "Splash" Page
In addition to the designs I promised, I also designed an instructional splash page similar to what you'd see when you play a video game for the first time. ALL of our user research participants indicated confusion and feelings of being overwhelmed when using the Customizer. They expressed that they wish they had a "guide" to look at. 

Retest and Monitor User Feedback
After launch, we knew we had to continue to gather customer feedback and montior metrics and usage.

RESULTS

The simple redesign resulted in an increase in conversions of 26% and increased user satisfaction across Vans.com.

First Week After Launch

  • After the first week of the redesign's launch, we saw an uptake in conversion of 26%.
  • Only 4.5% of users chose to "skip instructions" with the instructional splash page.

A Month After Launch

  • Vans.com site surveys indicated 88% of users found the Customizer to be "intuative and easy to use." An increase of about 55%.