Benetton
Uniting color with motion
Complete redesign for benetton.com to improve the sales and represent the brand’s values on embracing diversity.
Experience Design
Motion Design
2020
I joined the team right at the end and completed numerous high fidelity prototypes along with a motion design system ready to be handed over to the developers in just 4 weeks.
In the middle of a global pandemic, retail stores were highly at risk as more and more people started to shop online. After having to close hundreds of shops around the world and their e-commerce website outdated, Benetton needed a new direction urgently.
We had only 18 weeks to design, handover and develop the website in a fully remote environment with team members located in different countries.
About
My key input was to bring these unique interaction ideas to life by setting motion principles and applying them to high fidelity prototypes. This created a much clearer communication environment for use to explain our ideas to the stakeholders and the developers.
Looking back the brand’s past, Benetton already had a brand purpose long before brand purpose was a thing. They embraced and advocated diversity through the lens of colour. Our goal was to bring back the same spirit by creating a new digital experience around two words: Blend Different
This allowed us connect the brand’s purpose with a simple interaction along with other key signature moments throughout the website to embrace the colourful products across different collections.
Approach
Fluid
Page loads and content builds have been inspired by the organic nature of our fabrics, flowing into place and forming into final shapes. We use a combination of transparency, momentum and offset to introduce components within a layout in a way that is smooth and fluid.
Motion Principles
Playful yet functional
Cards and interactive elements have a number of states from focus, to rollover and reveal. We use the metaphor of our garment behaviours to emphasise the tactile quality of the interface, showcasing areas of focus and providing feedback to user interactions.
Confident
The motion of the components in the page reflects the confidence of the brand. They move in a certain precision and determination while not being too disruptive.
Throughout the experience, there are multiple memorable areas for users to discover. In Blend Different module, users can mix and match different styles. A simple interaction that reflects Benetton’s own values.
Shop by colour celebrates the colourful collections of the brand and provides a fun experience for customers looking for an item with a specific colour in mind.
Signature moments
Each column slides in place with a confident motion and a slide delay between them. A nice, continious movement.
We wanted the website feel alive and dynamic. Once everything settles down, we then introduces micro movements in certain elements to keep to module alive.
Navigation
The colourful lines flow down while the weather widget icons display the current weather with a very subtle looping motion.
After a fast paced 18 weeks and with a global roll out, our efforts paid off. Here are some of the results after the launch.
Stats
18
Weeks
59%
Page view increase
53%
Revenue increase
8%
Conversion rate increase
14%
Dwell time increase
Motion patterns are coherent, recognisable and consistent movements of components to help users understand the behavior and interactions of the site.
Motion Patterns
01. Speed
02. Offset
03. Position
The guide consisted of clear rules around the look and feel of the motion design, easing applications and animation delays within different elements shown in timeline views along with multiple examples.
Created a motion design system from the ground up along with a 40 page handover document to handover the rules and applications to the developers.
This was the best way to communicate our vision and making sure it is understood by the developers for a perfect execution.
We used a custom easing we called the Benetton Curve. A motion that is confident, reflecting the brand’s bold stance throughout its history.
Motion design system
Imagined the homepage as a stage where we get multiple motion ideas together and present them as a whole. We use parallax scrolling effects and combine them with interactive modules to give a great first impression.
Homepage
Following the approach on the navigation elements, cards and page title also slides into position in the listing page.
We also added micro interactions within the cards to allow customers purchase items as easy as possible.
Product Listing
The image gallery is where all products shine. By a click of a button, the gallery covers the entire page and becomes the center stage with a smooth transition. Cursor changes and signifies the interaction while users browse through the gallery on desktop.
Product Detail
In mobile breakpoint, add to bag button follows users in the entire page, providing instant access to purchase the item on the go.
