Chanel

UI Design Concept

Reinterpretazione del sito, applicando ad esso le logiche E-commerce.

Questo Concept coinvolge il funnel del sito di Chanel, che attualmente permette esclusivamente la consultazione delle boutique in cui il prodotto è disponibile.
La scelta di utilizzare un brand reale è motivata dalla disponibilità di linee guida consolidate del brand, da declinare sull'interfaccia del sito.

Palette colori

Black & White

I colori scelti sono ereditati dal brand Chanel. Partendo dal bianco e dal nero ho ricavato delle tonalità che, applicate agli elementi della interfaccia, non ne compromettono l'usabilità, mantenendo corretti valori di contrasto dei testi e garantendo una corretta visibilità degli elemeni.

#000000
#585858
#909090
#C7C7C7
#E3E3E3
#FFFFFF

Design System

La logica dell'Atomic Design

Ho approcciato il concept con l'idea di ricavarne un esempio di Design System. Una piccola libreria di componenti riutilizzabili su tutta l'interfaccia del sito.
Il perimetro del Concept sono state le 3 pagine iniziali del funnel. Questo ha comunque permesso di ricavare un numero sufficente di componenti, che possiamo implementare in diverse aree del sito.

chanel design system

Wrap up

Montiamo l'interfaccia

Ho cercato di mantenere uno stile pulito, minimale e privo di ogni elemento non necessario. I componenti creati vogliono essere il filo che unisce i bisogni del business al tipo di esperienza esclusiva ricercata dall'utente.

Homepage

Per la homepage ho scelto di inserire uno slider hero di 3 immagini. Il motivo principale di questa scelta è la frequenza con cui questa caratteristica viene richiesta da un considerabile numero di clienti.
L'obiettivo è stato mantenere la hero coerente allo stile del brand, incastonandola nel classico frame intorno all'immagine, utilizzando lo spazio negativo, e aggiungendo anche funzionalità individuate lato business.
Successivamente troviamo il componente shooting, che prende il nome dal tipo di immagine che ingloba.
Questo componente vuole essere un rapido accesso ad un tipo di prodotto, focalizzandosi sulla texture del capo e sull'attrazione del tipo di immagine. Tra il carosello delle borse e quello dedicato alle calzature, ho inserito 2 box che fungono da collegamento a degli outfit, decorati con foto scattate in un contesto di sfilata ricreato.

homepage

Listing page

Dalla pagina della lista prodotti della versione reale del sito, ho ottimizzato gli spazi che precedono l'inizio della lista dei prodotti. Dove prima trovavamo una piccola hero, ora invece inizia subito la lista dei prodotti, andando incontro alle logiche di progettazione di interfacce E-commerce.
La linearità del layout della lista prodotti, viene spezzato da immagini di dettaglio ed estratti di shooting fotografici che raccontano il prodotto in maniera differente dalla foto still life.

listing page

Product page

Per la pagina prodotto, ho scelto di ottimizzare gli spazi della sidebar destra, mantenendola sempre in posizione fissa. Questo permette di avere le informazioni del prodotto e le CTA principali sempre visibili, indipendenti dallo scroll e a portata di mano.
Rispetto al layout della pagina prodotto attualmente nel sito, ho inserito una hero che contiene sia una immagine di prodotto indossato e una del prodotto still life.
Sotto la piega della pagina, troviamo la griglia che alterna immagini a del testo descrittivo. Le immagini di dettaglio del prodotto possono essere ingrandite al 100% dello schermo.

product page