L'Occitane en Provence

Core model - Design system

Context
A deployment of the brand's websites to a new technical platform is ongoing. Thus, design had been reworked for the launch of the 2 first countries (USA and Canada). For the release of new markets with very different needs, it became a necessity to build a new core model.

▶ Timing

September - December 2019

▶ Role

Lead UI Designer

▶ Partners in crime

Laura Bourne-Branchu
E-commerce Project Leader in charge of the new core model.
Laura Viana
UI Designer in charge of the Design system's follow up.

1.Existing's analysis

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

Discovery, census and inventory of all the structuring elements on the current websites.

2.Research

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

First draw for a hierarchy, establishment of the categories in agreement with the other actors of the project. Set up of the Style guide's tool (Zeroheight in this case).

3.Conception

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

Writing of the new prior guidelines: grid, buttons, texts, titles, colors and spacing rules; with, for each, the creation of situational mock-ups to check their viability. The goal is to rationalize and not stray too drastically from current design.

Build and filling of the style guide progressively with the design of others Core model projects (Forms redesign, evolution of the Check-out flow, ...).

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

Creation of an UI kit library on Sketch, simultaneously and accordingly to the style guide.

What's next ?

Like any Design system, its evolution and consolidation are perpetual. The most essential next steps are a wider communication of these tools and the implementation of co-conception processes with the Front-end development team.

← Previous project Next project →