CityScan permet à ses utilisateurs de connaître la situation d'un bien qu'il va acheter ou louer. L'outil propose également, aux vendeurs et acquéreur d'un bien, de faire une estimation de bien
Parcours utilisateur
Cette partie de CityScan s’adresse principalement aux professionnels de l’immobilier — agents, notaires, promoteurs — qui souhaitent accéder rapidement à une vision d’ensemble d’un bien et de son environnement. Le parcours est pensé pour leur faire gagner du temps tout en valorisant les informations clés auprès de leurs clients.
Structure de l’interface
La structure est volontairement simple et fonctionnelle, organisée autour de quatre zones principales :
- Un cartouche à gauche, qui contient la navigation principale entre les différentes catégories d’informations (environnement, estimation, services, etc.).
- Un panneau secondaire, à gauche également, qui affiche les options contextuelles liées à la catégorie sélectionnée dans le cartouche.
- Une carte centrale, qui illustre visuellement les données et permet à l’utilisateur de situer et comprendre les informations dans leur contexte géographique.
- Un panneau latéral à droite, dédié aux contrôles de la carte (filtres, couches d’affichage) et à des options complémentaires selon les besoins.
Interfaces
CityScan existe à la fois sous forme d’application web et de widget embarqué en marque blanche. En plus d’une version responsive pensée pour une utilisation multi-supports, le design devait s’adapter à des contraintes spécifiques d’intégration chez les clients. Certains disposent d’un espace très limité, en hauteur ou en largeur, ce qui a nécessité une attention particulière à la modularité de l’interface : hiérarchisation de l’information, gestion des points de rupture, et optimisation de l’espace dans chaque composant.
Un outil riche en données, pensé pour être lisible
La force de CityScan réside dans sa capacité à centraliser un grand volume de données liées à l’environnement d’un bien : qualité de vie, nuisances, accessibilité, risques, équipements, etc. Chaque information est accompagnée d’explications synthétiques dans le cartouche (généralement positionné à gauche) et illustrée sur la carte centrale, pour une compréhension immédiate et contextualisée.
GUI / Design Système
Sur ce projet, nous avons eu la chance de collaborer avec des développeurs, notamment côté front-end, particulièrement expérimentés et impliqués. Leur sensibilité aux enjeux d’accessibilité a permis de pousser plus loin la qualité de l’interface, tant sur le plan technique qu’en termes d’expérience utilisateur.Couleurs
Une contrainte majeure du projet résidait dans l’identité graphique imposée, qui prévoyait l’utilisation d’un rouge en arrière-plan avec du texte blanc par-dessus. Ce choix posait des problèmes de contraste, notamment pour les utilisateurs ayant des troubles de la vision ou en situation de forte luminosité. Nous avons dû composer avec cette contrainte.-
CityScan
0% 85% 70% 0%#E84242 -
Persian Red
#C72A2A -
Red Black
#180000 -
Seashell
#FFF9F4 -
Dusty Grey
#B8A2A2 -
Dim Gray
#707070 -
White
#FFFFFF -
Whisper
#EAEAEA -
Silver
#BDBDBD
Textes
CityScan utilise Roboto, une police sans empattement largement répandue dans les interfaces numériques. Son choix répond à plusieurs critères : lisibilité à toutes tailles, bonne prise en charge cross-platform, et neutralité esthétique compatible avec un affichage de données riche. Elle contribue à une lecture fluide, y compris dans des contextes denses en informations comme ceux proposés par l’outil.
Boutons
L’interface utilise deux styles de boutons pour marquer les priorités. Les boutons pleins mettent en avant les actions principales, tandis que ceux avec bordure, plus discrets, sont réservés aux actions secondaires. Cette hiérarchie visuelle guide l’utilisateur sans surcharger l’interface.
Formulaire
Radio, checkbox et toggle
Les toggles, checkboxes et radiobuttons suivent une même logique visuelle, avec des états clairs pour chaque interaction. Les toggles servent aux activations rapides, les checkboxes à la sélection multiple, et les radiobuttons aux choix uniques. L’ensemble est pensé pour rester lisible et accessible.
Input texte
Les champs de saisie ont été conçus pour rester sobres et fonctionnels, avec une mise en forme claire des états actifs, au focus ou invalides. L’usage du rouge étant déjà réservé à l’identité graphique de CityScan, j’ai opté pour un orange distinct afin de signaler les erreurs, permettant ainsi de préserver à la fois la lisibilité et la cohérence visuelle.
Dropdown et Autocompletion
Les menus déroulants (dropdowns) et champs à autocomplétion ont été pensés pour faciliter la saisie, en particulier sur des données structurées ou longues (ex : une adresse). Les listes déroulantes offrent une navigation claire, tandis que l’autocomplétion permet de gagner du temps en proposant des suggestions dès les premières lettres saisies. Le style reste sobre, en cohérence avec les autres composants du formulaire.
