Pourquoi se lancer dans un projet de refonte ?

Une refonte de site internet permet de faire évoluer considérablement une interface web.

Il existe deux grands types de refontes :

• Les refontes graphiques : modification du design des pages, mise à jour des écrans pour s’adapter à une nouvelle charte graphique, évolution du Design system, modifications de l’arborescence, ajout de fonctionnalités simples.
• Les refontes graphiques et structurelles : ajout de nouvelles fonctionnalités, modifications profondes des parcours, changement de CMS (système de gestion de contenu).

Lancer un projet de refonte complète (graphique et structurelle) est souvent l’option privilégiée dans les cas suivants :

• Lorsque les performances de son site sont bien trop inférieures aux objectifs fixés (avec par exemple un taux de conversion trop bas).
• Lorsque les parcours proposés sont trop éloignés des standards digitaux actuels et de la concurrence (image à l’ancienne, fonctionnalités manquantes, parcours compliqué).
• Ou encore lorsqu’un changement de socle technique est nécessaire du fait de dysfonctionnements plus structurels (administration compliquée voire impossible du site, problèmes techniques récurrents qui sont à l’origine d’une perte de chiffre d’affaires).

On ne se lance donc pas dans un projet de refonte tous les ans, et il est important de mettre tout en œuvre pour en faire une réussite !

Notre méthodologie de conception pour réussir votre refonte

Pour faire de chaque projet de refonte un succès, nous suivons une méthodologie de conception bien rodée que nous vous proposons de découvrir ci-dessous.

Avant toute chose, cette méthodologie repose sur 4 fondamentaux :

• Utiliser la data disponible pour comprendre les points de douleurs à corriger et fonder nos propositions de solution sur du concret.
• Associer étroitement les utilisateurs à la conception en les faisant participer à chaque étape (analyse de retours, mise en place de tests etc…).
• Travailler avec les différentes équipes, en atelier, et trouver le point d’équilibre entre les besoins utilisateurs et les contraintes métiers et techniques.
• Se fixer des objectifs mesurables, et tout faire pour les atteindre.

Notre méthodologie de conception, lors d’un projet de refonte, est découpée en trois grandes phases, que nous allons décrire ci-après.

• Etape 1 : la recherche et l’immersion.
• Etape 2 : l’idéation et la définition du MVP.
• Etape 3 : la production UX/UI en cycles agiles (avec l’intégration et le développement technique parallélisés).

Etape 1 : la recherche et l’immersion

Attention ! Se lancer directement dans la production d’écrans pour gagner du temps, et sans avoir pris le temps de comprendre l’existant ainsi que les attentes des utilisateurs est plus que contre productif !

C’est pour cette raison que nous prenons le temps, en début de projet, d’observer, d’écouter et d’analyser. Avant d’imaginer les bonnes solutions.

Objectifs

Nous commençons par échanger sur la marque, l’offre, ainsi que les différentes cibles. Nous définissons les objectifs du projet, et des éléments à concevoir (indicateurs clés de succès / KPIs). Une étape importante qui permet d’embarquer toutes les équipes dans la même direction.

Benchmark

Nous nous nourrissons des meilleures pratiques du secteur en partageant les meilleures expériences identifiées (en France comme à l’international).

Nous revenons également sur les enseignements acquis lors de projets similaires (même secteur ou mêmes objectifs), dans le cadre d’un partage d’expérience.

Enfin, nous ouvrons également notre travail de benchmark à des secteurs plus éloignés, qui peuvent nous inspirer et nous donner une direction vers laquelle tendre.

Profils types & entretiens utilisateurs

Bien concevoir, c’est avant tout bien connaître ses utilisateurs.

Si vous ne disposez pas encore de profils types (ou persona), ou que ces derniers ne sont plus d’actualité et que vous souhaitez profiter du projet de refonte pour les faire évoluer, nous proposons toujours d’en construire ensemble.

L’objectif de cet exercice est d’identifier les différents types d’utilisateurs à adresser, regroupés en grandes familles de profils type. Ceci nous permet de préciser leurs caractéristiques clés, leurs attentes et leurs besoins. En prenant en compte l’ensemble du parcours.

La définition des profils utilisateurs peut s’appuyer sur des entretiens individuels que nous organisons avec de vrais utilisateurs. Ces personnes peuvent être recrutées dans votre base de clients, ou bien dans un panel externe.

Audit Analytics et UX

Si vous vous lancez dans un projet de refonte, c’est que vous disposez déjà d’un site internet. Avant d’imaginer le prochain site, il est indispensable d’analyser le site existant, afin de comprendre ce qui fonctionne et ce qui doit être amélioré ou ajouté.

Les questions à se poser :

• Quelles fonctionnalités sont aujourd’hui les plus utilisées ?
• A quelle étape perdez-vous des utilisateurs ?
• Quels sont les points de douleur dans les différentes pages ?

Pour répondre à ces questions, nous effectuons un audit Analytics et UX du site internet à refondre.

• Audit analytics : l’objectif est de comprendre, grâce aux données analytics, les performances du site ainsi que les points à améliorer. Pour cela, nous utilisons les outils Analytics déjà installés (Google Analytics, Matomo, Piano Analytics, Adobe Analytics, Piwik Pro…) mais aussi les outils d’analyse comportementale si vous en avez (Contentsquare ou Hotjar).
• Audit UX : nous analysons d’un point de vue UX les points de douleur de vos parcours. Notre analyse se fait à l’aide d’une grille d’évaluation organisée en plusieurs grands critères (uniformisation, normalisation, accompagnement, minimalisme, interaction).

Ecoute utilisateur

Enfin, dernière brique mais brique essentielle de cette première phase, l’écoute utilisateurs. En effet, quoi de mieux que d’interroger de vrais utilisateurs pour comprendre leurs attentes ?

Pour cela, nous commençons par nous immerger dans les différentes études utilisateurs que vous pouvez avoir. Puis nous recueillons des retours de vos utilisateurs grâce à un module de satisfaction que nous intégrons à votre site, dès le démarrage du projet. Ce module est simple à mettre en place (un simple ajout dans le code de vos pages) et invite les utilisateurs à donner leur avis. A la clé, une mine d’informations qui seront fort utiles lors de la conception !

Etape 2 : l’idéation et la définition du MVP

Après avoir compris les besoins et les attentes des utilisateurs, nous devons trouver l’idée et poser la feuille de route des actions à réaliser pour y arriver, en les priorisant. Nous posons alors dans cette phase les grands principes de conception et commençons à prototyper, afin de les faire tester par vos utilisateurs le plus tôt possible, et construire / adapter à partir de leurs retours.

User journeys, ou parcours utilisateurs

Il s’agit de définir, en fonction des différents profils types identifiés, les principaux user journeys, ou parcours utilisateurs.

Cet exercice permet de visualiser l’expérience utilisateur dans son ensemble, et d’en déduire les grands parcours ainsi que les fonctionnalités et les contenus attendus.

Organisation de l’information et des contenus

L’organisation de l’information est clé dans la construction d’un site internet et de sa navigation principale.

Elle se réfléchit à partir des user journeys définis, ce qui permet de préciser l’arborescence du site, ainsi que la place des principales fonctionnalités et des messages attendus.

Priorisation & MVP

A ce stade, nous confirmons ce qui est attendu par les utilisateurs et nous accordons avec l’équipe technique sur la faisabilité des idées identifiées, afin de prioriser les points à prendre en compte, et lotir la production en fonction.

Dans le lotissement, nous privilégions la logique de MVP (minimum viable product), qui est la version première d’un site que l’on est prêt à mettre en ligne et qui doit donc répondre aux attentes principales des utilisateurs avec un minimum d’effort (pour garantir une mise en ligne rapide).

Pour y arriver, nous effectuons un travail de priorisation selon l’importance, l’effort, mais aussi la “valeur utilisateur”. Notre méthode de priorisation se fait en notant chaque élément de 1 à 10 en prenant en compte 3 grands critères, mais aussi des sous-critères. La priorisation se fait ensuite en fonction du nombre total de points obtenus.

Les critères de priorisation sont les suivants :

• L’importance : ce critère s’évalue en fonction de la visibilité (potentielle) de l’élément en matière de trafic et d’audience touchée.
• L’effort : ce critère s’évalue selon la faisabilité technique de mise en place, en accord avec les équipes de développement.
• La “valeur utilisateur” : ce critère se calcule en fonction de 2 sous-critères (l’attente utilisateur : la fonctionnalité revient-elle dans les retours utilisateurs analysés ? Mais aussi l’offre marché : la fonctionnalité est-elle proposée par les concurrents ?).

Premier prototype et test utilisateur

Très tôt, nous commençons à prototyper les parcours clés.

Le premier prototype peut venir avant la priorisation, pour aider les équipes à se projeter sur le parcours idéal et confirmer la direction à prendre. Ou bien juste après, en travaillant sur le parcours ou les écrans qui auront été priorisés.

Un prototype est une première intention maquettée d’un parcours clé (enchaînement de quelques écrans clés) qui permet de valider les grands principes de conception.

Le prototype est testé auprès de vrais utilisateurs, lors d’entretiens individuels. Ce qui nous permet de récolter leurs retours et d’ajuster les éléments produits selon les retours récoltés. Avant de passer à la suite !

Etape 3 : la production UX/UI (et technique)

La phase de production UX/UI pure consiste à concevoir l’ensemble des écrans du projet en cycle agile, selon les lots définis. Elle est souvent parallélisée avec la phase d’intégration et de développement technique, de manière agile.

Design UX

Nous produisons les wireframes des écrans listés dans le lot à concevoir, afin de valider l’agencement des modules, l’architecture de l’information et les fonctionnalités essentielles qui composent les écrans.

Organisation de l’information & contenus

En parallèle du design UX, les contenus des pages clés doivent être retravaillés selon la nouvelle architecture définie, afin de s’assurer de leur bonne intégration au sein des parcours et des écrans imaginés.

En fil rouge, les contenus des pages secondaires doivent être préparés, afin de disposer de l’ensemble des contenus nécessaires lors de la phase de publication des contenus, avant le lancement du nouveau site.

Design UI : charte graphique, accessibilité et Design System

Tout l’univers de votre marque est intégré dans les maquettes conçues (couleur, typographie, visuels et tout autre élément qui sera défini dans votre charte graphique).

Afin de garantir une parfaite cohérence de Design entre l’ensemble des éléments à produire, nous mettons en place un Design System dont l’objectif est de designer mieux et plus vite en industrialisant la conception de l’ensemble de l’écosystème digital. Le design system permet donc de :

• Garantir la cohérence et l’efficacité de l’expérience pour les utilisateurs.
• Fluidifier et accélérer le travail des équipes Design.
• Fixer des guidelines claires et gagner du temps en conception.

Enfin, les contraintes liées à l’accessibilité numérique sont bien entendu intégrées dans le cadre de la conception UX/UI des éléments, et nous serons particulièrement vigilants à l’optimisation de la lisibilité des typographies (à l’aide des outils de contrôle tel que Contrast Ratio) via la couleur et leur taille/ graisse, ainsi qu’à l’usage des bonnes couleurs et de bons niveaux de contrastes.

Tests utilisateurs

Au fil de la conception, nous aimons tester les écrans conçus auprès de vrais utilisateurs. De nouveaux entretiens individuels peuvent alors être organisés.

Pendant les tests, les utilisateurs sont invités à effectuer le parcours qui fait l’objet du test. Ils répondent à quelques questions, et font part de leurs retours (points positifs, points de blocage, interrogations…).

Les enseignements récoltés nous permettent d’ajuster les éléments produits et de corriger les éventuels points de blocage remontés.

Description fonctionnelle

Dernière étape avant de passer le relais aux équipes techniques pour l’intégration et le développement technique : nous décrivons de manière fonctionnelle les écrans conçus.

En effet, un wireframe ou une maquette apporte peu d’informations sur le design d’interaction et reste donc trop superficiel(lle) pour être le garant de toutes les règles de fonctionnement de l’interface.

Des spécifications fonctionnelles sont donc écrites pour définir les règles interactionnelles engagées dans chaque écran et répondre à différentes questions :

• Que se passe-t-il si l’utilisateur clique ici ?
• Comment l’affichage de la page est-il modifié si l’utilisateur active ces filtres ?
• Quelles informations sont appelées dans ce module ?
• Combien de produits peuvent être ajoutés au panier ?
• Etc…

Recette graphique

Afin de bien nous assurer de la conformité des éléments intégrés par l’équipe de développement avec ce qui a été imaginé en conception, nos experts UX/UI effectuent systématiquement une recette graphique des éléments produits. Ceci nous permet de garantir le bon respect de la charte graphique et l’application des bonnes pratiques posées en wireframes et maquettes.

Après la mise en production, un premier bilan !

Dès le lancement, il est recommandé d’effectuer un premier bilan, que nous effectuons en général en 3 parties :

• Bilan analytics : nous analysons les principaux KPIs pour comprendre les points d’amélioration par rapport à l’ancien site, et identifier les points à améliorer.
• Écoute utilisateurs : nous continuons à recueillir des retours utilisateurs via les modules de satisfaction, que nous analysons pour nous assurer de la satisfaction des utilisateurs, identifier les problèmes rencontrés et avoir d’éventuelles nouvelles idées d’évolutions auxquelles nous n’aurions pas pensé pendant la conception du nouveau site.
• Roadmap d’évolutions et de tests : tous les enseignements récoltés à travers le bilan analytics et l’analyse des retours utilisateurs viennent enrichir la roadmap d’évolution du site.

Effectuer une refonte de son site internet n’est pas une fin en soi.
Une fois le nouveau site lancé, il est indispensable de rester attentif à l’évolution de ces performances (taux de conversion, taux de passage entre les différentes étapes du parcours…) ainsi qu’à la satisfaction utilisateurs. Et de lancer les bonnes évolutions ou AB tests pour dépasser les objectifs fixés !

Pourquoi se faire accompagner par UNAMI ?

L’agence UNAMI est le partenaire parfait pour votre projet de refonte.

• Une conception orientée conversion : notre méthodologie combine Design et Data pour vous permettre d’améliorer l’expérience utilisateur de vos parcours, augmenter votre conversion et atteindre vos objectifs.
• Des expertises combinées en Design UX/UI, Data analyse et Gestion de projet au service de votre projet pour vous conseiller et produire.
• Une équipe senior et pluridisciplinaire, pour faire de votre refonte de site un succès.
• Entre +20% et +50% d’amélioration : nous sommes orientés et engagés résultat et constatons des améliorations de 20 à 50% par an sur les indicateurs clés de nos clients.
• Un accompagnement complet qui peut s’inscrire dans la durée : nous vous accompagnons non seulement dans la refonte de votre site, mais également sur le long terme dans l’optimisation continue des performances, afin d’atteindre et de dépasser vos objectifs business.

Vous avez un projet de refonte ?

Contactez-nous pour discuter de votre projet de refonte et vous faire conseiller :

• Cadrage / audit de « pré-refonte »
• Accompagnement Design et Data
• Gestion de projet

En savoir plus sur l’agence UNAMI et ses différentes expertises.