Customizer Redesign

Background

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

Phase 01 Discover

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.

Phase 02 Define

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.

Phase 03 Develop

Once stakeholders are aligned to my vision, I begin to develop solutions to the problems I've outlined. I draw my thoughts into rapid pen and paper ideations. Then, I move onto digital where I can further explore UX and UI solutions.

After earning a greenlight from stakeholders and briefing my team, I develop my ideas. I begin with rapid, low-fidelity designs to express the UX intent and functionality. I may discover edge cases to account for. Once I have a solid foundation, I move on to high-fidelity designs which is where I begin to work with UI and system designers more heavily.

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.

Phase 04 Deliver

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.

The Results

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%.