Vincent RodriguezDesigner

Contexte

Nx est le produit principal de l'équipe derrière Polygraph, avec plus de 44 millions de téléchargements npm chaque mois. Dans la foulée de Polygraph, l'équipe m'a rappelé pour concevoir la nouvelle marque de Nx et refondre nx.dev, en collaboration avec Heidi Grütter, leur Product Marketing Lead, ainsi qu'avec le CEO et les cofondateurs.

Challenge

Le principal problème de la marque était son manque de cohérence. Sans designer en interne, tout le monde contribuait à l'identité, mais personne n'en tenait la référence. Chaque support réinterprétait la marque à sa façon, le site en héritait mécaniquement, et il devenait difficile de retrouver une sensation propre à Nx d'une page à l'autre.

La seconde difficulté tient au produit lui-même. Nx est un outil très technique, pensé pour les développeurs, mais il doit aussi convaincre les CTO et les managers, car c'est en entreprise que sa valeur se multiplie, en aidant les équipes à passer à l'échelle. La marque devait donc rester crédible aux yeux des ingénieurs tout en restant lisible pour ceux qui décident.

La marque est en outre séparée en deux. Nx est la partie open source, donc gratuite, et Nx Cloud la partie payante, qui constitue le principal revenu de l'entreprise. La frontière entre les deux devait être nette, pour ne pas effrayer l'utilisateur open source et pour lui montrer clairement le moment où il passe du côté payant.

Enfin, l'un des objectifs principaux de la mission était de rendre l'identité plus simple et plus accessible. L'ancienne version intimidait, avec un langage et une esthétique très techniques et de longs blocs de texte.

Logo

L'objectif n'était pas de tout bouleverser. Le bleu reste, mais il évolue vers une teinte plus saturée, plus percutante et plus chaleureuse. Le logo, lui, a été entièrement retravaillé. La vague qu'il contenait n'avait que très peu de rapport avec la technologie, et desservait même le produit, une vague évoquant davantage le chaos que l'organisation.

Les lettres Nx ne sont les initiales de presque rien. Elles sont un reliquat de « Narwhal extensions », des tout débuts de l'entreprise. J'ai donc choisi de jouer avec le x et de le passer en exposant, pour accentuer l'idée de passage à l'échelle. Nx se lit alors « N puissance x », comme un projet que l'on prend en main pour l'aider à grandir. J'ai enfin utilisé des formes arrondies, pour appuyer la direction plus accueillante voulue pour la marque.

Marque

Les équipes de Nx n'ayant pas de designer en interne, j'ai créé un brand book en ligne qui fait office de source de vérité. Il rassemble tout ce dont elles ont besoin pour concevoir leurs visuels et maintenir une identité cohérente, même sans moi. Je leur ai également fourni un outil de création sur mesure, avec lequel elles produisent en autonomie des visuels conformes à la marque.

Le travail a aussi porté sur la stratégie et le positionnement, afin que l'utilisateur perçoive nettement la différence entre la partie gratuite et la partie payante du produit. La gratuité est dans l'ADN de l'open source, et cette différence devait se voir au premier coup d'œil. Toutes les illustrations et les pages consacrées à Nx Cloud passent donc en thème clair, par opposition au thème sombre de tout l'écosystème open source de Nx.

Site web

Le site cristallisait les problèmes de la marque, avec trop de couleurs différentes et une hiérarchie de l'information confuse. Un gros travail a été mené pour uniformiser l'esthétique des sections, en prolongeant la nouvelle identité avec des cubes et une grille isométrique.

Ces cubes servent à illustrer simplement les concepts complexes que vend Nx. Ce sont des blocs de code qui interagissent entre eux selon le concept à expliquer, du graphe de projets au cache, jusqu'à la répartition des tâches en CI. Une attention toute particulière a été portée à ces illustrations, afin que chaque concept se comprenne le plus facilement possible. J'ai ensuite monté le site moi-même dans Framer.

Résultat

Le site est désormais cohérent, clair et beaucoup plus simple à parcourir. Les concepts de Nx ne font plus peur, et la page s'adresse maintenant à un public bien plus large.