Design System

Contribution à l'optimisation du Design System de PerfectDraft

Refonte du design system de PerfectDraft au sein de la Core Design Team. Un travail collaboratif visant à améliorer la cohérence, l’accessibilité et l’efficacité du design web et mobile.

Team

1 Lead Product Designer, 1 Product Designer senior, 1 product designer (moi), 1 Lead Frontend Developer

Skills

Design system, Design tokens, Documentation, UI Design

Timeline

2021 - 2023

Contexte

Kiabi souhaitait rationaliser la création de ses campagnes Display et Social Ads, en garantissant une identité visuelle homogène et en réduisant les coûts et le temps de production.

Objectifs

L’objectif principal était de créer des templates couvrant tous les formats de bannières, facilement adaptables pour cinq marchés internationaux. Il s’agissait également de :

sentiment_satisfied

Réutiliser les composants existants du design system Kiabi

imagesmode

Concevoir des templates modulaires pour couvrir tous les formats

translate

Faciliter la traduction rapide et cohérente via variables Figma

add

Créer de nouveaux composants modulables

package

Livrer des fichiers prêts à l’usage dans les bons formats

target

Comment pourrions-nous créer des templates de bannières modulaires et multilingues qui accélèrent la production tout en garantissant cohérence et qualité visuelle ?

Process & Méthodologie

1. Création des templates master

Actions mises en place :

Conception de 34 templates modulables dans Figma.
Réutilisation et combinaison de composants du design system Kiabi
Mise en place de composants réutilisables pour textes et images.
Vérification graphique pour assurer la conformité aux brand guidelines Kiabi.

2. Traduction

Actions mises en place :

Intégration du besoin multilingue non prévu initialement.
Utilisation des variables Figma pour :
- Modifier rapidement les textes sans toucher aux composants.
- Maintenir automatiquement la cohérence graphique sur tous les formats.
Ajustements automatiques de mise en page pour gérer les variations de texte.

3. Export et livraison

Actions mises en place :

Export dans les formats requis
Organisation et nommage selon les conventions Kiabi.
Livraison finale dans le DAM / dossier partagé.

Conception des masters

Traduction via les variables Figma

Résultats

Les templates sont prêts à l’usage pour cinq marchés internationaux, offrant un gain de temps significatif et un processus reproductible pour les futures campagnes. Le projet a réduit les coûts de production tout en garantissant une identité visuelle cohérente et conforme aux brand guidelines Kiabi.