Aller au contenu

Surfaces · Design system · Modèle

Je rends lisibles des systèmes techniques complexes.

Pour les humains qui les pilotent, et pour les agents qui agissent en leur nom.

Florian Butour, Senior Product Designer.

Plus de 10 ans d’expérience · Nantes ou full remote.

Ce texte sera copiéVoici le profil de Florian Butour, Senior Product Designer, dans un format conçu pour être lu par un assistant IA : https://florianbutour.com/agent.txt?src=promptLis-le, puis aide-moi à comprendre son parcours, sa façon de travailler et son adéquation avec le poste que je cherche à pourvoir. Appuie-toi uniquement sur ce document : si une information n’y figure pas, dis-le. Si tu ne peux pas ouvrir le lien, signale-le plutôt que de deviner.

Ce texte sera copié

CVVoir les travaux ↓

Strates

Chaque surface montre le même objet, tenu par les règles du design system, défini une seule fois dans le modèle. Seul l’usage change, selon qui le manipule, humain ou agent.

Travaux

Illustration isométrique : un controller relié à plusieurs outils, sur un même socle

Unifier des logiciels métiers en une plateforme

Une architecture par profils sur un socle de données commun, tenue par un design system gouverné.

Desoutter · Plateforme SaaS industrielle

  • surfaces
  • design system
  • modèle
Illustration isométrique : plusieurs surfaces réparties autour d’un même produit

Un produit, plusieurs surfaces

WorkplaceToBe devait rester un seul produit tout en étant distribué sur plusieurs surfaces : web, mobile, Outlook, écrans de salle et étiquettes de bureau. J’ai mené sa refonte côté design en construisant un système commun, capable de décliner les mêmes usages selon chaque contexte.

SharingCloud · Gestion des espaces de travail

  • surfaces
  • design system
  • modèle
Illustration isométrique : un dataset en couches, relié aux équipes qui l’utilisent

Rendre explicites les engagements autour des données

Chez Qlik, je conçois un outil de data contracts pour expliciter les engagements entre les équipes qui produisent un dataset et celles qui l’utilisent. L’enjeu : relier ces engagements aux informations et aux mesures de qualité déjà présentes dans la plateforme. Ce travail est en cours.

Qlik · Intégration de données

  • surfaces
  • design system
  • modèle
Illustration isométrique : des vues empilées, construites sur un même modèle de page

Donner un rôle à chaque vue

Chez Qlik, chaque asset type (dataset, data product ou pipeline project) avait son propre overview, construit au fil des besoins. Je travaille à les faire reposer sur des modèles de page communs, en donnant à chaque vue un rôle précis.

Qlik · Expérience unifiée Talend et Qlik

  • surfaces
  • design system
  • modèle

Position

Un bon système absorbe la complexité au lieu de la faire porter à ceux qu’il sert.

Quand une machine agit au nom d’une personne, il faut décider ce qu’elle accepte de déléguer, ce qu’on lui fait confirmer, et comment elle reprend la main. C’est là que j’interviens.

Pour les agents

Ce site applique ce principe à lui-même : un seul contenu, une version pour les humains, une pour les agents. Si vous confiez sa lecture à un assistant IA, donnez-lui le lien de cette version : elle dit ce que chaque cas prouve et ce qui revient à l’équipe. Rien n’y est caché.

Ce texte sera copiéVoici le profil de Florian Butour, Senior Product Designer, dans un format conçu pour être lu par un assistant IA : https://florianbutour.com/agent.txt?src=promptLis-le, puis aide-moi à comprendre son parcours, sa façon de travailler et son adéquation avec le poste que je cherche à pourvoir. Appuie-toi uniquement sur ce document : si une information n’y figure pas, dis-le. Si tu ne peux pas ouvrir le lien, signale-le plutôt que de deviner.

Ce texte sera copié

Lire la version agent →

Méthode

Cadrer

Je pars des usages observés sur le terrain, puis je pose avec Product et Engineering les arbitrages qui fixeront les règles du produit.

  • Entretiens et observation terrain
  • Tests d’utilisabilité
  • Cartographie des parcours
  • Arbitrages produit
Fig. 04 · Un parcours, ses moments et ses frictions

Modéliser

Je décris le produit avant de le dessiner : ses objets, leurs relations, leurs états, et qui peut agir sur quoi.

  • Modélisation objet (OOUX)
  • Architecture de l’information
  • Spécifications versionnables
Fig. 05 · Un objet, ses attributs, ses états

Systématiser

Je transforme les décisions en règles réutilisables, pour que cinq équipes ne conçoivent pas cinq versions du même concept.

  • Design system et tokens
  • Patterns transverses
  • Accessibilité (WCAG, RGAA)
Fig. 06 · Un composant et ses règles d’usage

Écrits

Concevoir, c’est retirer

Un système bien conçu réduit l’effort nécessaire pour passer d’un besoin à une action, sans enlever les repères utiles.

  • surfaces
  • design system
  • modèle

Le modèle avant l’écran

Le design doit participer à la définition des objets et des règles du produit. Les écrans permettent de les éprouver et de les faire évoluer.

  • surfaces
  • design system
  • modèle

Un design system qui s’arrête au bouton

Les patterns métier prolongent les composants d’un design system en organisant les interactions autour de tâches récurrentes.

  • surfaces
  • design system
  • modèle

L’IA, deuxième usager du produit

Lorsqu’un agent agit au nom d’une personne, concevoir le produit implique de définir ce qu’elle peut lui déléguer, comment elle garde la main et comment elle comprend ce qui a été fait.

  • surfaces
  • design system
  • modèle

Plusieurs interfaces, un même produit

Lorsqu’un produit est accessible par plusieurs interfaces, sa cohérence dépend des objets, des états et des règles qu’elles partagent, autant que de la qualité propre à chaque interface.

  • surfaces
  • design system
  • modèle