La plupart des discussions sur une refonte commencent par le mauvais bout. Quelqu'un ouvre un outil de design, un autre affirme que le produit a vieilli, et un budget est dépensé pour traiter un symptôme. La planification du design consiste à définir ce que le produit doit incarner, et il s'agit d'une décision commerciale bien avant d'être une décision visuelle.
Voici ce qu'il faut retenir. Deux interfaces peuvent présenter exactement les mêmes informations et fonctionner de la même manière, tout en positionnant un produit aux antipodes l'un de l'autre sur un marché. La question derrière une refonte n'est donc pas « qu'est-ce qui ne fonctionne pas ? », mais « quelle est la distance entre notre position actuelle et celle que nous visons ? ». Cette distance constitue l'écart, et notre travail consiste à l'identifier.
Ce qui suit s'adresse à la personne qui valide le projet. Nous examinerons comment le style définit le positionnement, comment identifier cet écart, comment tester une orientation avant tout développement, et ce que ce changement implique réellement en termes de temps et de risques.
La planification du design est la décision, prise avant même de dessiner le moindre écran, concernant le positionnement que le style d'un produit doit refléter — et si ce positionnement correspond à celui que l'entreprise souhaite réellement occuper. Les deux disciplines qui la sous-tendent sont bien connues. L'expérience utilisateur (UX) et l'interface utilisateur (UI) sont deux des concepts de conception de produits les plus utilisés : les designers UX se concentrent sur l'expérience et définissent l'ambiance, le ton et le style de communication, tandis que les designers UI concrétisent cette expérience dans une interface utilisateur. Ces deux disciplines existent depuis un certain temps déjà et, grâce à leurs efforts combinés, les produits numériques prennent vie.
La planification est ce qui surplombe ces deux disciplines. Pour chaque projet, il existe plusieurs approches valables plutôt qu'une seule méthode correcte, et privilégier une interface simple et pratique est l'une des options les plus sûres. Une interface fonctionnelle, une expérience épurée et des utilisateurs qui atteignent rapidement leur objectif.
Prenons le site web de Tinker comme exemple de design épuré et fonctionnel.
La page de recherche de produits se compose d'un outil simple et intuitif qui permet à l'utilisateur de trouver le produit souhaité en croisant différents paramètres. Au survol, elle affiche à la fois le prix et l'option d'ajouter l'article au panier. Cliquer sur un produit ouvre une page dédiée contenant une description détaillée. L'ensemble repose sur un fond blanc qui renforce l'expérience épurée du site.
Une telle sobriété est synonyme de rapidité et de fiabilité. C'est exactement ce qu'il faut pour un produit dont la promesse est un achat rapide — et c'est uniquement pertinent tant que cela correspond au positionnement que l'entreprise souhaite adopter.
Il existe de multiples façons de transformer un ensemble d'informations et de besoins en une expérience utilisateur positive, et c'est dans le choix de l'approche que se joue le positionnement. Comparons-en deux, toutes deux simples à utiliser et organisant efficacement les mêmes informations.
L'interface de combat de Final Fantasy VII présente tout ce dont le joueur a besoin. Grâce à l'utilisation de menus, de textes, de chiffres et de barres, toutes les informations importantes sont accessibles de manière simple et pratique. Elle est lisible au premier coup d'œil et s'est avérée durable : chaque opus principal jusqu'à Final Fantasy XV en 2016 a utilisé une variante de cette même structure de menu.
Au premier abord, Persona 5 semble offrir une expérience totalement différente. Il n'en est rien. Son interface repose sur les mêmes informations, simplement stylisées différemment. La différence entre les deux réside dans la manière de choisir une option — par des actions à bouton unique plutôt que par une sélection dans un menu — mais au-delà de cela, tout fonctionne de la même façon.
Alors, laquelle corrige l'autre ? Aucune. Le menu de Final Fantasy VII n'a aucun défaut, et la typographie inclinée ainsi que les animations de Persona 5 ne viennent pas résoudre un problème d'utilisabilité. Les deux vendent des produits différents à des publics différents en utilisant les mêmes informations sous-jacentes. Si vous souhaitez une analyse plus approfondie de l'UX et de l'UI de Persona 5, consultez cette analyse de Ridwan Khan.
Le style transforme l'expérience utilisateur. Il entraîne également des conséquences qui dépassent largement le cadre de l'écran, car le design UX et UI définit l'image projetée du style de communication d'un produit et son positionnement sur le marché. Un détail à l'échelle d'un composant. Rarement un détail à l'échelle de la marque.
Bloomberg est un bon exemple d'audace en matière de design, un sujet que nous avons déjà exploré dans un autre contexte dans un article précédent. L'exemple ci-dessus montre le site web avant la refonte de 2018 et, avec le recul, rien ne semble clocher. Parfois, l'objectif n'est pas d'être plus esthétique qu'avant. Il est d'être différent.
Comme John Micklethwait, rédacteur en chef de Bloomberg, l'expliquait à l'époque, cette refonte accompagnait le lancement d'une offre d'abonnement numérique et visait à rendre l'expérience du lecteur plus épurée et plus ciblée. En comparant les deux versions aujourd'hui, la différence majeure réside dans le style. Ils sont revenus au noir et blanc et ont réorganisé quelques éléments, alors que l'interface en elle-même reste très similaire.
Rien de tout cela n'est cosmétique. Un lecteur peut accomplir les mêmes actions sur les deux versions ; la différence réside donc entièrement dans ce que l'entreprise projette : une image sobre et autoritaire dans un cas, plus chargée et plus conventionnelle dans l'autre. Pour une entreprise d'abonnement vendant des informations partiellement disponibles ailleurs, l'autorité que dégage le produit fait partie intégrante de ce qui est vendu.
Nous observons le même mécanisme dans nos projets clients. Lorsque Moloco avait besoin que son site soit perçu comme une plateforme de classe mondiale plutôt que comme une simple solution fonctionnelle, la solution a été un audit de croissance et une refonte visuelle visant précisément cette perception : les informations n'ont pratiquement pas bougé, mais l'autorité projetée, elle, a changé.
Le mot qui manque à la plupart des discussions sur le restylage d'un produit est la planification. Un changement de style modifie ce que vos clients reconnaissent ; traitez-le donc comme une expertise technique plutôt que comme un simple coup de peinture. Vous devez savoir quels éléments sont porteurs avant que quiconque ne prenne un pinceau, et vous devez le savoir par écrit.
Chez Imaginary Cloud , nous procédons par une analyse d'écart de positionnement : quatre étapes, chacune aboutissant à un livrable écrit, pour finir sur un plan de déploiement plutôt que sur une simple série d'écrans. C'est la même rigueur que celle appliquée à notre Processus de conception de produit: lorsque nous avons reconstruit l'interface d'Environmental Intellect pour projeter une image plus technologique et crédible, le travail a suivi quatre étapes définies plutôt que de passer directement aux visuels. L'ordre importe moins qu'un détail crucial : l'étape de collecte de preuves précède celle de la conception, et c'est l'étape que la plupart des refontes omettent.
Avant de dessiner quoi que ce soit, notez la position que vous occupez, celle que vous visez, et les preuves de la distance qui les sépare. Les objections commerciales, les tickets de support, les entretiens de désabonnement, le langage utilisé par vos concurrents dans leur propre marketing : tout cela coûte moins cher qu'une refonte. Le livrable est une phrase unique nommant l'écart. Si vous ne pouvez pas rédiger cette phrase, le projet n'a pas encore de brief.
Observez les performances du design actuel pour ses utilisateurs, et pas seulement son apparence. Les enregistrements de sessions, les taux de complétion des tâches et quelques entretiens modérés (la substance d'un audit UX) vous indiqueront lequel des deux problèmes vous rencontrez. Ils nécessitent des interventions différentes, et les confondre est l'erreur la plus coûteuse de tout ce processus. Un restylage ne réparera pas un parcours utilisateur défaillant. Une correction d'utilisabilité ne changera pas la perception de votre marque. Lorsque le problème est réellement lié à l'utilisabilité, le retour sur investissement est direct : une refonte basée sur un audit pour Learninghubz a permis d'augmenter les utilisateurs actifs de 20 % et l'usage mobile de plus de 50 % dans les trois mois suivant le lancement.
Le livrable est une courte conclusion précisant quel problème le budget permet de résoudre.
Les décisions de style peuvent être testées avant d'être développées, et à moindre coût. Présentez deux orientations à un échantillon de votre public cible et demandez-leur à quel type d'entreprise chacune correspond, quel en serait le coût et à qui elle s'adresse. Trois méthodes couvrent l'essentiel :
Le résultat est une orientation choisie, accompagnée des justifications enregistrées. C'est ce document qui empêche de remettre en question la décision à chaque fois qu'un nouvel intervenant passe devant un écran.
Le risque lors d'une refonte est de voir la reconnaissance et le taux de conversion chuter pendant que les utilisateurs se réapproprient un produit familier. Quatre mesures permettent de le limiter :
Un déploiement progressif demande du temps, mais selon notre expérience, il s'agit de semaines plutôt que de mois. Ce que vous y gagnez, c'est la possibilité de faire marche arrière. Un basculement unique vous prive de cette option. Évaluée par rapport à une base de référence solide, une refonte axée sur le positionnement est rentable : notre propre refonte de site web, basée sur un audit de croissance et le même processus de conception produit, a augmenté les conversions de 5 % en trois mois, avec une progression continue par la suite.
Le budget dépend du périmètre, et la fourchette est naturellement large. Une refonte ciblée de l'identité visuelle d'un produit se compte en semaines. Une refonte complète touchant le système de design (la bibliothèque partagée de composants, de couleurs et de règles typographiques qui structurent le produit), ainsi que le site marketing et le produit lui-même, s'étend sur plusieurs mois et mobilise les équipes techniques. Exprimez clairement le délai de rentabilité dès le départ, car un changement de design porte ses fruits par la perception, et la perception évolue sur des trimestres, pas sur des sprints.
Existe-t-il un moment idéal pour une refonte ? Non, pas dans l'absolu. Le design graphique le démontre plus clairement que le design produit. Twinings of London a conservé pratiquement le même logotype depuis plus de deux siècles, l'un des plus anciens encore en usage, tandis que le club de football de la Juventus a remplacé un blason utilisé pendant des décennies par un « J » abstrait, dévoilé en janvier 2017 et conçu par Interbrand (puis encore simplifié en 2020). Certains produits ne changent jamais, d'autres évoluent presque chaque année, et les deux approches peuvent être pertinentes.
C'est ce qui rend chaque exemple de cet article intéressant : aucun d'entre eux n'est une opération de réparation. Il n'y a pas de bon ou de mauvais style, seulement un style plus ou moins adapté aux objectifs commerciaux d'un produit. La décision relève de la réflexion stratégique, qui fait partie intégrante du design produit, bien plus que de l'interface ou de l'expérience utilisateur.
Google illustre ces deux types de décisions au sein d'une même entreprise. L'adoption de Material You par Chrome (le langage de design de Google introduit avec Android 12, où les couleurs et les formes s'adaptent aux préférences de l'utilisateur) a permis de conserver une expérience de navigation proche de la version précédente. Cela s'apparente à une déclaration d'appartenance à une famille de produits, et non à une correction. La vue intégrée de Gmail, annoncée par Google sur son blog Workspace Updates début 2022, a considérablement modifié l'interface et l'expérience. Deux démarches délibérées. Deux enjeux très différents.
Le test pratique consiste à déterminer laquelle de ces deux options vous proposez réellement :
| Affiner le design existant | Refonte d'image (Rebrand) | |
|---|---|---|
| Quand cela s'applique | Le positionnement est bon, l'exécution est datée | Le positionnement lui-même a changé : nouveau public, niveau de prix ou marché |
| Ce qui change | Langage visuel, composants, hiérarchie | Identité, traitement du nom, ton et tout ce qui en découle |
| Échelle typique | Semaines, porté par le design | Mois, design et ingénierie ensemble |
| Risque principal | Incohérence entre les surfaces lors du déploiement | Perte de reconnaissance auprès des clients existants |
| Preuves nécessaires | Résultats d'usabilité et audit de marque | Preuves de marché indiquant que le positionnement a changé |
Des options tout aussi valables peuvent représenter des positions contrastées au sein d'un secteur. Le meilleur moment pour changer est donc celui où l'image projetée par votre design ne correspond plus à la position que votre entreprise souhaite occuper. Le plus souvent, il ne faut pas grand-chose pour modifier cette impression. Il s'agit d'ajuster le style du produit en fonction des objectifs commerciaux, en s'appuyant sur des preuves concrètes de cet écart.
Lorsque l'image projetée par le design ne correspond plus au positionnement souhaité par l'entreprise, ou lorsque les études montrent que les utilisateurs échouent dans leurs tâches. Une refonte motivée par le simple goût esthétique gaspille du budget sans objectif mesurable ; définissez donc précisément l'écart que vous cherchez à combler avant de commencer.
Les deux, et il est difficile de les dissocier. Le style façonne les attentes de l'utilisateur avant même qu'il n'interagisse avec le produit, et ces attentes modifient son ressenti face à l'interface. Final Fantasy VII et Persona 5 en sont l'exemple extrême : des informations quasi identiques, mais deux expériences totalement différentes.
L'amélioration est pertinente lorsque le positionnement est juste mais que l'exécution est datée. Le rebranding est nécessaire lorsque le positionnement lui-même a évolué, suite à l'arrivée d'une nouvelle audience, d'un nouveau positionnement tarifaire ou d'un nouveau marché. Cette seconde option est plus coûteuse et risquée ; elle doit donc s'appuyer sur des preuves de marché plutôt que sur une simple préférence.
Une perte de reconnaissance, une baisse temporaire du taux de conversion le temps que les utilisateurs s'approprient le produit, et des coûts d'ingénierie imprévus. Ces trois risques peuvent être maîtrisés grâce à un déploiement progressif, une mesure de référence et une procédure de retour en arrière convenue.
Une refonte ciblée de l'identité visuelle se compte en semaines. Une refonte complète incluant le système de design, le site marketing et le produit se compte en mois et nécessite une capacité d'ingénierie en parallèle du design. Le retour sur investissement se manifeste au niveau de la perception, qui évolue sur plusieurs trimestres.
Le coût dépend du périmètre et du nombre de surfaces concernées, et non du nombre d'écrans. Le rafraîchissement visuel d'un produit est l'option la moins coûteuse. Tout changement impactant le système de design, et par extension tout ce qui en découle, entraîne des coûts d'implémentation technique qui dépassent généralement les honoraires de design.
Oui, et sans doute davantage. Une interface réfléchie témoigne de la crédibilité de l'entreprise. Dans un processus d'achat où le client ne peut pas inspecter l'ingénierie, le design est l'un des rares signaux dont il dispose.
Le style n'est pas une simple décoration ajoutée à un produit. C'est le produit lui-même qui communique sa nature aux utilisateurs, avant même qu'ils n'aient lu un seul mot de votre contenu. Si ce message est mal formulé, aucun travail de finition ne pourra le sauver.
Chez Imaginary Cloud, nous concevons des produits numériques en fonction de la place qu'ils doivent occuper, et non uniquement en fonction des écrans qu'ils nécessitent. Si vous envisagez une refonte graphique et que vous hésitez entre un problème de positionnement ou d'utilisabilité, discutez avec notre équipe et nous analyserons ce que votre design actuel dit de vous.
Gestionnaire de contenu, éditeur de texte et présentateur d'idées stratégiques, tout en étant un fervent amateur des arts cinématographiques et de la narration visuelle.
People who read this post, also found these interesting:
