Le Site Immo
« Le Site Immo » est un portail immobilier regroupant près d’un million d’annonces de biens à louer ou à vendre, avec des outils d’estimation et la mise en relation avec des professionnels.
Interventions
- Audit UI / UX de l’existant
- Benchmark
- Wireframes (maquettes fonctionnelles)
- Prototype haute fidélité (maquettes graphiques)
- Illustrations vectorielles
Outils
- Figjam
- Figma
- Illustrator
Objectifs de la refonte
- Améliorer la page d’accueil pour diminuer le taux de rebond
- Optimiser le moteur de recherche pour que les utilisateurs trouvent plus facilement les annonces pertinentes
Méthodologie
👉 Audit UI & UX
L’audit a permis d’identifier les forces, les faiblesses et les points de friction de l’expérience actuelle à travers plusieurs outils :
- Analyse heuristique : évaluation de l’interface selon les 10 heuristiques de Nielsen (visibilité du statut du système, cohérence, prévention des erreurs, etc.) pour détecter les problèmes d’utilisabilité.
- Cartographie du parcours utilisateur existant : identification des points de friction tout au long du parcours (compréhension, navigation, conversion…).
- Analyse visuelle (UI audit) : étude de la hiérarchie visuelle, de la cohérence des styles, des contrastes, des espacements, des typographies et de l’accessibilité.
L’objectif étant de dresser un diagnostic clair qui oriente la stratégie de refonte (ce qu’il faut simplifier, moderniser, ou mieux hiérarchiser).
👉 Analyse concurrentielle
Le benchmark aide à comprendre comment le produit se positionne face aux solutions concurrentes et aux bonnes pratiques du marché.
Sélection d’un panel de concurrents directs et indirects (offrant un service similaire ou ciblant la même audience).
Analyse comparative sur plusieurs critères :
Expérience utilisateur (parcours, onboarding, lisibilité de l’offre, ergonomie mobile…)
Design interface (style visuel, ton, iconographie, tendances UI)
Positionnement et promesse de marque
Repérage des bonnes pratiques à réutiliser et des opportunités d’innovation.
👉 User flow
Le user flow permet de schématiser la manière dont un utilisateur accomplit une action clé dans l’interface.
- Définition des objectifs utilisateurs (ex : consulter les annonces correspond à la recherche effectuée)
- Cartographie des étapes et conditions nécessaires pour atteindre cet objectif (cf capture ci-dessous)
- Simplification du parcours : élimination des étapes inutiles, erreurs possibles ou sources de confusion
Des solutions ont été apportées pour résoudre les points de friction identifiés sur le parcours initial :
- Dès l'arrivée sur la page d'accueil, l'utilisateur peut directement accéder au moteur de recherche : pas d'inscription ni d'étape superflue
- Sur le champs texte de localisation, les erreurs de saisie sont automatiquement corrigées : l'autocomplétion limite la charge cognifitive
- La recherche n'aboutie a aucun résultat ? On propose à l'utilisateur des suggestions de biens similaires et la possibilité de créer une alerte personnalisée
👉 Wireframes
Les wireframes constituent la traduction fonctionnelle des user flows. Ils servent de base à la conception visuelle.
- Hiérarchisation du contenu selon les besoins identifiés lors de l’audit
- Construction de structures basse-fidélité (layout, navigation, interactions clés)
- Itérations rapides pour tester différentes configurations avant de passer au design final. Dans l’exemple ci-contre, on explore plusieurs approches pour définir le rayon de recherche (le choix s’est porté sur la liste déroulante, plus pertinent pour réduire les choix et donc simplifier la décision)
👉 Maquettes UI
Les maquettes UI traduisent l’expérience utilisateur dans un univers visuel cohérent et attractif.
- Application de la charte existante pour assurer la cohérence entre les pages et composants
- Travail sur la hiérarchie visuelle et le contraste afin de guider l’œil et améliorer la compréhension
- Micro-interactions et animations pour enrichir l’expérience et renforcer l’engagement
Résultats
Le nouveau design a notamment permis de réduire par 2 le taux de rebond de la page d’accueil sur mobile.
