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.

Rôle
Lead UI Designer en charge de l'harmonisation, rationalisation et spécification design.

Déroulé du projet

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

1.

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

2.

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).

Tableau de 6 colonnes de catégories: Getting started, Core elements, Components, Modules, Patterns et Templates.
Page de présentation des règles de styles d'un bouton primaire

3.

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.

4.

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

5.

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 est perpetuelle.
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.