Etude de cas : refonte du site internet Mamertin

Lorsqu’un utilisateur découvre un site internet pour la première fois, quelques secondes suffisent pour qu’il se forge une opinion. L’interface est-elle intuitive ? Le design est-il agréable à l’œil ? La navigation est-elle fluide ? Tous ces éléments influencent directement le ressenti de l’utilisateur et conditionnent sa capacité à se projeter sur un site internet.

L’agence immobilière Mamertin en avait pleinement conscience. Le site de l’agence ne reflétait plus son expertise, ni la qualité de son accompagnement. L’objectif était clair : il fallait moderniser sa présence en ligne et mettre en avant les biens immobiliers d’une manière claire et structurée. C’est dans cette optique que l’entrepreneur a fait appel à Fidelo Agency afin de repenser entièrement l’expérience proposée aux visiteurs.

À travers cette étude de cas, nous vous proposons de découvrir la première étape clé d’un projet web : le design UX/UI. Que ce soit l’expérience utilisateur (UX) ou l’interface utilisateur (UI), le design a un rôle crucial dans le succès d’un site internet. Suivons donc notre designer dans son travail de refonte.

Phase 1 : kick-off

Tout projet commence par une réunion de lancement (ou kick-off) où le client présente ses objectifs, ses besoins et ses inspirations. Le site existant de l’agence immobilière Mamertin n’était plus dans l’air du temps et nécessitait une refonte graphique afin de véhiculer ses valeurs et son professionnalisme. Le client avait d’ailleurs une idée bien précise de ce qu’il souhaitait incorporer dans cette nouvelle version.

Notre designer, Estelle, a commencé par réaliser un état des lieux. Le site montrait effectivement des signes d’âge au niveau de l’interface utilisateur : l’architecture des pages était à revoir, et la charte graphique était à appliquer.

Lorsque nous parlons d’architecture d’une page web, on parle de la façon dont une page est structurée et organisée. Cette architecture repose principalement sur 3 aspects : 

• La structure du contenu, qui correspond à l’ossature de la page (images, titres, paragraphes). Une page doit permettre d’identifier rapidement les informations essentielles. Elle doit donc être organisée de façon claire, aussi bien pour les utilisateurs que pour les moteurs de recherche (SEO) ;
• La présentation visuelle, qui englobe les couleurs, les typographies, la mise en page, ainsi que les animations et interactions entre les différents éléments ;
• L’accessibilité, afin de garantir que chacun puisse accéder aux informations proposées, quels que soient ses besoins ou ses contraintes.

Phase 2 : recherche et structuration

Cette phase est essentielle pour bien comprendre les enjeux du projet et poser des bases solides. Elle permet à notre designer d’identifier les informations à intégrer au site internet, mais aussi de repérer les schémas récurrents et les bonnes pratiques en matière de mise en page dans le domaine de l’immobilier. Grâce aux inspirations du client, la recherche en a été grandement facilitée. Estelle a ainsi mené un travail de recherche sur les structures et les layouts afin de concevoir un premier squelette du site sur son outil de prédilection, Figma.

Grâce à cet outil, elle a rapidement créé une première maquette en noir et blanc du site internet de Mamertin, afin de se concentrer uniquement sur l’organisation des contenus. La navigation est-elle intuitive ? L’information est-elle facilement accessible ? Ces questions sont fondamentales à ce stade du projet.

En se détachant volontairement des couleurs et de la typographie, qui relèvent en grande partie de choix esthétiques subjectifs, il devient plus simple d’identifier les faiblesses de la structure. Le travail sur le squelette permet ainsi de valider l’architecture du site avant d’entrer dans la phase suivante, dédiée au design graphique.

Phase 3 : mise en forme graphique et prototypage

Lors de cette étape, Estelle a intégré la charte graphique existante du client et l’a appliquée à l’ensemble des maquettes du site. Une fois le design mis en place, elle a réalisé un prototype interactif permettant au client de naviguer dans la maquette comme s’il consultait déjà le site en ligne. Cette phase a permis de visualiser concrètement le rendu final et d’affiner les derniers détails avant le lancement du développement.

Après la présentation du design et sa validation par le client, le projet est entré dans sa phase suivante : le développement du site internet.

« J’ai beaucoup apprécié travailler sur le projet de l’agence immobilière Mamertin, car il s’agissait pour moi d’une première expérience dans le domaine de l’immobilier. Réfléchir à chaque détail et à toutes les informations qu’un utilisateur doit pouvoir trouver rapidement a été un véritable plaisir. La collaboration a également été très enrichissante, grâce à sa réceptivité aux choix graphiques proposés », Estelle, web designer chez Fidelo Agency

Conclusion

Le travail réalisé lors des phases de recherche, de structuration et de prototypage a permis de traduire les objectifs du client en une interface claire, moderne et adaptée à son secteur d’activité. Cette première étape, consacrée au design UX/UI, constitue un socle essentiel pour la suite du projet, notamment pour le développement du site et son optimisation future.

À travers cette étude de cas, on comprend que le design ne se limite pas à l’aspect visuel : il joue un rôle stratégique dans la lisibilité de l’information, la valorisation des contenus et la perception globale d’une marque en ligne. C’est cette vision globale qui permet de concevoir des sites à la fois esthétiques, fonctionnels et efficaces.

Envie de travailler avec nous ? Contactez-nous !