L'Occitane en Provence

Core model - Design system

Contexte
Un déploiement des sites de la marque vers une nouvelle plateforme est en cours. Suite à cela le design avait été revu pour le lancement des 2 premiers pays (USA et Canada). Pour le lancement de nouveaux marchés très différents est apparue une nécessité de créer un Core Model.

▶ Temporalité

Septembre - Décembre 2019

▶ Rôle

Lead UI Designer

▶ Camarades complices

Laura Bourne-Branchu
Cheffe de projet E-commerce en charge du nouveau Core Model.
Laura Viana
UI Designer en charge de la reprise du Design system.

1.Analyse de l'existant

Vue de 2 tableaux de données regroupant une liste de styles de boutons et de titres

Prise de connaissance, recensement de tous les éléments structurants sur les sites en ligne, état des lieux.

2.Recherche

Tableau de 6 colonnes de catégories: Getting started, Core elements, Components, Modules, Patterns et Templates.

Etablissement d'une première hiérarchie, définition des catégories en accord avec les autres act.eur.ice.s du projet. Mise en place de l'outil (Zeroheight ici).

3.Conception

Page de présentation des règles de styles d'un bouton primaire

Rédaction des nouvelles règles prioritaires: grille, boutons, textes, titres, couleurs et règles d'espacements; avec pour chaque la création de maquettes de mise en situation pour vérifier la viabilité de ces règles. Le but étant de rationaliser et non de s'éloigner trop drastiquement du design en ligne.

Consolidage et remplissage du style guide au fur et à mesure des projets d'évolutions du Core model faits en parallèle ( redesign des formulaires, évolution du parcours de Check-out,...).

Vue d'exemples de guidelines et de schémas de spécification pour différents composants du site
Fenêtre du logiciel Sketch montrant des symbôles du header du site

En parallèle du projet, création de l'UI kit en librairie sur Sketch, nourri au même rythme que le style guide.

Et ensuite ?

Comme n'importe quel Design system son évolution et consolidage sont perpétuels.
Les prochaines étapes les plus primordiales sont la communication de ces outils de manière plus large et la mise en place de processus de co-conception avec les équipes de développement Front-end.

← Projet précédent Projet suivant →