Retour aux projets
Retour aux projets

Un design system pour
deux publics différents

Doryn est une application web pour les photographes scolaires. Le photographe y dépose ses prises de vue, fixe ses prix, et chaque famille reçoit une boutique où n’apparaissent que ses propres enfants.

Un seul produit, donc, mais deux usages qui n’ont rien à voir : un photographe professionnel qui y travaille toute la saison, et quelques centaines de familles qui y passent une fois dans l’année.

Ma mission consistait à livrer un design system en Figma et en HTML/CSS, prêt à intégrer tel quel, accompagné de quelques maquettes qui montrent comment il s’applique. Le développeur monte le produit dessus.

Un composant, deux mondes

Un espace de travail sombre et dense pour le photographe. Une boutique claire et calme pour les parents. Deux publics qui n’ont ni le même écran, ni le même temps, ni le même usage.

Le photographe trie ses prises de vue chaque semaine de la saison, souvent le soir, sur un grand écran. Les parents ouvrent la boutique quelques minutes sur leur téléphone ou leur tablette, et n’y reviennent pas avant l’année suivante.

Deux visages pour un seul produit, donc. Pour changer de thème, on remplace un seul attribut dans la page, et tout suit : les surfaces, les ombres, les niveaux de texte. Le même bouton, la même carte, le même panneau latéral, au studio comme en boutique.

Faites glisser le curseur pour passer de l’un à l’autre.

Doryn, côté parents : la boutique de photos en thème clair

Toute la saison sur un seul écran

Le photographe ouvre Doryn pour savoir où en est sa saison : ce qu’elle a rapporté jusqu’ici, et ce qui bloque. Quelles photos n’ont pas encore d’élève associé, quelle commande n’est pas revenue du labo, quel colis n’est jamais arrivé.

L’écran d’accueil est donc un tableau de bord. Le chiffre d’affaires de la saison et la tendance de la semaine en haut, les dernières commandes en dessous, et le pipeline complet, étape par étape. Tout le reste s’ouvre depuis cet écran.

C’est l’écran le plus dense du produit : tuiles de chiffres et courbe de tendance, puces de statut et lignes de liste, pipeline sur trois colonnes. Il est entièrement construit avec le design system, sans une seule ligne de CSS sur mesure.

Tableau de bord du photographe Doryn, thème sombre

Un design system livré en code

Le livrable est un site de référence en HTML/CSS : un dossier que le développeur dépose dans le projet et utilise tel quel. Tout y est construit sur des tokens, avec un partial PHP par composant.

Les deux thèmes se distinguent plus par la lumière que par la couleur, et c’est ce qui explique le nombre de surfaces et d’élévations du système. Une ombre lisible sur un fond blanc disparaît sur un fond sombre : chaque niveau de relief a donc ses propres valeurs dans les deux thèmes.

La règle qui tient l’ensemble : le code recopie le Figma. Un script relit les styles dans le fichier et les compare une par une aux variables CSS, pour que les deux ne divergent jamais.

Design system Doryn : 276 élévations, boutons et puces, dans les deux thèmes Design system Doryn : gammes de couleurs, tokens et états des champs Design system Doryn : styles de texte, bascules, badges, cases à cocher, interrupteurs, jauges et curseurs

Côté parents : quelques minutes, n’importe où, une fois dans l’année

Les contraintes de densité et d’apprentissage s’inversent complètement de ce côté-là. Le parent reçoit un lien, il entre son code, regarde les photos de son ou ses enfant(s), il achète… Tout doit se comprendre immédiatement, sans explication, de l’écran d’accueil au paiement.

Le parcours tient en cinq écrans, la création de compte restant facultative : le code, la galerie, la photo, le panier, le paiement. La photo est le produit, donc elle prend l’écran : elle s’ouvre sur toute la largeur, avec les tarifs à côté sur ordinateur et en dessous sur téléphone.

Le panneau latéral qui liste les produits sur un ordinateur devient un volet qui monte du bas sur un téléphone. Même composant, mêmes tokens, une autre géométrie.

À noter : ces écrans ne faisaient pas partie de la commande. Je les ai construits pour vérifier que le système tient un parcours complet sans qu’un seul composant ait été tordu pour entrer.

Le côté parents de Doryn : la galerie de la classe sur un portable, et le même parcours sur un téléphone : galerie, photo avec ses tarifs, et panier

Fait pour être transmis

Le développeur de Doryn ne devrait jamais avoir à ouvrir Figma pour retrouver la valeur d’une ombre. Chaque paramètre de composant porte donc le nom exact de sa variante dans le fichier, et le système couvre quatre largeurs d’écran, du téléphone au grand moniteur.

L’enjeu est là : le développeur construira des écrans que je n’ai jamais vus, et ils ressembleront à Doryn.

Ma partie est faite. Le produit se construit dessus maintenant.