L'Arbre à Café
Le site pro de l'Arbre à Café est un site vitrine dédié aux professionnels (Hôtellerie, Restauration, Coffee Shops, Entreprises du tertiaire) souhaitant s’équiper en café et machines à café professionnelles.
Suite à un audit réalisé en mai 2023 par le consultant extérieur, un travail de rédaction SEO a été mené pour enrichir la section dédiée aux machines. Cependant, la densité du contenu textuel nuit à l’expérience utilisateur : les pages manquent de clarté et ne sont pas engageantes.
Problématique
Comment repenser l’interface de la section “Machines” pour offrir une expérience claire, visuelle et engageante sans nuire à la performance SEO ?
Phase 1
Comprendre le contexte
Le développeur Baptiste Nuez, collaborateur régulier de L’Arbre à Café, m’a sollicité pour intervenir sur une refonte ciblée de la section “Machines” de leur site. La demande : améliorer l’expérience utilisateur, le design et le copywriting de cette partie stratégique du site, essentielle dans la génération de leads commerciaux.
Malgré un bon positionnement SEO, la section actuelle souffrait d’une densité de contenu trop élevée, d’une mise en page peu engageante et d’un manque de clarté dans la présentation de l’offre. L’enjeu de cette collaboration était donc de concevoir une expérience plus fluide, attractive et convaincante, tout en préservant la performance SEO et la cohérence visuelle du site existant.
Phase 2
Analyser les cibles
Avant d’entamer la refonte, j’ai mené une analyse des utilisateurs de la section “Machines” en m'appuyant sur les insights issus de l’audit SEO réalisé en 2023, les données comportementales collectées via Google Analytics et Looker Studio, ainsi que sur des échanges avec l’équipe commerciale de L’Arbre à Café, en contact quotidien avec les clients.
Cette analyse m’a permis d’identifier deux profils d’utilisateurs :
Les professionnels déjà familiers avec les machines à café, recherchant un accès rapide et efficace à l’information pour formuler une demande de devis.
Les professionnels moins experts, ayant besoin d’être accompagnés, rassurés et guidés tout au long de leur parcours d’achat.
Phase 3
Créer le parcours utilisateur
Une fois les profils utilisateurs clairement définis, j’ai entamé la refonte par une phase de conception du parcours utilisateur.
Cette étape, non présentée au client, a servi de base de discussion avec le développeur et a permis de poser les fondations des wireframes réalisés par la suite.
Phase 4
Dessiner des wireframes
Pour la conception des wireframes, je me suis appuyée sur l’analyse utilisateur et les informations produits fournies par le client. L’objectif principal de cette étape était de rendre visuel le parcours utilisateur afin de valider avec le client la structure de la section “Machines”.
Le principal défi a concerné la complexité du tri des machines selon les besoins variés des utilisateurs. J’ai donc proposé la mise en place de tags et filtres pour simplifier la recherche et offrir une expérience plus fluide.
J’ai également travaillé sur le copywriting, afin d’assurer une cohérence entre contenu, navigation et ton de marque, au service d’une expérience claire et engageante.
Phase 5
Designer les interfaces
Lors de la phase de design, j’ai pu m’appuyer sur le contenu photo fourni par le client, à la fois variés et de très bonne qualité, qui m'a permit de construire une interface à la fois esthétique et cohérente avec l’univers premium de L’Arbre à Café.
De plus, j’ai porté une attention particulière à plusieurs points :
Mettre en valeur les marques sans en faire trop, en soulignant leur singularité tout en préservant l’équilibre visuel de la page.
Présenter les informations techniques des machines de manière accessible et rassurante.
Concevoir des sections réutilisables sur différentes pages du site, comme la section SAV, présente à la fois sur la page d’accueil et les pages produits.
L’ensemble du design vise à offrir une expérience claire, visuelle et cohérente, tout en renforçant la crédibilité et la valeur perçue des machines à café professionnelles.
Phase 6
Livrer les maquettes
Pour faciliter le travail du développeur et la cohérence visuelle sur l’ensemble du site, j’ai conçu le design autour de composants réutilisables. Cette approche modulaire permet également de faire évoluer le site facilement à long terme, sans rupture d’identité ou de style.
Enfin, j’ai réalisé un prototype interactif afin de plonger le client dans l’expérience finale et de lui permettre de visualiser l’intégration du nouveau design au sein du site existant.
Ce qui se dit sur moi
Recommandations
"Noémie est une UX designer rigoureuse et créative. Elle comprend vite les besoins et propose des solutions claires et efficaces. Je la recommande sans hésiter."
Baptiste Nuez - Développeur web Freelance
