Blue Wave

Webdesign · Refonte · 2024

Type: Refonte, webdesign
Année: 2024
Mon rôle: Direction artistique, identité visuelle, UI
Livrables: Logo, charte, dashboard, écrans
Outils: Figma, Illustrator

01Situation

Les outils de travail méritent eux aussi une identité.

Blue Wave, spécialiste de la maintenance informatique pour les entreprises, voulait moderniser son outil de gestion des tickets, celui où ses conseillers suivent et traitent les demandes des clients toute la journée.

Ce genre d’interface est souvent pensé pour la seule fonction : dense, grise, sans âme. Pourtant, c’est aussi le visage de l’entreprise.

Un conseiller passe des heures chaque jour sur ce type d’outil. La moindre friction, un statut mal visible, un bouton mal placé, se répète des centaines de fois. À cette échelle, le design n’a rien de décoratif : il pèse directement sur la fatigue et l’efficacité de celles et ceux qui l’utilisent.

02Tâche

Faire d’une refonte d’interface un vrai projet de marque.

Le périmètre : la navigation, le tableau de bord et ses statistiques, la liste des tickets et la fiche détaillée d’un ticket.

J’ai pris le problème à l’envers : avant de dessiner le moindre écran, donner à Blue Wave une vraie identité, puis en déduire tout le reste, du logo jusqu’au plus petit composant. Une marque cohérente produit des interfaces cohérentes.

Une interface ne se dessine pas écran par écran : elle se construit comme un système, avec ses styles de couleurs et de texte, et des composants réutilisables qui portent la même signature partout.

03Action

Une vague pour signature

Le logo prend le nom au mot : une vague, souple et en mouvement. Exactement ce qu’on attend d’un bon support.

Il vit aussi bien en grand, sur un sticker, qu’en tout petit dans la barre de navigation. Le brief portait sur les écrans ; j’ai tenu à donner à Blue Wave un logo et des objets, parce qu’une marque ne s’arrête pas à son interface.

Cette contrainte est souvent oubliée : dans un outil numérique, le logo apparaît surtout en tout petit, dans un onglet ou une barre latérale. Une forme simple résiste à la réduction ; un logo trop détaillé devient une tache.

Le bleu, décliné en nuances

Des bleus profonds et lumineux, un violet doux pour les accents et les graphiques.

Les couleurs d’état, en cours, en attente, annulé, se lisent sans effort, sans casser l’harmonie. Et parce qu’elles portent une information critique, elles ne sont jamais seules : un libellé les accompagne, pour rester lisibles par tous, sur tous les écrans.

De l’air dans les données

Le tableau de bord s’organise en cartes : statistiques, performance, dernier ticket traité, tickets et conseillers. Chaque information a sa place, et de l’espace pour respirer.

Une navigation réduite à quelques icônes, un menu qui se déplie à la demande, et le même langage graphique d’un écran à l’autre.

Un tableau de bord dense ne pose pas un problème de quantité, mais de hiérarchie. Ce qui est regroupé dans une même carte est compris comme lié, et l’espace vide sépare ce qui doit être lu séparément : il ne fait pas perdre de place, il fait gagner du temps.

04Résultat

Un logo, une palette, un système de composants et les principaux écrans de l’outil : tableau de bord, liste et détail des tickets, navigation.

Blue Wave m’a prouvé qu’une direction artistique n’est pas réservée aux marques grand public : elle peut aussi rendre un outil plus clair.

Il m’a surtout montré que dans une interface, direction artistique et ergonomie ne s’opposent pas : un système visuel bien pensé est justement ce qui rend l’outil plus simple à utiliser.