← Tous les projets

Yassir · SEFAR / Design systems · Leadership transverse

Construire un langage commun pendant que les produits avancent.

Je pilotais le Product Design de Mobility et du B2B et contribuais à SEFAR avec les autres équipes design, l’ingénierie et la marque. J’ai directement porté les guidelines d’iconographie et contribué aux fondations couleur et typographie.

Mon rôle
Product Design Manager · Mobility et B2B
Collaboration
19 designers impliqués dans le système
Design · Ingénierie · Marque
Périmètre et période d’expérience
Iconographie · Fondations · Revues
Yassir, 2022–2023
Le projet en 30 secondesVoir les décisions ↓

Le problème

Les produits avaient des UI kits différents pendant que la marque et les marchés évoluaient.

La décision

Partir des besoins produit pour définir les fondations partagées et ce qui devait rester local.

Ma contribution

Guidelines d’iconographie portées directement ; contributions à la couleur, la typographie et l’alignement des squads.

Yassir · SEFAR — Construire un langage commun pendant que les produits avancent.
01 / Contexte

Un écosystème, plusieurs réalités produit.

Rider, Driver, Delivery et B2B avaient grandi séparément, avec différents UI kits et solutions locales. L’évolution de la marque ajoutait une contrainte. Les décisions devaient tenir sur mobile et web, en modes clair et sombre, entre langues et sens d’écriture.

4Squads produit
24Pays dans le périmètre du système
LTR + RTLSens d’écriture
Périmètre des résultats

Cette échelle décrit le périmètre du système partagé, pas des produits ou marchés livrés par moi seule.

02 / Contribution directe

Un cadre de 24 × 24 n’est pas une règle visuelle.

Des icônes pouvaient partager un cadre sans être cohérentes en poids, marges ou rythme. J’ai créé les guidelines pour les tailles 16, 24 et 32 px : épaisseur du trait, zone utile, rayon, alignement optique, versions pleines et filaires, états, nommage et usage.

Matériau d’iconographie d’origine : des cadres identiques ne garantissent pas le même poids visuel.
03 / Fondations partagées

Les tokens devaient tenir face au changement de marque et d’écriture.

J’ai contribué à la couleur et à la typographie à partir des besoins de Mobility et du B2B. Les couleurs de statut devaient rester pertinentes dans les écrans opérationnels denses et en mode sombre. L’arabe demandait un travail de hiérarchie, de ligne de base et de rythme, au-delà d’une police disposant des bons caractères.

Fondations et structure de composants du système partagé SEFAR.
04 / Travail transverse

Partir d’un problème produit. Décider ce qui doit être partagé.

Les revues hebdomadaires de composants, ateliers entre squads et critiques de design faisaient entrer les problèmes réels dans le système. Les revues avec l’ingénierie et la marque vérifiaient si un pattern pouvait tenir au-delà d’un écran. S’il répondait à un besoin uniquement local, il restait local.

SEFAR : un système partagé développé avec le design, l’ingénierie et la marque.
05 / Enseignement

La cohérence est une décision entre équipes avant de devenir un composant.

Ma contribution reliait la livraison produit aux règles communes : directement par l’iconographie, collectivement par les fondations et les revues entre squads. Le système donnait aux équipes un espace d’alignement tout en continuant à livrer.

Périmètre des résultats

Projet collectif. Aucune attribution individuelle de l’ensemble du système, ni de métrique de rapidité ou d’efficacité non vérifiée.

Projet suivant / Somfy Protect

Rendre l’installation aussi intelligente que le produit. ↗

Un rôle, une équipe, un produit à construire

Construisons quelque chose d’utile.

Parlons de votre produit, des décisions à prendre et de ce que le design peut y changer.

Échangeons ↗