Quick Shop
Anytime. Anywhere.
Displaying all of the advanced technology and innovations that went into the product was, of course, important. But, so are sales. It was important for the user to have quick and easy access to the purchase process without sacrificing the storytelling aspect of the page.
To achieve this, we created a “Quick Shop” feature that runs alongside the user allowing them to shop at any point in their journey. The feature also includes the 3 main layers of the shoe: upper, mid, and sole. This acts as a progress indicator and “constructs” itself in unison with the content as the user scrolls down the page.
Plan It Out
With videos, lottie animations, collaged layers, animated sequences, and responsive horizontal + vertical grid lines — it was important to have a clear plan of attack to ensure consistency across devices. Mapping out space and functionality of the Quick Shop feature, prioritizing device-specific animations and videos, and asset size percentages across screen sizes helped create a solid end product.
Optimized Without Sacrifice
By prioritizing assets and deployment, we were able to create a mobile experience that doesn’t degrade on smaller devices. Page load times were kept quick by creating mobile-specific assets and encoding videos for mobile devices. Easy access to shop the product was a vital component carried over across devices.