Projets figma

Formulaire d'inscription

Hero header

Interface de paiement bancaire

Interface de calculatrice

Interface de paramétrage

Réplique d'une interface de modelo office

Page d'erreur 404

Interface de logiciel musique

Mission : Conception UI/UX – Fiche Bien Express pour Modelo Office

Dans une logique pédagogique, une mission fictive m’a été confiée afin de me placer dans des conditions proches de celles rencontrées par un webdesigner en environnement professionnel. L’objectif était de me familiariser avec les attentes concrètes du métier, les contraintes d’un brief UI/UX, et les bonnes pratiques en matière de conception d’interfaces.

Consignes Brief UI/UX

BRIEF DESIGN UI/UX — Application immobilière BtoB : Fiche bien express

Contexte :

Tu intègres une équipe produit chez Modelo Office, une application dédiée aux professionnels de l’immobilier. Ton rôle est de repenser une “fiche express” qui affiche les informations principales d’un bien immobilier dans un format compact, rapide à consulter, pensé pour une utilisation quotidienne par des agents.

Cette fiche est destinée à être intégrée à plusieurs endroits de l’application :

  • Résultats de recherche
  • Liste des biens similaires
  • Vue « favoris » ou « biens à surveiller »

Objectif de la mission :

Concevoir une maquette responsive (desktop uniquement) de cette fiche bien express, dans un contexte de liste (ex : plusieurs fiches les unes sous les autres). Tu devras réfléchir à :

  • La hiérarchie des informations
  • Les actions rapides disponibles (favoris, partage, accès à la fiche complète, etc.)
  • Le style graphique cohérent avec une application pro (sobre, lisible, efficace)

Contenu à afficher (données disponibles) :

  • Photo principale du bien
  • Titre (ex : “T3 rénové 64m² – Strasbourg Centre”)
  • Adresse (complète ou arrondissement/quartier)
  • Prix
  • Surface
  • Nombre de pièces
  • Type de bien (appartement, maison, local commercial…)
  • Étiquette DPE (ex : D – 220 kWh/m²/an)
  • Statut du bien (en vente, sous compromis, vendu)
  • Date de publication de l’annonce
  • Actions : voir la fiche complète / ajouter en favori / marquer comme suivi / partage rapide

Contraintes et attentes :

  • Design uniquement sur Figma
  • Design système sobre, réutilisable
  • Ne pas trop charger la fiche, viser l’efficacité visuelle
  • Bien gérer les cas où il manque une image ou une info (ex : pas de DPE)
  • Livrable attendu : 1 planche avec la version normale, 1 avec des variantes si tu veux (ex : survol, bien sous compromis, pas d’image dispo)

Durée estimée :

1 à 2 jours de travail max pour une première itération.

But pédagogique :

  • Travailler la priorisation de l’info, un vrai sujet en UX
  • Faire un design modulaire adaptable à plusieurs contextes
  • Commencer à penser composants réutilisables (notions d’atomic design)
  • Travailler la gestion des cas limites (empty, erreurs)