Philippe Caron

Designer & programmeur web

Directions № 3

8 avril 2024
Philippe Caron

Alerte COVID

Alerte COVID est une application de notification d'exposition conçue par le Service numérique canadien pour le gouvernement du Canada. Dans cette équipe, j'ai créé un ensemble d'outils et de principes de design qui ont permis de livrer une application de façon efficace.

Concevoir une application en 45 jours permet peu de temps pour élaborer un langage visuel précis et fort. Après le lancement et au cours de la durée de vie de l'application, j'ai continué d'adapter certains outils en fonction des besoins des développeurs, designers, analystes politiques, tout en précisant le langage visuel de l'application.

Les outils de design étaient centrés sur l'utilisation de Figma pour documenter, et organiser clairement les décisions et les itérations clés de l'application. Le Figma était organisé en fonction des besoins de l'équipe, et servait à orienter les différentes disciplines. En choisissant Figma, cela a pu aussi solidifier nos principes d'accessibilité : les composantes d'interfaces étaient réfléchies afin d’être accessibles avant même d'être fournies au développeurs et testeurs.

La palette de couleurs à trois teintes fut particulièrement difficile à réaliser car l'objectif était de maximiser le contraste entre les teintes tout en simplifiant le choix de couleur. Je parle davantage de notre processus de design dans l'étude de cas en anglais.

J'ai dessiné les icônes pour l'application, incluant l'icône de l'application, les pictogrammes des mains et les icônes d'interface.

Ont collaborés de nombreuses personnes au Service numérique canadien.

Feuille d'érable dans un octogone rouge vif, entouré de petits triangles gris dans une forme carrée arrondie.
Icône pour l’application Alerte COVID
Alerte COVID

Système de design pour application mobile
Bibliothèque Figma

Une palette de 7 couleurs. Chaque couleur se divise en 3 tons: clair, saturé et foncé.
Système de couleur pour Alerte COVID
Icône stylisé d'une main tenant un téléphone devant une affiche pour scanner un code QR.
Icône pour ajouter une visite
Séries d'icones stylisé représentant une main. Chaque main illustre un concept pour: le bien-être, la gratitude, le rappel et l'attention
Les mains d'Alerte COVID apportent une touche humaine.
Un ensemble de 18 icônes sont répétés d'abord sur un fond gris pale, puis un fond noir. Les icônes sont simple et ont des proportion uniformes. Les icônes représentent différents concepts tel que des flèches, une poubelle ou un code secret.
Icônes pour Alerte COVID
Une boite indique un statut OK. Une icône d'un pouce en l'air sur un fond vert offre une impression de sécurité. Le contenu principal renforce cette impression.
Statut d'exposition, variation OK
Trois options de navigation. Chaque option possède une icone, une couleur et un libellé différent
Groupe de navigation
Une boîte indique que Bluetooth doit être activé. Des instructions précisent pourquoi.
La composante carte, variation problème technique
Une boite indique un statut à risque d'exposition. Deux actions immédiates sont proposées.
La composante carte, variation action multiples
Interface d'application mobile permettant d'entrer une clé à usage unique.
Entrer une clé à usage unique
Interface d'application mobile permettant de numériser un code QR à l'aide de la caméra.
Ajouter un endroit avec un code QR.
Affiche en tons de gris avec un gros code QR au centre. Le titre Scannez ici est écrit en grosses lettres. Des pictogrammes indiquent comment numériser le code avec l'application Alerte COVID.
Affiche de visite en tons de gris
Affiche en couleur avec un gros code QR au centre. Le titre Scannez ici est écrit en grosses lettres. Des pictogrammes indiquent comment numériser le code avec l'application Alerte COVID.
Affiche de visite en couleur

Notification

Notification est une application conçue pour les fonctionnaires du gouvernement du Canada. Notre petite, mais vigoureuse équipe travaille sans cesse à améliorer l'application Web. Mise en service en 2020, j’ai contribué à de nombreux changements à l’application, petits comme grands.

Une partie de mon travail est de conserver et de faciliter la livraison de fonctionnalités bien conçues qui ont un langage visuel clair, moderne et cohérent. À l'aide de Figma, j'ai calqué une bibliothèque de composantes sur l'interface existante de l'application. Par cet exercice, j'ai pu mieux identifier et documenter certaines lacunes dans les couleurs, la typographie, les composantes simples et les motifs plus complexes. Cette documentation a servi ensuite à évoluer l'application et à renforcer la qualité du langage visuel.

Parmi mes additions, un système d'illustrations ludiques sert à rendre l'interface plus accueillante. La typographie est centrée sur Noto Sans, la typographie utilisée par canada.ca, en ajoutant sa variante Display pour les titres.

Illustration d'un oiseau inspectant ce qui semble être un courriel.
Le pigeon détective
Notification

Système de design pour application Web
Bibliothèque Figma,
Jinja, HTML, CSS et Javascript.

Illustration d'un camion. Le camion transporte ce qui semble être un classeur Excel.
Le camion
Un oiseau regarde deux bulles de messagerie disparaitre dans un trou.
Le néant
Une composition pour illustrer une typographie. La fonte est légèrement condensée et de type humaniste. Elle est de la famille Noto Sans.
Noto Sans Display par Google
Une composition pour illustrer une typographie. La fonte est légèrement condensée et de type humaniste. Elle est de la famille Noto Sans.
Noto Sans Display par Google
Une composition pour illustrer une typographie. La fonte est de largeur normale et de type humaniste.
Noto Sans par Google
Un mélange de composantes de formulaires. Les boutons, champs de texte et champs d'options se distinguent, mais partagent le même langage visuel.
Composantes de formulaires
Quatre boites montrent des statistiques différentes. Deux montrent un nombre par rapport à une limite. Les deux autres montrent un nombre sans limite.
Widgets
Un ensemble de composantes pour faciliter l'exploration de contenu. Un titre, un fil d'ariane et une liste sélectionnable.
Motif d'exploreur
Une boite avec du contenu d'aide et un lien d'action.
Fiche d'aide
Une boite contient de l'aide lorsqu'il n'y a aucune donnée à afficher. Une illustration accompagne le message pour se distinguer dans l'interface.
État vide
Une barre de navigation permettant aussi de comparer 3 statistiques.
Pillule de navigation

Kit de design de la Plateforme du gouvernement du Canada

La Plateforme est une suite d’applications qui, comme Notification, facilite le travail des fonctionnaires. Partant du travail accompli sur Notification, l'objectif était de regrouper nos efforts en tant que designers pour organiser et s'entendre sur un langage visuel pour la plateforme.

Les tokens de couleur sont conçus pour faciliter la sélection d'une couleur. L'idée est d'offrir un équilibre entre contraste et choix. Les teintes sont uniformes dans l'espace LCH, donc prévisibles entre les différentes couleurs de la palette.

Le kit regroupe aussi un système de tokens de dimensions à utiliser dans des composantes atomiques ou comme espacement. J'ai aussi réalisé quelques systèmes d'icônes pour identifier les deux applications existantes – Notification et Formulaire – et anticiper les futures applications.

Ont collaboré: Sam Sadasivan, Caroline Connors.

Une palette de 6 couleurs. Chaque couleur se divise en 5 tons en maximisant le contraste entre chaque ton.
Système de couleur pour la plateforme
Kit de design de la Plateforme du gouvernement du Canada

Bibliothèque Figma

Deux icônes dessinées à partir d'une grille. Les proportions de la grille est compatible avec le logo du gouvernement du Canada
Système B
Deux icônes dessinées à partir d'une grille.
Système B. Grille
Un tableau de tokens de dimensions allant de 4, à 6, 8, 12 et 16. Ces dimensions facilitent la création de composantes atomiques.
Dimensions pour composantes
Un tableau de tokens de dimensions allant de 15, à 30, 45 et 60. Ces dimensions facilitent la création d'un rythme vertical et horizontal.
Dimensions pour mise en page et rythme
Grille de conception de logo montrant les ratios des logos. Les logos ont un ratio de 2 pour 1 ou 1 pour 1.
Système A. Ratios
Grille de conception de logo montrant les proportions relatives des logos selon leur hiérarchie.
Système A. Proportions
Les logos sont assemblé en grille. Les ratios et proportions compatibles permettent d'harmoniser le système de logo.
Système A. Harmonie
Quatre logos. Les logos sont alignés pour souligner leur similitude. Chaque logo se distingue par la forme et la couleur, mais partagent une apparence carrée et la même fonte.
Système A. Icônes

Sans Atout

J’ai conçu le système de design Sans atout dans mon temps libre. Il sert à faciliter la création de jeux de cartes multijoueur. Le système est une extension de la librairie Chakra UI et du système de couleurs Reasonable.

Les couleurs Reasonable m'ont donné un coup de pouce ici, car elles sont vibrantes et contrastées. J'ai choisi des typographies très distinctes, mais qui selon moi fonctionnent très bien ensemble.

Les tartans et les avatars sont des motifs générés aléatoirement.

Un des objectifs de ce projet était aussi de dessiner des cartes à jouer. En commençant par les quatre sortes, j'ai aussi créé quelques dos de cartes. Dans le futur, il y aura l'opportunité de dessiner les figures.

Le système de design supporte la plateforme de jeu multijoueur en temps réel nommée 52 Cartes. La version beta contient le jeu du Huit, mais est conçue pour accueillir n'importe quel jeu qui se joue avec des cartes standard.

3 boites de jeux. Chaque boite est une composition conceptuelle de cartes à jouer colorées.
Boites de jeu
Sans Atout

Composantes Chakra UI, NextJS, Boardgame.io, Storyboard

Un système de composantes de formulaires. Boutons, champs de texte et avatars sont combinés pour produire une suite de composantes interactives.
Composantes de formulaires
Une composition pour illustrer une typographie. La fonte est large. Les ouvertures contrastent avec les traits gras. Les glyphes semblent presque carrés, mais sont définitivement plus arrondi. Les terminaisons sont droites.
Clash Display par Indian Type Foundry
Une composition pour illustrer une typographie. La fonte est large. Les ouvertures contrastent avec les traits gras. Les glyphes semblent presque carrés, mais sont définitivement plus arrondi. Les terminaisons sont droites.
Clash Display par Indian Type Foundry
Une composition pour illustrer une typographie. La fonte est large. Les ouvertures contrastent avec les traits gras. Les glyphes semblent presque carrés, mais sont définitivement plus arrondi. Les terminaisons sont droites.
Clash Display par Indian Type Foundry
La suite numérique de 2 à 10 et les lettres J. O. K. E. R. A. et Q. placées sur un fond jaune.
Token Bebop pour une suite numérique et autres caractères
Token Bebop écrit en grosses majuscules. La fonte est épaisse et et fluide. Les sérifs sont épais comme dans une fonte égyptienne, mais l'effet général donne une impression de western.
Token Bebop par Phantom Foundry
Le mot Sharpie écrit trois fois en grandes majuscules. La fonte est scripté grossièrement, comme des grandes lettres écrites par un marqueur à la va-vite.
Sharpie par Indian Type Foundry
Le mot Sharpie écrit en grandes majuscules. La fonte est scripté grossièrement, comme des grandes lettres écrites par un marqueur à la va-vite.
Sharpie par Indian Type Foundry
Une composition illustrant des fonctions typographiques. En entourant les nombres avec des parenthèses ou des crochets, les nombres deviennent encerclés. Les nombres peuvent aussi êtres tabulaires.
Variantes numériques d'Ottessa
Un paragraphe de texte pour illustrer une typographie. La fonte est condensée, humaniste et faible en contraste.
Ottessa par TypeMates
Quelques mots pour illustrer une typographie. La fonte est condensée, humaniste et faible en contraste.
Ottessa par TypeMates
Motif tartan en carreaux. Les couleurs dominantes sont le rouge, blanc, brun et jaune.
Tartan grand-mère
Une grille d'avatars générés aléatoirement. Chaque avatar a une couleur de base vibrante, des yeux, un nez et une bouche. Chaque à une expression unique et peut regarder à droite ou gauche.
Avatars génératifs
Icônes pour Pique Coeur Carreau et Trèfle. Le style est standard, avec des formes très géométriques et des trappes d'encre exagérées
Pique, Coeur, Carreau et Trèfle
Motif tartan en carreaux. Les couleurs dominantes sont le orange et jaune.
Tartan citrouille
Trois cartes à jouer faces cachées pour montrer différents dessins de dos de carte. Sur une, plusieurs carreaux noirs sont alignées en grille, sauf un rouge. Sur un autre, un trèfle très grand et vert apparait comme un arbre. Sur la dernière, un pigeon blanc se perche
Illustrations de dos de carte
Une pile de cartes bien rangées. Au dessus, on aperçoit l'épaisseur de la pile.
Motif de la pile
Un tas de carte. Toutes les cartes sont empilé face visible une par dessus l'autre. Seule la dernière carte est complètement visible.
Motif du tas de carte
Quatre cartes à jouer face visible. Toutes les cartes sont visibles et sont associé à un joueur grâce à leur avatar.
Motif de la levée
Une liste d'étiquettes de nom. Chaque étiquette est composé d'un avatar aléatoire d'un visage drôle, un nom, une couleur unique et de l'information contextuelle.
Motif. Joueureuse
Une liste d'événement de jeu partant du bas vers le haut. L'événement le plus récent est en bas de la liste. Chaque événement est associé avec l'avatar d'un joueur.
Motif du journal de jeu
L'interface mobile d'une table de jeu. Il y a une pile de carte, une défausse, une liste des joueurs, un journal d'événements et les cartes en mains d'un des joueurs.
Interface du jeu du Huit
Interface lors d'une victoire. L'avatar et le nom du gagnant sont centré, les cartes jouées sont dispersés et il est possible de quitter ou de rejouer.
Victoire au jeu du Huit

Directions

Plus les années passent et plus les projets prennent la même direction. Je remarque que les cinq dernières années m'ont fait vivre des projets auxquels j'ai voulu assurer une direction visuelle forte et cohérente, tout en supportant les autres disciplines. Mes créations sont fabriquées avec l'intention de documenter. Dans une équipe, je me fais souvent petit et préfère écouter. Alors, quand je choisis de prendre la parole, je dois être convaincant et savant. C'est dur. J'ai travaillé mon métier afin d'encourager les autres ainsi que mon organisation à avoir un leadership en design plus courageux.

J'apprends avec l'expérience que ma méthode de design est fondée sur une collaboration efficace, et qu’une équipe de produit sont également des utilisateurs avec des besoins précis.

Avec Alerte COVID, on ne savait pas du tout dans quoi on s'embarquait. Nous sommes une équipe spécialisée en Web. Une application native était un territoire inconnu pour la plupart d'entre nous. N'empêche, nous avions l'énergie et la capacité d'entreprendre un tel projet. J'ai pu peaufiner mon modèle de collaboration centré sur le design qui allait définir mes contributions futures.

Le kit de design de la plateforme était plus ambitieux, et s'est éventuellement essoufflé. L'origine du projet était de concevoir un langage de design moderne qui nous permettrait d'harmoniser les services de la Plateforme.

Pour laisser aller, je me suis centré sur Sans Atout. J'avais un besoin de travailler sur quelque chose qui m'apportait du bonheur et de la motivation. Dans ce projet, j'ai pu pousser mes idées jusqu'au fond et au-delà. J'adore où ce projet a abouti, mais il y a énormément de travail à faire encore. C'est un projet de passion que j'aimerais partager avec le monde.

Dans mon espace de travail, travailler mon métier de designer fait mon bonheur. Cependant, j'ai toujours l'ambition d'aller plus loin, d'inspirer d'autres designers et d'accomplir quelque chose de plus grand. Mon défi restera de mieux concilier mon attitude collaborative avec un design leadership plus fort dans mes futurs projets.


Design, direction artistique, textes et organisation : Philippe Caron. Révision : Catherine Dufour