Orpi

  • Conseil
  • UI / UX

Dispositif

  • Site web et mobile

Technologie

  • Symfony
  • Elastic Search
  • HTML 5 & CSS3

Liens

baignoire
Logo Orpi

Nous collaborons avec l’équipe digitale d’Orpi depuis maintenant 3 ans. Au fil de ces 3 années, nous avons pu appréhender l’ensemble des problématiques du site pré-existant à notre collaboration pour le faire évoluer. Ainsi, après une longue phase d’amélioration de l’existant, nous avons abordé la question de la refonte complète du front, en collaboration avec JoliCode, à l’occasion de la refonte de leur plateforme de marque.

Wireframe de la page d'accueil desktop orpi.fr

Les ateliers de co-conception

Forts de notre connaissance du site et de l’équipe, nous avons organisé 5 ateliers de co-conception avec l’équipe Orpi et la notre, autour des pages clé du site :

  • La recherche d'un bien
  • L'estimateur en ligne
  • La fiche bien
  • Les pages agences et la recherche d'agence
  • La homepage et les pages métier (acheter, louer...)
  • Les pages de contenu et le SEO

Sur ces thèmes, nous avons réalisé de nombreux exercices qui ont abouti sur des wireframes lo-fi dans un premier temps, puis des wireframes haute fidélité.

Design Sprint et Atomic design

Pour répondre aux exigences du calendrier, nous avons travaillé par sprint, sur la base d’un backlog. Nous avons fonctionné par lots, plusieurs lots en même temps à des niveaux d’avancement différents, afin de répondre à la problématique des circuits de validation. Cela nous a permis de ne jamais être bloqués dans l’avancement, et de pouvoir livrer des pages en continu à l’équipe de développement de JoliCode.

Sprint du projet orpi

La réalisation graphique

#E30513
#7A76B1
#50CEB7
#F6F6F6
Illustration d'un appartement
Illustration de connexion pour Orpi

Illustrations

Illstration d'une maison

Les valeurs de la marque étant la proximité et la bienveillance, l'ajout d'illustrations a permis d'ajouter une dimension de bonhomie au site. La rondeur du trait dessiné apporte une touche plus sympathique. Nous avons animé ces illustrations pour un rendu plus vivant et qualitatif.

Les valeurs de la marque étant la proximité et la bienveillance, l'ajout d'illustrations a permis d'ajouter une dimension de bonhomie au site. La rondeur du trait dessiné apporte une touche plus sympathique. Nous avons animé ces illustrations pour un rendu plus vivant et qualitatif.

Nous avons choisi pour ces pictogrammes des formes rondes pour adoucir l'ensemble de l'UI.

Micro-intéractions

L'ajout de micro-intéractions est un vrai plus pour les utilisateurs comme pour la marque. Cela confère un rendu soigné et robuste à la marque et assoit donc son image de stabilité. Côté utilisateur, l'information après action est limpide.

L'ajout de micro-intéractions est un vrai plus pour les utilisateurs comme pour la marque. Cela confère un rendu soigné et robuste à la marque et assoit donc son image de stabilité. Côté utilisateur, l'information après action est limpide.

Styleguide du site orpi.fr

Styleguide

Styleguide du site orpi.fr

Site web et mobile

mockup d'ordinateur

L'expérience mobile du site a été particulièrement sujette à échanges, en effet, le trafic d'otpi.com reste majoritairement desktop, mais la courbe de progression du mobile laisse à supposer un inversement des usages très prochain. Ainsi, nous avons travaillé de concert avec JoliCode pour optimiser les performances d'affichage (temps de chargement en mobilité).

UI page de menu Orpi
UI page de menu Orpi
UI page de Orpi

Comment mettre en valeur un bien sur une largeur de 320 px ? En se concentrant uniquement les informations nécessaires à l'utilisateur. Nous avons cherché à alléger au maximum l'interface pour offrir la part belle au catalogue de biens d'Orpi.

Comment mettre en valeur un bien sur une largeur de 320 px ? En se concentrant uniquement les informations nécessaires à l'utilisateur. Nous avons cherché à alléger au maximum l'interface pour offrir la part belle au catalogue de biens d'Orpi.

Photo Orpi
Photo Orpi
Ils nous ont fait confiance
Retour en haut keyboard_arrow_down background Layer 1