Radio-Canada Info

Création d’un design system unifié pour Radio-Canada Info afin d’harmoniser l’expérience visuelle et fonctionnelle des plateformes numériques, tout en assurant la cohérence, l’accessibilité et l’efficacité du développement produit.

Radio-Canada Info

Mon rôle :

Design system, design UX et UI

  • Figma

Lead du projet d’élaboration du design system de Radio-Canada Info, j’étais responsable de la coordination entre les équipes de design et de développement afin d’assurer une implantation cohérente, évolutive et durable à travers les différentes plateformes numériques. Mon rôle comprenait notamment la création et l’évolution des composants UI, des variables de design, des échelles typographiques, des palettes de couleurs ainsi que des librairies d’icônes.

J’agissais comme point de référence pour les designers et les développeurs afin de garantir une intégration fidèle aux standards établis. Une attention particulière était portée à l’accessibilité numérique, avec l’application rigoureuse des normes WCAG AA. J’assurais également la maintenance, la documentation et l’évolution continue du design system afin de soutenir efficacement les besoins des équipes produit.

Crédits :

  • Jean-François Poliquin Chef design
  • Chloe Allard Lead design
  • Florence Vanasse Designer
  • Olivier Taillon Designer
  • Stephanie Dorval Designer
  • Gabrielle Fiola Masson Designer
  • Alexandra St-Louis Designer
Radio-Canada Info

Couleurs

Ce mandat nécessitait la prise en compte de plusieurs sous-marques tout en assurant le respect des normes d’accessibilité de Radio-Canada. Une attention particulière a été portée aux contrastes de couleurs afin qu’ils répondent aux exigences d’accessibilité, autant en mode clair qu’en mode sombre, et ce, dans l’ensemble des contextes d’affichage. Une librairie de couleurs centralisée a été conçue pour soutenir les équipes de design internes ainsi que les partenaires impliqués dans le projet.

Radio-Canada Info

Iconographie

Plusieurs icônes sur mesure ont été conçues afin de refléter la nouvelle direction artistique d’Info. Chaque icône a été créée à partir d’une grille standardisée, assurant une cohérence visuelle et une intégration optimale dans tous les contextes d’affichage. Le maintien d’une librairie d’icônes centralisée était essentiel pour faciliter le partage, l’utilisation et l’évolution de ces ressources par l’ensemble des équipes de design.

Radio-Canada Info
Radio-Canada Info

Un langage commun

La nomenclature des variables et des composants jouait un rôle central dans le Design System. Pensée pour être comprise autant par les designers que par les développeurs, elle établissait un langage commun à travers l’ensemble du produit. Espacements, typographie, couleurs et composants suivaient des conventions de nomenclature cohérentes afin de faciliter la collaboration, d’assurer la maintenabilité du système et de favoriser une implantation uniforme à grande échelle.

Radio-Canada Info
Radio-Canada Info

Refonte du gabarit d’article

Le gabarit d’article de Radio-Canada a été entièrement repensé dans le cadre du Design System. Il structure et orchestre plusieurs composants réutilisables afin d’unifier l’expérience de lecture et renforcer la cohérence du produit.

Radio-Canada Info
Radio-Canada Info
Radio-Canada Info

Un système modulaire

Les composants ont été pensés comme un système modulaire, capable de s’adapter à différents usages et formats. Qu’il s’agisse de cartes, de dossiers ou de contenus journalistiques, chaque élément pouvait être réutilisé et combiné dans plusieurs contextes tout en maintenant une cohérence globale.

Radio-Canada Info
Radio-Canada Info
Radio-Canada Info
Radio-Canada Info
Radio-Canada Info
Radio-Canada Info
Radio-Canada Info