Étude de cas · Identité de marque & design produit
B2B · Télécoms
living·objects
living·objects est un acteur majeur des solutions de gestion de la performance réseau pour les opérateurs et les fournisseurs de services. Ses plateformes évolutives supervisent, gèrent et optimisent les infrastructures mobiles, fixes et convergentes multi-technologies — ainsi que les services déployés dessus.
La mission : définir le design global et la direction artistique de l’entreprise, et élever l’UX/UI de ses applications.
Contributions clés
- Refondre l’identité visuelle de living·objects.
- Construire une direction artistique cohérente et singulière sur tous les supports et points de contact.
- Créer un design system responsive.
- Concevoir l’expérience et l’interface des applications.
01 — L’enjeu
Un costume de startup pour un partenaire d’infrastructure.
living·objects vend à de grands opérateurs télécoms, mais son identité était ludique et colorée — juste pour une startup grand public, à côté pour un marché institutionnel. Face aux opérateurs, la marque disait « startup innovante » alors qu’elle devait dire « partenaire d’infrastructure établi et fiable ».
Problème 01
Trop illustratif, trop détaillé
Une illustration de réseau complexe, avec dégradés, courbes et motifs internes. En petit — favicon, signature d’e-mail — les détails devenaient bouillie. Il manquait la simplicité qu’exige une marque B2B.
Problème 02
Une typographie générique
Une linéale standard et interchangeable, partagée par des milliers d’entreprises. Elle ne disait rien du positionnement ni de la personnalité de la marque.
Problème 03
Une flexibilité limitée
La marque ne fonctionnait qu’en couleur. Ses motifs internes rendaient impossible toute reproduction en monochrome ou en une couleur — une exigence de base pour des supports professionnels.
Problème 04
Un déséquilibre visuel
Un symbole lourd et détaillé associé à une typo fine et légère. Le logo paraissait trop lourd en haut et instable, surtout en petit format.
02 — L’objectif
Repenser l’identité de fond en comble.
Pas un simple lifting : une nouvelle base visuelle capable de porter les ambitions de l’entreprise auprès des grands comptes, et de se prolonger naturellement dans le produit.
- i.
Asseoir une crédibilité institutionnelle
Transmettre maturité, stabilité et fiabilité — les qualités que les grands comptes ont besoin de voir.
- ii.
Créer une marque singulière et mémorable
Une signature visuelle propre à living·objects, impossible à confondre avec un concurrent.
- iii.
Tenir sur toutes les applications
Une marque qui fonctionne du favicon de 16 px au panneau de 100 m. Aucun compromis, quelle que soit la taille.
- iv.
Porter un design system cohérent
Aller au-delà du logo vers un langage visuel complet, sur tous les points de contact numériques et physiques.
- v.
Exprimer la sophistication technologique
Refléter l’innovation et la précision de la plateforme, pas seulement sa fonction.
03 — La transformation
Quatre décisions, une signature.
Chaque élément du nouveau logotype a une raison d’être. Ensemble, ils transforment un nom en marque : calme, lisible et immédiatement living·objects.
Maturité
Une typographie à empattements crée une tension entre tradition et modernité. Son contraste plein/délié structure la lecture, ancre la marque dans l’institutionnel et stabilise le logotype.
Lisibilité
Le point médian sépare les deux mots et rend living·objects immédiatement lisible.
Singularité
Le point agit comme une ponctuation identitaire : il donne du rythme, introduit une pause graphique et devient un repère visuel propre à la marque.
Code
Une forme qui évoque les chiffres « 1 » et « 0 » fait un clin d’œil au code binaire et relie l’identité à la culture numérique sur laquelle l’entreprise s’est construite.
Design system
Un langage,
de l’atome à la page.
La refonte a donné une voix à living·objects. Le design system l’a fait parler de façon cohérente — sur une plateforme de supervision utilisée chaque jour par des ingénieurs télécoms, sur son site marketing et sur chaque support. Une source unique de vérité pour la couleur, la typo, les espacements et les composants, conçue pour évoluer avec le produit plutôt qu’à côté.
01 — Méthode
Construit comme de la chimie, pas comme une charte graphique.
Selon l’atomic design de Brad Frost, chaque élément d’interface est décomposé en ses plus petites parties réutilisables. Designers et développeurs partagent le même vocabulaire, et la modification d’un atome se propage de façon prévisible dans tout le produit.
Atomes
Couleur, typo, espacements, icônes — les tokens non négociables.
Molécules
Boutons, champs, puces, champs de recherche : des atomes combinés autour d’un seul usage.
Organismes
Fenêtres modales, tableaux de données, cartes et navigation — des blocs fonctionnels complets.
Gabarits
Mises en page tableau de bord, liste et détail qui définissent le squelette de chaque écran.
Pages
Du vrai contenu dans de vrais gabarits : là où le système se confronte à la réalité.
02 — Couleur
Calme, chaleureuse, réfléchie.
Une palette minérale remplace les anciens dégradés saturés. Une encre profonde ancre la crédibilité ; la sauge et la pêche apportent de la chaleur sans bruit. Les teintes secondaires sont réservées à l’illustration et aux catégories de données, pour que le sens ne repose jamais sur la seule couleur.
Dans le produit, un seul cyan fonctionnel est réservé à l’interaction — actions principales, sélection et focus — pour que les ingénieurs qui parcourent des tableaux de bord denses sachent toujours ce qui est cliquable.
03 — Typographie
Une serif pour la marque, une bête de somme pour les données.
L’identité s’appuie sur une serif contrastée pour exprimer la maturité. L’interface s’appuie sur Lato : neutre, très lisible en petit, avec les graisses nécessaires pour hiérarchiser des tableaux denses.
Marque
Serif de titrage
Logotype, titres, moments éditoriaux. Un contraste plein/délié pour une présence institutionnelle.
Interface
Lato — 400 · 600 · 700
Toutes les surfaces du produit, des tableaux de bord aux fenêtres modales. Nommée lato / type-name dans la bibliothèque.
| Token | Taille / graisse | Usage | Spécimen |
|---|---|---|---|
| title-large | 24 px / 400 | Contenu de carte, grand | Network availability |
| title | 18 px / 400 | Titre de fenêtre modale | Edit monitoring context |
| title-strong | 18 px / 700 | Projets | SD-WAN — Europe West |
| body | 16 px / 400 | Texte de modale, contenu de carte | Latency exceeded the threshold on 3 sites. |
| title-small | 14 px / 400 | Contenu de tableau | Paris-CE-04 · 12.4 ms · 99.98 % |
| title-small-strong | 14 px / 600 | Brouillons | Draft report — Q3 |
| body-small | 13 px / 400 | En-tête de tableau, champs, boutons | SITE · DEVICE · STATUS |
04 — Espacements
Un rythme de 8 points.
Chaque marge, chaque padding et chaque gouttière découle d’une seule unité de base. Les designers arrêtent de deviner, les développeurs d’arrondir, et des écrans conçus à des mois d’écart restent alignés au pixel près.
Grilles & espaceurs
linéaire · y = x + 8Tokens de padding & de marge
05 — Composants
Spécifiés au pixel près.
Chaque molécule est livrée avec son anatomie, ses états et ses règles d’usage. Les fenêtres modales permettent aux opérateurs d’agir sans perdre le contexte du tableau de bord qu’ils analysent — un besoin critique quand un incident est en cours.
Anatomie d’un bouton
- Hauteur32 px
- Padding vertical6 px
- Écart icône → libellé10 px
- Zone d’icône32 px
- Alignementcentré H + V
06 — Iconographie & illustration
De la précision, avec une touche humaine.
Les icônes partagent un même trait arrondi et une même grille géométrique, et parlent le vocabulaire des réseaux — nœuds, chemins, antennes, cloud. Une bibliothèque de formes abstraites prolonge la palette vers l’illustration et adoucit les contenus techniques sans jamais devenir du décor superflu.
07 — En situation
Jusqu’à 16 pixels.
Le monogramme ·lo a d’abord été conçu pour les plus petites surfaces : favicon, icône d’application, avatar. Il tient en thème clair comme en thème sombre, en une couleur, à toutes les tailles — exactement ce que l’ancienne identité ne savait pas faire.
Résultat
Ce que le système a changé.
Au-delà de la cohérence visuelle, le design system est devenu une infrastructure partagée entre design, produit et développement.
i.
Un seul vocabulaire
Designers et développeurs nomment les mêmes choses de la même façon, des calques Figma aux tokens CSS.
ii.
Une livraison plus rapide
Les nouveaux écrans sont assemblés à partir de composants éprouvés au lieu d’être redessinés de zéro.
iii.
Un produit crédible
La plateforme ressemble enfin à ce que la marque promet : calme, précise, prête pour les grands comptes.
Modules d’onboarding en e-learning
Le mouvement qui enseigne.
living·objects développe des LMS basés sur Moodle qui simplifient la formation à distance en entreprise. Pour un programme d’onboarding de British Telecom diffusé sur la plateforme, j’ai conçu et animé une série de modules qui accompagnent les nouveaux salariés dans les notions clés de gestion de réseau et les processus internes.
Ici, l’animation sert d’abord la compréhension, l’esthétique ensuite.
01 — Approche
Une notion à la fois.
Le brief demandait plus qu’un beau rendu : des contenus techniques, très orientés infrastructure, devaient devenir une animation claire et séquentielle qui allège la charge cognitive.
Brief
Traduire la complexité
Transformer des sujets d’infrastructure télécom denses en contenus qu’un nouvel arrivant peut suivre sans connaître le sujet.
Méthode
Le savoir minimum utile
Avec les experts métier internes, j’ai isolé exactement ce qu’un nouveau salarié doit savoir pour être opérationnel — et rien de plus.
Motion
Guider le regard
Chaque séquence isole une seule notion, avec des repères de direction, du rythme et une hiérarchie visuelle pour concentrer l’attention avant d’introduire l’étape suivante.
Résultat
Une documentation qui bouge
Des modules qui servent autant de documentation fonctionnelle que de contenu de marque — des références réutilisables bien après l’onboarding.
02 — Modules
Six modules, de la première connexion au SD-WAN.
De la visite guidée de l’interface LiveSP aux cas d’usage avancés, chaque module suit la même grammaire visuelle, pour que les apprenants se concentrent sur le contenu, pas sur le format.