Étude de cas — UX/UI Design
Agreeable
Repenser l’expérience d’un CSE engagé.
Client
Agreeable
Année
2024 - 2025
Discipline
UX/UI Design
Rôle
UX/UI Design
Durée
8 mois
Équipe
UX/UI Designer · Directeur artistique · Développeur · Marketing
01/ Le point de départ
Agreeable est un CSE qui accompagne des entreprises engagées et leurs collaborateurs à travers une offre pensée autour de la consommation responsable. Dans le cadre d’un projet mené en équipe, j’ai pris en charge la conception UX/UI de leur future expérience digitale, en partant d’une page blanche.
Le projet est né d’un besoin de structurer l’expérience digitale d’Agreeable. L’entreprise ne disposait pas encore d’un dashboard permettant de centraliser et organiser ses différents services. Mon rôle a donc été de concevoir cette expérience de bout en bout : de l’architecture des contenus jusqu’aux interfaces finales, en passant par les parcours utilisateurs et le design system.
02/ Le problème
Créer une expérience digitale claire et intuitive à partir d’une page blanche.
Constat 01
×
Une expérience à construire
Constat 02
×
Beaucoup d’informations à organiser
Constat 03
×
Une identité à traduire dans l’interface
03/ Objectifs
01
Clarifier la navigation
Organiser les contenus et fonctionnalités afin de permettre aux utilisateurs de trouver rapidement ce dont ils ont besoin.
02
Simplifier les parcours
Concevoir des parcours intuitifs et limiter les étapes inutiles dans les principales interactions.
03
Poser une base UI solide
Construire un système de composants cohérent permettant de faire évoluer l’interface dans le temps.
04/ Ce que j’ai fait
Phase 01
Structurer l’expérience
Avant de penser à l’interface, j’ai commencé par définir l’architecture du produit et organiser les différentes sections du futur dashboard.
Phase 02
Dessiner les parcours
Les user path maps m’ont permis de représenter les différents parcours et de comprendre comment les utilisateurs allaient naviguer au sein de l’expérience.
Phase 03
Passer du wireframe à l’interface
Une fois la structure définie, j’ai conçu les wireframes puis les interfaces haute fidélité en travaillant la hiérarchie de l’information et la lisibilité.
Phase 04
Créer un système cohérent
Le design system est venu formaliser les composants et les règles graphiques nécessaires pour garder une interface cohérente et facilement évolutive.
05/ Décisions clés
Ce qui fait la différence ne se voit pas à l’écran : ce sont les choix faits en amont, et leurs raisons.
D01
Une architecture pensée avant l’interface
Pourquoi →
Commencer par l’arborescence et les parcours permettait de résoudre les problèmes de structure avant de travailler l’esthétique.
D02
Une interface légère
Pourquoi →
La direction artistique privilégie des tons crème et une esthétique lumineuse plutôt que les codes verts traditionnellement associés à l’écologie.
D03
Un design system dès la conception
Pourquoi →
Formaliser les composants permettait de maintenir une cohérence visuelle entre les différents écrans et de faciliter les évolutions futures.
06/ Direction artistique
Responsable · Lumineux · Minimal · Humain · Accessible
Palette
#F8F7F9
Blanc
Background
#101720
Charbon
Texte
#297051
Sapin
Couleur d'accent
#73C088
Pomme
Couleur d'accent
#F6B5C5
Candy
Couleur d'accent
#9C7A68
Noisette
Couleur d'accent
Typographie
Titre
Archivo
Bold
corps de texte
Satoshi
Regular
Fig. 02 — Vue d’ensemble
Fig. 03 — Détail
07/ Le résultat
Une conception complète du dashboard, accompagnée de son architecture, de ses parcours utilisateurs, de ses wireframes et d’un système d’interface cohérent. Le travail a reçu un retour très positif de la part d’Agreeable et a permis de poser une base solide pour la suite du projet.
Services
UX Design · UI Design · Design System · Prototypage