Customs Shopping

CustomsDot-Hero-2

Background

Problem
Vans sells five shoe styles that are customizable – but users don't know these styles have customizable options. In effort to increase awareness to the Customs business, Vans collaborates with artists to promote custom shoes with the artist's patterns and artworks. However, users buy the shoes as-is and don't understand additional customization options are available to them. We need a way to show that shoes can be bought as-is or further customized without adding friction to the check-out process.

Project Goals
Consumer:
Increase awareness to the Customs business.
Make it clear to customers what shoes are customizable.

Business:  
Design an equitable, resuable and flexible tool that builds long-term effeciences for our digital design team.

Non-Goals
Add friction to the check-out process.
Force customers to customize.

Client
Vans (in-house)

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

Team
UX Design Manager 

Web Developer

Stakeholders
Interactive Design, Director
Ecommerce Marketing, Director
Digital Customization, Director

Phase 01  Discover

Because ecommerce and shopping is so universal on the internet, this discovery phase focused heavily on a competitive analysis. I started with obvious places like Nike and Converse and then turned to unique products like cars where you can buy as-is or build to spec. I also looked at embedded shopping experiences on social media platforms.

"Choose your own adventure"
I learned that retailers that offer two versions of a product (build your own vs. buy as is) mimic the two options in a choose your own adventure type of design. 

Embedded Shopping
I also found that embedded shopping was common among the web and on mobile apps. Typically they were called out with a dot and/or icon and followed by a CTA. 

Phase 02  Define

From the discovery findings, I compile a brief outlining the problem, the reason to address the problem, audience, personas and project goals and non-goals. I also define the feature highlights and how we might measure success. I use the creative brief as a roadmap for the next design phase and to showcase my findings and plan to stakeholders.

Articulate My Approach
Equipped with a strong understand of the problem and opportunity, I articulate my approach to stakeholders. I share my understanding of the problem, the thorough competitive analysis and my plan and vision.

Recommend a Direction
I gather stakeholders and recomend a direction – taking their feedback and advice into consideration for the next steps.

Phase 03 Develop

With an approved brief and plan, I begin to develop solutions to the problem. I draw my thoughts into rapid and unfiltered 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. 

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. In this case, the UX was strong but the UI required further explorations.

dot-develop

Phase 04  Deliver

I deliver it to our stakeholders and our web developers. I walk through my work in a proper hand off meeting, answering questions and including annotations.

Finish Strong
I present the final design in a prototype to the stakeholders and web developers. I make sure to label designs and annotate where necessary, such as expressing motion. After hand-off, I am available for ongoing support for our web developers.

The Results

First Week After Launch

  • During the first week after initial launch, we saw a click-through rate of 98%.
  • Around 48% of users chose "customize" over "add to cart." Meaning, the tool brought significant awareness to the Customs business.
  • Internally, our UX, Customs and Ecommerce leadership teams were excited about the long-term potential of the product.

A Month After Launch

  • Click-through rate remained strong, hovering around 90%.
  • The Customs business gained an uptake of 22% in business from year over year and continued to steadily climb after every landing page that used the Customs/Ecommerce dot.
  • The split for "add to cart" vs "customize" was about 50/50. We expected this for two reasons: on one hand, most consumers prefer to buy their shoes as-is (Customs have a higher price point and take longer to ship.) Secondly, consumers didn't typically know about the Customs business so they might be inclined to click on "customize" over "add to cart," causing a pretty even split.

Today

  • The Customs/Ecom dot and the daul CTA on the PLP and PDP are still used across Vans.com today!