adidas Supercolor by Pharrell Williams

Client: adidas

Platform: Web & Mobile Web

My Role: UX Designer

Background

In 2015, adidas Originals is bringing back the iconic Superstar sneakers in collaboration with Pharrell Williams and launch the Supercolor campaign, where the Superstar will be offered in 50 different colors. The idea behind this campaign is to push and promote equality among mankind, and to allow every single individual to express themselves with their desired colors. 

 

Objectives

Design and develop a microsite to showcase all the 50 colors equally. The site must also be e-commerce enabled and integrated into the adidas.com website. Since this campaign is about equality, care must be taken not to give weight to any specific color, and the site must not influence the buyers' decision of color in any ways. Since 50 colors is a huge amount of choices, the site should assist the buyers to narrow down their selection and finally making the purchase.

 

Target Audience

Individuals that are not afraid to be who they are, and love to show the world their individual expression through colors that they think represent them.

 

Responsibilities

  • Iterated on many different design layouts to present the 50 colors equally before finally deciding on the color wheel option for desktop.
  • Designed the mobile web version, a simplified experience due to the limited screen real estate. Trying to mimic the color wheel experience on mobile would cause the images being too small.
  • Worked on the compare functionality to allow users to compare colors they like side by side with ease.
  • Designed the size selector that accommodates different regional sizing units for e-commerce.

 

Design Considerations

  • Randomized starting color for mobile

Due to the fact that the shoes are arranged in a grid on mobile web, the starting colors on top of the page was randomized so that the same colors are not always seen first on page load. However, the colors will still be ordered according to the original spectrum.

  • Compare function

The compare function allows users to easily add or remove colors. Users can buy straight from the compare screen.