CCI Formation Aix Marseille Provence
UX UI | Site internet
Le contexte
CCI Formation Aix-Marseille-Provence est un organisme de formation professionnelle qui propose un catalogue d'environ 300 formations destinées aux particuliers, salariés et demandeurs d'emploi.
Le site internet existant présentait de nombreux dysfonctionnements qui nuisaient à l'expérience utilisateur et limitaient les conversions. L'organisme avait besoin d'une refonte complète de l'UI/UX pour corriger ces problèmes et optimiser le parcours de recherche de formations.
La mission
- Audit du site existant et identification des points de friction
- Benchmark de la concurrence
- Refonte complète de l'UI/UX
- Création des wireframes et maquettes sur Adobe XD
Projet réalisé en collaboration avec Brandparty.
Les problèmes identifiés
L'audit du site existant a révélé de nombreux dysfonctionnements, classés par ordre de priorité :
Priorité 1 : problèmes critiques
- Moteur de recherche placé sous la ligne de flottaison (invisible sans scroll)
- Moteur de recherche tronqué et inutilisable sur petit écran
- Moteur de recherche qui ne renvoie pas correctement vers les fiches formation
- Affichage mobile catastrophique sur l'ensemble du site
Priorité 2 : points de friction majeurs
- Modules non cliquables qui ressemblent à des boutons mais ne font rien
- Témoignages qui semblent faux (manque de crédibilité)
- Hiérarchie d'information mal pensée sur les fiches formation
- Informations essentielles noyées dans le contenu
Priorité 3 : améliorations fonctionnelles
- Absence de système de favoris
- Impossibilité de sauvegarder ou partager une sélection de formations
Ces problèmes créaient une expérience frustrante pour les utilisateurs et faisaient perdre des leads à la CCI Formation.
La stratégie UX : prioriser et résoudre
Après l'audit, j'ai hiérarchisé les problèmes à résoudre et défini une stratégie claire.
Le moteur de recherche au cœur du site
Le principal problème du site était son moteur de recherche : invisible au chargement de la page, tronqué sur mobile, dysfonctionnel dans ses résultats. Or, c'est l'outil central d'un site catalogue : les utilisateurs viennent chercher une formation précise.
J'ai repensé complètement son positionnement et son ergonomie :
- Placement en haut de page, au-dessus de la ligne de flottaison
- Format horizontal adapté à tous les écrans
- Mise en avant visuelle forte : le moteur de recherche devient le point focal du site
- Fonctionnement optimisé qui renvoie directement vers les bonnes fiches
Les fiches formation restructurées
Les fiches formation contenaient toutes les informations nécessaires, mais mal organisées. Les éléments essentiels (durée, prix, dates, prérequis) étaient noyés dans un long texte, obligeant l'utilisateur à scroller et chercher.
J'ai restructuré complètement les fiches :
- Informations essentielles remontées en haut de page dans une zone dédiée
- Création d'une sidebar claire avec les infos pratiques (durée, tarif, prérequis, modalités)
- Ajout d'un second menu pour naviguer facilement dans les différentes sections de la fiche (programme, objectifs, financement, dates...)
- Hiérarchie visuelle repensée pour une lecture rapide et efficace
Le responsive repensé
L'affichage mobile était le point noir du site. Pages cassées, éléments qui se chevauchent, navigation impossible.
J'ai conçu toute l'architecture en design fluide pour que le passage desktop/tablette/mobile soit naturel et logique. Chaque élément s'adapte intelligemment selon la taille d'écran. Le site n'a plus deux versions (desktop et mobile), il a une version qui s'adapte parfaitement à tous les supports.
Fonctionnalités ajoutées : favoris et partage
Au-delà de la correction des bugs, nous avons proposé une fonctionnalité clé pour améliorer l'expérience et générer des leads : le système de favoris.
Le besoin identifié : souvent, c'est un responsable RH qui recherche des formations pour ses équipes. Il compare plusieurs formations, hésite, doit consulter sa hiérarchie, partager ses trouvailles avec des collègues...
La solution :
- Bouton "Ajouter aux favoris" sur chaque formation
- Liste des favoris consultable à tout moment
- Envoi par email de la sélection de favoris
- Partage de la liste aux collaborateurs
Avantages pour l'utilisateur : il peut préparer tranquillement sa sélection, la sauvegarder, la partager. Avantages pour la CCI Formation : récupération d'emails qualifiés (leads), facilitation du processus de décision.
Une réflexion stratégique globale
Avec Brandparty, la réflexion est allée au-delà de la simple refonte du site. Nous avons proposé une stratégie de contenu pour optimiser la conversion et l'accompagnement des prospects. Le site ne se contente plus de lister des formations, il guide l'utilisateur vers la bonne formation et facilite sa prise de décision.
Le processus de conception
Wireframes : création de maquettes fonctionnelles pour poser la structure, l'organisation des contenus, les parcours utilisateurs. Validation de l'ergonomie avant de passer au design.
Maquettes UI : design complet sur Adobe XD avec toutes les pages types (accueil, liste des formations, fiche formation, favoris...). Maquettes desktop, tablette et mobile pour valider l'expérience sur tous les supports.
Livrables : fichiers Adobe XD structurés avec spécifications pour les développeurs, exports d'assets, documentation des interactions et comportements.
Le résultat
Un site repensé de A à Z avec une expérience utilisateur fluide et efficace. Le moteur de recherche est enfin utilisable, les fiches formation sont claires et bien organisées, le mobile fonctionne parfaitement. Les utilisateurs trouvent rapidement ce qu'ils cherchent et peuvent sauvegarder leurs sélections.
La CCI Formation dispose maintenant d'un outil optimisé pour convertir ses visiteurs en stagiaires, avec des fonctionnalités pensées pour faciliter la décision et générer des leads qualifiés.