Refonte du site pour optimiser l’expérience utilisateur
Société
C+ INTERNATIONAL
Lieu
Paris
Type de projet
Site business to business
État
Terminé
Date
Sept. – déc. 2024
Contexte
C+ BUSINESS AFRIQUE souhaite attirer plus de prospects via son site Internet, le rendre plus attractif et clarifier son offre en ligne.
Pour réaliser ce projet, nous avons travaillé main dans la main avec les équipes Business pour recueillir les besoins, Marketing pour les données analytiques et les cibles, ainsi que les équipes de développeurs et webmasters pour les contraintes techniques.
User behavior analytics
Analyse du comportement des utilisateurs
Nous avons commencé par réaliser un audit UX du site Internet existant. Nous avons analysé les interfaces, l’arborescence et les parcours utilisateurs, puis nous avons corroboré ces données avec des analyses sur le comportement des utilisateurs.
Sur Microsoft Clarity et Amplitude, nous avons récupéré les données sur les trois derniers mois, le mois, et sur les trois derniers jours, afin de pouvoir mettre en perspectives les tendances qui se dessinaient.
En termes de métriques, nous avons eu un aperçu du nombre d’utilisateurs uniques et avons pu quantifier la part des nouveaux utilisateurs par rapport aux utilisateurs renvoyés, identifier leur localisation, ainsi que les navigateurs et systèmes d’exploitation qu’ils utilisaient.
En termes de parcours, nous avons pris connaissance des référents (navigateur, site tiers, etc.) et des canaux (recherche organique, direct, etc.). Les mots clés utilisés dans les navigateurs pour accéder au site nous ont éclairé sur les besoins des prospects. Les « clics de rage » et pages les plus consultées nous ont permis d’identifier les points de frustration des utilisateurs ainsi que les parcours qu’ils réalisaient.
Nous avons constaté que 9/10 utilisateurs se rendaient sur le site depuis leur mobile, d’où la nécessité de construire un parcours et des interface mobile first.
Benchmark UX
Analyse concurrentielle
Nous avons élaboré un benchmark UX, avec un focus sur les sites Internet de marques concurrentes avec une cible proche de la notre.
Les pratiques de l’expérience utilisateur varient entre le B2B et le B2C, en fonction des genre, territoires, et groupes d’âge des utilisateurs. Les attentes diffèrent aussi selon le type de plateforme (site e-commerce, site vitrine, etc.) L’analyse concurrentielle nous a permis de vérifier que notre offre respectait les normes spécifiques à son secteur.
Étudier et tester les actions des concurrents nous a permis également de repérer ce qui fonctionnait efficacement en termes d’UX. Avec ce benchmark, nous avons relevé des fonctionnalités améliorant l’expérience utilisateur et que de nombreux concurrents avaient adopté.
User Journey
Arborescence du site
Nous avons reproduit l’arborescence du site existant sur FigJam afin d’évaluer son périmètre et avons relevé les points de frustration en termes de parcours. Ce travail combiné aux recherches effectuées en amont nous a permis de construire une arborescence avec un parcours plus fluide pour l’utilisateur.
User flow
Nous avons fait des user flows correspondants aux besoins de la cible. Nous avons cartographié les étapes que les utilisateurs suivront pour accomplir une tâche et visualisé clairement le parcours de l’utilisateur.
Ces parcours nous ont permis d’anticiper les besoins et les points de friction potentiels, ainsi que d’identifier les différentes interactions que les utilisateurs pourraient réaliser, nous offrant une base solide pour la conception des interfaces.
Identité visuelle
Design System
Nous avons utilisé le design system de l’entreprise pour garantir la cohérence visuelle des pages et l’identité de la marque. Nous avons créé une palette de couleur spécifique à la marque grâce aux variables sur Figma.
Nous employons une méthodologie dite Atomic Design pour assurer des interfaces évolutives.
- Les atomes sont les éléments UI les plus simples et indivisibles, tels que les boutons, les couleurs, les styles typographiques, etc.
- Les molécules sont un regroupement d’atomes qui forme une unité cohérente de composants UI.
- Les organismes sont constitués d’un ensemble de molécules et/ou d’atomes regroupés ensemble.
- Les templates représentent la structure des différents groupes de molécules.
- La page désigne l’interface utilisateur finale.
User Interface
Mobile First
Compte tenu des données analytiques récupérées en amont, nous avons utilisé une approche de conception axée sur l’optimisation pour les appareils mobiles. Dans ce processus, la page est d’abord conçue et optimisée pour les terminaux mobiles, puis adaptée progressivement pour les navigateurs de bureau. Cette approche s’inscrit dans la tendance des moteurs de recherche comme Google, qui privilégient désormais le mobile dans leur classement.
