Problem
Vans's customization platform, the Customizer, was designed in 2016 by a third-party vendor. It remained untouched since. The design had no system, confusing UX patterns and copy and failed accessibility tests. It needed to be redesigned.

Challenge
Due to contractoral and engineering issues, we were limited to what we could change. However, we were able to do a complete UI redesign and update the UX and copy of modals. Additionally, because the design failed multiple accessibility tests, we had only a few weeks to redesign the UI to reattempt the tests.
 
Project Goals
Modernize the user interface.
Pass accessibility tests.
Improve UI, UX and copy for modals.

Client
Vans (in-house)

My Role
Lead Interactive/UX Designer (UX, UI, Copy)

Team
UX Design Manager
Project Manager

Stakeholders
Interactive Design, Director
Digital Customization, Director
Senior UX Writer

Because there was existing design, I started with a thorough audit and conducted competitive analysis.

Audit of Existing Design
I began by examining the current design in an audit with screenshots, notes and my concerns and recommendations. 

Competitive Analysis
Simultaneously, I conducted a competitive analysis. I looked at competitors like Nike, Puma, Converse and New Balance, but also considered other places users customize products like furniture and cars.

From the discovery findings, I create a deck outlining the problem, risks, challenges and my vision supported my the audit and competitive analysis. I use this to align with my team and stakeholders.

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

Recommend a Direction
I use the strategy and the findings in the audit and the competitive analysis to point out problem areas, the risks of keeping them as a problem and outline my vision and goals for the project. The goal is to have stakeholders align with my direction.

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.

The redesign required meticulous organization and a repurposable system that could work for the future of the Customizer with added tools and features. I delivered my designs in an organized Figma file with a Customs library for future teams to continue to use and reference. 

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.