Retour aux projets

Refonte complète et design
system livré en code

Reprendre l’architecture d’IceInsights sans toucher à ses fonctions, puis lui donner une identité visuelle et le design system qui la fait tenir.

IceInsights surveille votre marché à votre place. Vous décrivez votre activité, l’application suit vos concurrents, les tendances et les signaux locaux, et vous remonte trois signaux qui méritent votre attention sur des centaines analysés. Si quelque chose d’important se produit, elle vous alerte.

Un produit intelligent qui avait l’air de trois produits différents.

Plus que « rendez-le beau »

La mission a commencé comme un travail d’UI : donner à IceInsights une allure à la hauteur de son concept. Le premier écran a suffi à élargir le périmètre. Le produit ne paraissait pas compliqué par manque de style, mais par manque de structure : trop de choses au même niveau, et rien pour indiquer ce qui compte.

J’ai donc reconstruit l’architecture de l’information en même temps que j’explorais l’interface. Les fonctions sont restées les mêmes, mais chacune a retrouvé sa place et le poids qui lui revient.

Faites glisser le curseur pour comparer.

IceInsights avant la refonte

Puis les fondations : un design system, livré en code

L’architecture réglée, j’ai reconstruit le langage visuel autour de la seule identité que le produit possédait déjà : la glace. Des surfaces givrées, des bleus glaciaires, une lumière mesurée. Le tout livré en design system, sous la forme d’un site de référence en HTML/CSS construit sur des tokens, que les développeurs utilisent tel quel.

Deux thèmes imbriquables, clair et sombre, avec des gammes de couleurs calibrées sur la luminance pour que toutes les échelles se comportent de la même façon. Une échelle typographique complète, des espacements sur une grille de 4 px, sept hauteurs de contrôles et neuf niveaux d’ombre.

Chaque composant est documenté et codé avec tous ses états, des boutons (7 styles, 4 tailles, 3 formes) aux champs, à la navigation et aux popovers. Le mouvement suit la même idée : le verre se pose, il ne claque jamais.

Design system IceInsights : palettes de couleurs et élévations Design system IceInsights : boutons et contrôles Design system IceInsights : puces, champs et composants Design system IceInsights : tokens et échelle typographique

L’inscription : votre site web, et c’est tout

Le parcours d’inscription ne demande qu’une chose : l’adresse de votre site. L’application en extrait le reste, et vous n’avez plus qu’à confirmer. Quatre étapes, une barre de progression, et un bouton final qui annonce ce qu’il va produire : « Générer ma première sélection » plutôt que « Créer un compte ».

Parcours d’inscription IceInsights sur ordinateur Parcours d’inscription IceInsights sur mobile

La sélection : un signal à la fois

L’écran d’accueil affiche un signal à la fois, avec trois décisions possibles : creuser, garder, écarter. Avant, c’était une pile de cartes à faire défiler. Une vue en liste reste disponible pour aller plus vite, et tout est accessible au clavier, les raccourcis regroupés dans un popover plutôt qu’affichés en permanence.

La sélection IceInsights, l’écran principal

État d’avancement

La phase 1 est livrée : le design system en thème clair, et les parcours sur ordinateur pour l’inscription et la sélection. Le thème sombre et les écrans mobiles sont en cours, construits sur les mêmes tokens, sans rien à redessiner.

Voir le design system en ligne