Les forces motrices du design - Une étude de cas de refonte de site Web

Quel est le moment le plus approprié pour faire une refonte de site Web ?

Qui n'a pas rencontré un site Web qui semble obsolète et abandonné ? Comme la carapace d'un camion en panne abandonné dans le désert, visiblement intact depuis de nombreuses années.

Les sites Web sont remaniés pour toutes sortes de raisons. Malheureusement, de nombreuses entreprises ne réalisent pas que leur site Web a besoin d'une refonte et se laissent distancer lorsque leurs concurrents gagnent un avantage concurrentiel en améliorant le leur, ce qui augmente leurs conversions.

Une erreur fréquente des entreprises est de ne pas envisager très tôt ce qui pourrait se passer si les besoins de leur site Web devenaient plus complexes et, par conséquent, de se retrouver dans une situation difficile et potentiellement coûteuse lorsqu'elles devaient l'étendre. De plus, des facteurs importants tels que l'optimisation des moteurs de recherche (SEO), SSL (qui affecte le classement et la sécurité) et la convivialité mobile (qui affecte le classement et la conversion) peuvent souvent finir par être négligés.

Les nouvelles conceptions de sites Web se produisent souvent en raison d'un changement de direction au sommet, où une nouvelle direction de marque est instituée et de nouvelles personnes chargées du marketing de la marque se joignent à nous. En évaluant le site Web de l'entreprise, ils sont horrifiés d'apprendre qu'il a une UX épouvantable et constatent qu'il manque une quantité considérable de contenu souhaitable. En conclusion, il s'agit simplement d'un « site Web de brochures » mal conçu qui ne fournit pas la « voix de la marque » ou les conversions que l'entreprise recherche, le consensus est qu'il est mûr pour le changement. Il est temps pour une refonte du site Web.

Refonte du site Web d'une entreprise automobile

Il est important de mentionner que cette étude de cas sur la refonte du site Web automobile n'est pas une refonte officielle commandée. Je n'ai aucune information privilégiée sur l'entreprise, sa stratégie numérique ou l'industrie automobile dans son ensemble. J'utilise simplement l'industrie automobile comme cas de test pour une étude de cas de refonte de site Web.

Dans cette étude de cas, nous parcourons le processus de refonte du site Web de la marque automobile croate Rimac Automobili. Rimac est une marque qui a commencé avec un simple concept de voiture et s'est depuis développée en une grande entreprise de fabrication de composants. Comme de nombreuses startups, l'entreprise a commencé avec une idée qui a finalement évolué vers quelque chose de différent ; cette expansion a affecté la structure du site Web et l'ensemble de l'orientation utilisateur a changé. La demande du marché a amené l'entreprise dans une autre direction, de sorte que l'orientation du site Web devait également changer.

Il existe de nombreux aspects et angles différents à prendre en compte afin d'obtenir une excellente solution de conception de site Web. Malgré le fait que le concepteur Web précédent n'avait peut-être pas les ressources ou suffisamment de temps pour la recherche UX, le wireframing, le prototypage et les tests utilisateur, en ce qui concerne la qualité globale d'une conception, même les plus petites décisions de conception précoces peuvent avoir des conséquences importantes. des répercussions négatives et une qualité de site Web moins qu'optimale conduiront finalement à une refonte du site Web dans deux ou trois ans. Le résultat est qu'à long terme, les clients paient plus pour un site Web qu'ils ne le pensent. Une stratégie de contenu et une architecture de l'information bien définies sont essentielles lorsqu'il s'agit de la conception d'un nouveau site Web.

Lors de la conception de grands sites Web d'entreprise, de portails d'actualités et d'autres sites à fort contenu, je suis un grand fan de la conception atomique, un système de conception flexible qui consiste à créer tous les composants de l'interface utilisateur qui fonctionneront pour plusieurs écrans et des situations imprévues au début d'un projet. Même si cette étude de cas particulière n'est pas destinée à un grand portail d'actualités, cela facilitera néanmoins beaucoup le processus si une bibliothèque de conception d'éléments de conception atomiques (un ensemble de composants de conception soigneusement étudiés et bien définis) est configurée pour fonctionner avec plus tard.

Ce n'est qu'une fois que le site Web a mis en place la stratégie de contenu et l'architecture d'information appropriées que l'accent doit être mis sur l'expérience utilisateur. Sans une structure de site Web appropriée, la conception de l'expérience utilisateur n'a aucune puissance. Peut-être qu'à première vue, le site Web est beau et fonctionne bien, mais si une flexibilité suffisante n'est pas intégrée, il est inévitable qu'à un moment donné, l'entreprise doive envisager une refonte du site Web.

Pourquoi reconcevoir le site Web de cette entreprise automobile ?

Rimac Automobili est en pleine expansion et, selon les publications officielles, un nouveau concept-car appelé "Concept_One" est déjà en production. Au moment de cette refonte non commandée du site Web, leur site Web ne présentait qu'une seule voiture, la "C_Two". Il n'y avait aucune variété visuelle - le site Web a été créé à partir de deux modèles, de sorte que chaque page se ressemblait beaucoup. La conception s'est concentrée sur de grandes images attrayantes de la voiture sans grand-chose d'autre pour illustrer la qualité de la voiture C_Two - des informations essentielles nécessaires pour orienter les visiteurs du site Web vers une décision d'achat de la voiture.

Comme le dit le dicton, "Vous n'avez jamais une seconde chance de faire une première impression." Il est essentiel d'utiliser l'impact d'un excellent design pour persuader efficacement les visiteurs (qui, dans ce cas, seraient principalement des passionnés de voitures hautes performances) d'acheter une voiture coûtant près d'un million (USD). Ces sites Web haut de gamme doivent répondre à des normes incroyablement élevées. Ils doivent projeter un sens de la qualité et du charisme, et offrir un haut niveau de vente ainsi qu'un style convaincant.

Une excellente conception de site Web doit se démarquer dans une mer de sites Web similaires

Un gros problème dans l'industrie automobile est que la plupart des sites Web de cet espace ont tendance à se ressembler. Mis à part les différents schémas de couleurs et images de héros, il semble presque qu'ils utilisent le même modèle de site Web.

Il existe de nombreux facteurs derrière les décisions de conception de sites Web d'une entreprise automobile, mais une distinction claire doit être faite entre une voiture à 1 million de dollars et une voiture à 25 000 dollars et dans la manière dont elles sont présentées.

Dans l'espace automobile haut de gamme, Ferrari, Lamborghini et Aston Martin ont des sites Web d'entreprise trop simples et généralement d'entreprise qui (à mon avis) n'offrent pas vraiment une excellente expérience utilisateur.

La gamme grand public moyenne (Volkswagen, Toyota, Peugeot, etc.) a une structure de contenu de site Web très similaire aux exemples plus haut de gamme mentionnés ci-dessus. La plus grande différence entre les marques de voitures grand public haut de gamme et milieu de gamme est le prix. On pourrait donc s'attendre à ce que Rimac avec ses voitures haut de gamme ait un site Web exceptionnel afin de refléter cette différence et de présenter sa marque chère.

Les attentes des clients sont élevées lorsqu'ils visitent ces sites Web de marques de voitures ultra-chers; c'est un gros engagement financier et tout naturellement, ils veulent être sûrs d'obtenir la meilleure voiture que leur argent peut acheter.

Pourquoi un Rimac est-il meilleur qu'un Toyota ? En regardant leurs sites Web, il n'y a pas beaucoup de différenciation entre ces deux marques très différentes. Cela ne devrait-il pas être évident à partir de la qualité de leur site Web ?

Cibler les acheteurs de voitures haut de gamme avec une excellente conception de site Web

Tout site Web doit tenir compte de ses utilisateurs. Quel est le public cible de ce type de voiture ? Que cherchent-ils?

Les voitures de Rimac coûtent environ 850 000 $, et seules quelques-unes seront fabriquées, les qualifiant pour une étiquette "édition limitée". Bien que nous ne puissions pas identifier avec précision le type de client qui serait intéressé par l'achat de ces voitures, nous pouvons supposer que la plupart des clients seront issus de l'élite aisée. Le site Web de Rimac cible-t-il efficacement ces clients ?

Analyse de l'architecture de l'information

Sur notre exemple de site Web, nous pouvions voir que le premier élément de navigation était "Concept_One" (à l'époque, c'était le seul produit de l'entreprise). Le vrai site web a depuis été mis à jour. Le deuxième élément de navigation est l'évolution de l'entreprise, la façon dont la voiture a été produite, tandis que le troisième élément concerne les produits et services de l'entreprise. Le quatrième élément de navigation est un autre produit de la société (vélos électriques Greyp). Les deux derniers éléments sont la « presse », contenant les communiqués de presse, et le « blog », qui ne sont ni l'un ni l'autre particulièrement utiles puisque la plupart de leurs actualités ont été publiées sur les réseaux sociaux.

Un autre problème était que le lien de carrière était caché en tant qu'élément de navigation secondaire et moins important et, compte tenu de l'énorme expansion de l'entreprise, représentait une question importante. Si nous considérons l'utilisateur comme le centre des préoccupations de l'entreprise, nous verrons que sur la plupart des sites Web d'entreprise (les exceptions typiques sont les sites Web d'entreprise/extrêmement volumineux), il est très important d'avoir un lien "carrières" bien visible ou CTA.

Le processus de refonte du site Web

Image du héros de la page d'accueil avant et après

À l'origine, l'intention était de créer une version plus sombre et plus puissante de la voiture. J'ai trouvé quelques images de la voiture Concept_One en ligne et avec un peu de "magie Photoshop", j'ai créé la première image de héros pour la page d'accueil. L'idée suivante était qu'une animation révèle lentement la voiture, d'abord l'arrière-plan, puis un contour de la voiture, suivi d'une image entièrement rendue.

La conception de la page d'accueil

Pour la page d'accueil, le concept était de définir deux zones visuelles principales : la navigation supérieure et l'image du héros de la voiture. C'est ça. Afin de le rendre minimaliste mais frappant, tout ce qui n'est pas nécessaire a été supprimé. En un coup d'œil, toutes les choses importantes sont visibles - tout le reste a été déplacé vers des sous-pages du site.

Stratégie et conception de contenu

Pour de tels projets de refonte de site Web, il est important de concevoir également le contenu, pas seulement la structure du site et l'esthétique visuelle. Puisqu'il s'agit d'une refonte de site Web non commandée, elle offre plus de liberté d'expérimentation, ainsi qu'une flexibilité esthétique où il est pleinement possible de prendre nos propres décisions de conception.

Le processus est simple :

1. Préparez le corps du texte qui apparaîtra sur le site Web.
2. Communiquez certains éléments de conception, par exemple des détails accrocheurs sur l'accélération, la puissance et la vitesse de pointe, par le biais d'icônes ou d'animations interactives.

Ce faisant, les mots auxiliaires ne sont pas nécessaires dans l'interface utilisateur et l'attention est attirée sur les domaines qui sont plus importants pour les visiteurs du site Web.

Refonte de la navigation du site Web

La structure de navigation du site Web est maintenant réorganisée en fonction d'une hiérarchie d'importance. Nous avons Véhicules comme première liste déroulante dans la navigation, ce qui donne une flexibilité de conception car cela permet à l'entreprise d'ajouter plus de modèles de voitures à l'avenir.

Pour fournir un accès immédiat à la page secondaire des produits à partir de la page d'accueil, il a été décidé que, pour des raisons d'efficacité, au lieu de créer une autre page de listes de produits (sur une autre page Web), les produits et leurs sous-catégories pourraient être intégrés à la page d'accueil en tant que zone déroulante et faire partie de la navigation. La conception ci-dessous montre divers produits affichés sous forme d'icônes sur la page d'accueil lorsque les visiteurs cliquent sur Produits dans la navigation. Pour les rendus de produits 3D signifiant les deuxièmes niveaux sous Products , je recommanderais Three.js, WebGL, Canvas et Greensock car ce sont des outils standardisés bien connus.

Pages secondaires dans la refonte du site Web

Contrairement à la page d' accueil , les pages secondaires telles que les pages À propos et Service utilisent une grille différente, plus structurée en Z. L'intention de la disposition différente de la grille est de fournir aux visiteurs un environnement plus intéressant et dynamique lors de la numérisation de ces pages.

L'idée centrale est toujours le minimalisme visuel avec le moins de texte possible. Les gens ne viennent pas sur ces types de sites Web automobiles pour lire beaucoup de texte, mais pour obtenir des informations rapidement et visuellement. C'était l'idée derrière les grandes polices en gras sur les titres de page et l'utilisation de différents styles de police.

Il est important de noter que ce type de refonte de site Web « brochure d'entreprise » est différente d'une refonte de service. Un site Web "brochure d'entreprise" concerne davantage la commercialisation de produits. Les refontes de sites Web axées sur les services sont davantage axées sur la conversion des clics en conversions et sur les bénéfices éventuels.

Conclusion

Il existe plusieurs autres articles de blog sur la conception qui recommandent pourquoi c'est une bonne idée pour les concepteurs de s'engager dans des projets de conception non commandés à côté. Si vous voulez concevoir un projet vraiment cool, choisissez une idée (il peut s'agir d'un site Web, d'une application, d'un produit SaaS d'entreprise) et résolvez un problème de conception.

Dribbble regorge de projets de refonte conceptuelle non sollicités où les concepteurs numériques ont l'occasion de montrer leurs côtelettes de conception. En plus de vous donner un design cool qui présente une solution créative au monde, travailler sur un problème de produit "réel" montrera aux entreprises et aux clients potentiels comment vous pensez, votre processus et votre expertise.

Dans mon cas, ce fut un excellent exercice de s'attaquer à un site Web automobile haut de gamme, car il est particulièrement important que la conception de sites Web dans ce secteur réponde à des normes exceptionnellement élevées.

Cependant, un mot d'avertissement : avant de plonger et de commencer à concevoir, c'est une bonne idée d'être tourné vers l'avenir et de considérer à quoi un site Web particulier devra ressembler dans trois ans, non seulement du point de vue de l'esthétique du design, mais aussi du contenu, fonction et structure. Il est crucial que la flexibilité intégrée soit une considération de conception sérieuse. Il est plus facile, plus efficace et beaucoup moins pénible d'apporter de petites modifications pour répondre aux demandes futures lorsque le site Web ou les sous-pages fonctionnent et sont évolutifs.

Parfois, il est vraiment difficile de convaincre un client potentiel de faire une refonte du site Web. Souvent, les clients hésitent à s'engager en raison d'un manque de ressources, de fonds ou de temps. Néanmoins, une refonte de site Web non sollicitée est un excellent moyen de présenter au monde le processus de refonte de votre site Web. Et qui sait? Il est tout à fait possible que la refonte de votre site Web impressionne suffisamment un client réticent pour qu'il donne son feu vert à un « vrai » projet, où, en prime, le concepteur est payé !

• • •

Pour en savoir plus sur le blog Toptal Design :

• Les fondamentaux de la refonte de site Web - Une étude de cas
• Le véritable retour sur investissement de l'expérience utilisateur : études de cas sur la refonte du B2B
• Sortir IKEA de sa boîte et le repenser pour 1,6 milliard d'utilisateurs
• Repensons Facebook : 10 inspirations pour vous aider à démarrer
• Comment CrunchBase devrait être conçu