Vans Redesign
Project Overview: The Vans website redesign aimed to align with the Canvas Design System to enhance user experience and accessibility. This overhaul led to a 9% increase in checkout conversions from the Product Detail Page (PDP), saved money on WCAG accessibility fines ($1.2M annually), improved site performance for Google rankings, and visually excited users, as reflected in their positive feedback. The process of implementation is described below.
Assessment and Planning: Evaluate the current website to identify areas for improvement. Define goals and objectives for the redesign, ensuring alignment with the Canvas Design System’s principles.
User Research: Conduct user research to understand the needs and preferences of Vans’ target audience. Gather insights through surveys, interviews, and usability testing.
Information Architecture: Redefine the website’s structure to improve navigation and user flow. Create a sitemap and wireframes to outline the new layout.
Design Integration: Apply the Canvas Design System’s components and guidelines to the new design. Ensure consistency in typography, color schemes, and UI elements.
Aesthetic UI Changes: Change the tan background to increase visual negative space and WCAG compliance, enhance navigation functionality, improve the functionality of color and size selectors to allow users to change the product image to the desired color, and consolidate typography clutter for consistency.
Prototyping and Testing: Develop interactive prototypes to visualize the new design. Conduct usability testing to gather feedback and make necessary adjustments.
Development: Collaborate with developers to implement the new design. Ensure the website is responsive, accessible, and optimized for performance.
Launch and Evaluation: Roll out the redesigned website and monitor its performance. Collect user feedback and analytics to identify any further improvements.