Création du composant "Breadcrumb"

Client :

Veepee

Categorie :

Design System

Date :

2024

Le
Contexte

Dans le cadre de l'évolution du design system de Veepee, nous avons identifié un besoin stratégique : intégrer un composant "breadcrumb" (ou fil d’Ariane). Ce dernier devait offrir une navigation claire, particulièrement dans les parcours complexes où les utilisateurs naviguent entre plusieurs niveaux hiérarchiques. L’objectif était d'améliorer la compréhension du contexte tout en renforçant la cohérence visuelle et fonctionnelle sur l’ensemble des pages. 

 

Le
Challenge 💪🏼

Créer un composant modulaire, intuitif et esthétique qui :

  • Facilite la navigation hiérarchique dans des parcours parfois complexes.
  • S’intègre harmonieusement avec les design existants dans le design system back et front
  • Reste performant, même sur des pages avec plusieurs niveaux de profondeur.
  • S'adapte aux différentes plateformes.

Mon
Role 🧢

En tant que Product Designer, j’étais en charge de :

  1. Analyser les besoins des utilisateurs et des équipes internes.
  2. Définir les cas d’utilisation du composant et ses spécifications fonctionnelles.
  3. Prototyper et itérer 
  4. Collaborer avec les designers pour garantir une implémentation fidèle.
  5. Documenter le composant dans le design system pour assurer sa réutilisation.

Recherche 🔎

Afin de créer un seul et même composant pouvant répondre aux attentes des différentes équipes et designer, j'ai tout d'abord fait un état des lieux de l'existant aussi bien au niveau du design front et du back (pour les back office interne). S'en suit d'une discussion avec les différents designer afin de s'aligner sur le nouveau comportement à adopter.

La solution ?

Le composant "breadcrumb" a été conçu pour être :

  • Clair et lisible : Des niveaux de navigation clairement distincts et un format adaptable selon l’espace disponible.
  • Interactif : Les éléments du breadcrumb sont cliquables pour permettre un retour facile aux pages précédentes.
  • Personnalisable : Intégration de thèmes et variantes (compact, étendu) pour répondre aux besoins spécifiques des produits.
  • Responsive : Une version réduite et intuitive pour les écrans mobiles, avec un menu déroulant pour les chemins plus longs.

Benchmark 👀

Le moment est venu de "bencher" et trouver de l'inspiration !

Mockups

Après avoir créé les wireframes pour s'assurer de la bonne construction du composant. Il est temps de créer les différents variants.

Documentation 📘

Une documentation détaillée a été créée pour garantir une adoption optimale du composant par toutes les équipes produit. Elle inclut :

  • L’anatomie : Décomposition visuelle du composant avec une description précise de chaque élément (icônes, séparateurs, liens, etc.).
  • Le layout : Règles de placement et d’espacement pour assurer une intégration harmonieuse dans différents contextes (desktop, mobile, responsive).
  • Do & Don’t : Bonnes pratiques d’utilisation et erreurs à éviter pour maintenir la cohérence et l’expérience utilisateur.
  • Accessibilité : Recommandations pour garantir que le composant est utilisable par tous, incluant des indications sur le contraste des couleurs, le focus clavier et les attributs ARIA.
fr_FRFrench