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.
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
A Month After Launch
Today
hi@blancanavarro.com