UI Redesign

Featured image for Vans redesign project

Modernized and improved the existing Vans e-commerce design system

Objectives

Refreshed the user interface using modern design principles and reconciled styling inconsistencies.

My role

Visual Designer

Before

After

The process

Design system refresh

To give the site a more modern and airy feel, we chose a different font and reserved all-caps styling for headlines only. The Vans red often appears like an error color, so we minimized that to an accent color to be used sparingly. Buttons were simplified to one color and icons were recreated to have the same visual line weight.

Group of images showing the new Vans design system elements

PDP Selectors Testing

Product images needed to be bigger so customers could see the shoes without selecting them. Page height and excessive scrolling was a concern on products with many color options, so we concepted ways to minimize the height of the size selectors on the page without creating user confusion.

These options were presented to testers as fully functioning Figma prototypes:

User testing results

Qualitative test with 10 testers per option

Select the red shoe in a mens size 9.5

How easy was this task? Explain.

What would have made this easier?

Overall, users were able to quickly complete the tasks on all options, but some patterns were more obvious than others.

Final Approved Direction

Option B had a perfect score, but there was concern with adding extra clicks to “see all” color and sizes. The final decision was a hybrid option shown below.

Before

After

Conclusion

This was a very timely redesign effort internally because the UX team was switching from Sketch to Figma and the development team was preparing for a future replatforming project. From a customer’s perspective regarding PDP selectors, it was helpful to hear the behaviors they expect to see vs. things they find troublesome with shopping online.

Property of VF Corporation