adidas.com motion design
adidas
adidas.com motion design
Creating an industry-leading e-commerce experience In close collaboration with the global e-comm team at adidas we set a common goal; To elevate the current experience on adidas.com by introducing motion design. This motion language enhancement envokes dialogue with their creative audience by giving directional guidance and an overall delight. Altogether it will set adidas apart to make them a leading digital creator by delivering a truly premium e-comm experience.
Challenge
The current state of the .com was not living up to the ambitions of adidas. To create a premium shopping experience, we needed to elevate the experience beyond the existing UX and visual language.
.png)
Outcome
The outcome was a detailed documentation that included the two fundamental principles that will serve as the foundation of every element that needs to move. The primary purpose is to make the motion language a secondary UI element that helps users navigate, and brings overall delight throughout the journey.
After two research phases, we determined the pillars on which we could build. The two guiding principles are based on research results and the overall creative direction of adidas digital. We combined that with our aspiration and found that directional motion should give guidance and define the build order in which elements can appear. The build order can give direction in a page buildup to indicate scroll direction, it can be the way a form builds up or emphasizes that an item has moved to the shopping cart. The delight is the sauce on top that is influenced by what part of the journey a user is in. This sauce is based on the animation curve and animation time.
Stages
The stages are a fundamental player in the motion language, based on where a user is in the journey we can apply different types of motion. In checkout, for example, a short and bouncy animation drags way more attention than a slow and easing animation. As a user is in an engaging state we would like to take our time to take you with us on a journey therefore the animation takes longer, and the order in which elements will appear is also more soothing.
Positive Change & Impact
Innovate and design positive change. Create solutions that capture, verify, and scale that change in the best possible way.
Business & Service design
Explore and discover sustainable growth with our expert guidance and hands-on design capabilities.
Brands & Experience
Create brand, product and service experiences your customers will love again and again.