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.

© 2021 by Cagri Yurtbasi