Refonte du site web de Pierre Promotion

Se démarquer des sites vitrines habituels

Pierre Promotion, promoteur immobilier en Bretagne et en Pays de la Loire, a lancé une recherche de prestataire pour refondre son site Internet. L’objectif était de le rendre plus moderne, d’en améliorer l’expérience utilisateurs et, surtout, de se différencier des sites des concurrents.

Nous avons répondu à la consultation en proposant notamment une première maquette de la page d’accueil. Après beaucoup de recherches, nous avions imaginé une direction artistique forte et des animations dès l’arrivée sur le site pour immerger les visiteurs dans les projets de Pierre Promotion.

Cette proposition nous a valu d’être sélectionnés pour réaliser la refonte.

De l’opérationnel mais surtout du conseil

Bien que notre proposition lors de la consultation ait été approuvée, nous avons souhaité prendre le temps de bien comprendre les enjeux de Pierre Promotion et de sa cible. La phase de conception a nécessité de s’attarder sur les besoins fonctionnels attendus et utiles du futur site. Nous avons ainsi animé des ateliers UX collaboratifs.

S’en sont suivies les phases de conception et de direction artistique, pour terminer sur le développement back-end et front-end.

Un site vitrine unique et différenciant

Conception

Pour débuter ce projet et faciliter l’immersion, nous nous sommes réunis avec l’équipe de Pierre Promotion le temps de quelques ateliers.

Nous avons, par exemple, réalisé des proto-personas, qui sont des profils utilisateurs. Cela nous a permis de produire des user stories : “En tant que XXX, je souhaite XXX, afin de XXX”.

Pour définir l’arborescence du site, nous avons fait un atelier tri de cartes à partir de ces user stories notamment. Ce travail a permis de faire émerger des besoins fonctionnels et des parcours utilisateurs.

Nous avons terminé par une version modifiée et sur mesure de l’atelier OOUX (Object-Oriented UX) : nous avons priorisé et hiérarchisé les blocs d’informations sur trois gabarits de page. Ces trois pages ont été choisies selon le parcours utilisateurs classique : l’accueil, la liste des biens et une fiche détails d’un projet.

Design et direction artistique

Dès la phase de consultation, la proposition de la page d’accueil, immersive et dynamique, a plu aux clients. Cette direction artistique a donc été conservée comme base du projet pour être déclinée aux autres pages.

Bien sûr, nous avons fait en sorte de rester cohérents avec la charte graphique de Pierre Promotion, mais en l’adaptant aux codes du numérique. Cela nous a laissé la place de proposer une nouvelle typographie plus adaptée aux écrans.

Nous avons imaginé le site afin qu’il crée un sentiment d’immersion dans les projets de Pierre Promotion. Pour cela, nous avions réalisé un benchmark à l’échelle internationale et avions emprunté des codes attribués plutôt au e-commerce ou aux plateformes de réservation. L’enjeu a été de les adapter au contexte immobilier français. Cela donne une interface moderne, immersive et audacieuse.

Animations

L’attention portée aux animations y est également pour quelque chose. Dès la page d’accueil, en faisant défiler la page, nous avons proposé une immersion dans une photo en forme de la lettre “P” du logo de Pierre Promotion.

Afin de rendre cette animation la plus fluide possible, Christina, développeuse front-end, et Arnaud, designer UX/UI, ont travaillé main dans la main. Ils ont pu faire de nombreux tests à montrer aux clients et ont dû trouver une méthode de fonctionnement permettant d’interpréter au mieux les animations attendues. Un simple prototype sur Figma ne suffisait pas. À savoir que les animations sur mobile ou desktop ne sont pas tout à fait similaires : nous avons préconisé de limiter les animations sur téléphone afin de ne pas créer de surcharge cognitive.

Sur les pages de détails d’un projet, nous avons développé un élément flottant (qui suit le défilement de la page). Cela permet à ce type de page de se démarquer de celle de ses concurrents mais aussi de garantir une vue permanente sur les éléments clés d’un projet immobilier : nom, prix, lieu, possibilité de financement, bouton de prise de contact.

Brief photographique

Afin d’assurer une cohérence visuelle entre l’identité du site et celles des photos, nous avons rédigé un brief photo complet. Nous y avons indiqué les typologies d’images, les recommandations techniques, la colorimétrie, une notice à transmettre aux photographes. Nous avons proposé les mêmes types de recommandations pour les images issues de banques d’images, qui seront utilisées dans les actualités.

Développement web

La dernière phase du projet, celle du développement web, opérée par Sandrine côté back-end et Christina côté front-end, s’est déroulée sans grande difficulté puisqu’il n’y avait pas de fonctionnalités techniques poussées à intégrer.

Nous avons tout de même ajouté une carte interactive car il est difficile de s’en passer sur un site immobilier. Cette carte, basée sur LeafletJS est complètement responsive (s’adapte à toutes les tailles d’écran).

De même, une barre de recherche était nécessaire pour permettre aux utilisateurs de filtrer leur recherche de bien par zone géographique et type de logement. Deux filtres complémentaires ont été ajoutés une fois dans la page des résultats de recherche. Ont d’ailleurs été dissociés les biens immobiliers dédiés aux particuliers et ceux dédiés aux activités professionnelles.

Une expérience utilisateurs soignée

Le nouveau site de Pierre Promotion est depuis en ligne. Le projet s’est particulièrement bien déroulé, avec une équipe client disponible et très réceptive à notre approche et nos propositions. Nous espérons que les utilisateurs apprécieront aussi la nouvelle navigation !

Nous vous invitons à aller découvrir le nouveau site de Pierre Promotion, pour vous plonger à votre tour dans leur univers.