Uniting color with motion
Complete redesign for benetton.com to improve the sales and represent the brand’s values on embracing diversity.
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.
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.
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.
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.
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.
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.
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.
Page view increase
Conversion rate increase
Dwell time increase
Motion patterns are coherent, recognisable and consistent movements of components to help users understand the behavior and interactions of the site.
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.
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.
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.
In mobile breakpoint, add to bag button follows users in the entire page, providing instant access to purchase the item on the go.