UI & UX

Jiyong Designer
2017-2022

CityScan


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

Évaluation sur cityscan

Parcours utilisateur

Cette partie de CityScan est surtout destinée aux professionnels de l’immobilier, agent immobilier, notaire etc.

Schema du parcours utilisateur

Structure principale de CityScan

GUI / Design Système

Sur ce projet nous avons eu la chance de travailler avec des développeurs, notamment front, très pointue, avec un grand intérêt pour l’accessibilité.

Couleurs

Couleurs principales des interfaces de CityScan. Les noms, pour certaines couleurs, son donnés par le site htmlcsscolor

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

La police d’écriture utilisée sur CityScan est la Roboto.

groupe typo 01
demo roboto

propriétés textes

Boutons

Il y a deux variantes principales des boutons utilisés.

Bouton plein

bouton au trait

Formulaire


Checkbox

Toggle

Radio Button


input texte

input texte

input texte

input texte


input texte

input texte

Carte des Innondations

Interfaces

CityScan existe en application web, mais également en widget importé / marque blanche.

Ainsi, en plus d’une version responsive, il était important de prendre en compte les contraintes liées à l’intégration de ce widget chez le client qui parfois dispose de très peu de hauteur ou de largeur.

La force de cet outil est d’avoir beaucoup de données qui concerne un bien dans son environnement, avec des explications dans le cartouche (généralement à gauche) et illustré généralement sur une carte

Carte des Innondations

Iconographie

  • icone adresse
  • icone carte
  • icone copier coller
  • icone crédit
  • icone croix
  • icone deconnexion
  • icone description
  • icone enregistrer
  • icone facture
  • icone liste des évaluations
  • icone Mot de Passe
  • icone parametre
  • icone parfait
  • icone photo
  • icone plus bas
  • icone plus haut
  • icone rapport
  • icone recherche
  • icone téléphone
  • icone thème
  • icone utilisateur
  • icone validation
  • icone résultat de recherche
  • icone informatif

Icônes des thématiques & indicateurs

Les icônes ci-dessous, illustre les thématiques et indicateurs sur CityScan.

  • Icône transport vert
  • Icône université
  • Icône territoire agricole
  • Icône théâtre et opéra
  • Icône transport dangereux
  • Icône tramway
  • Icône sport individuel
  • Icône sureté face aux risque
  • Icône soins et beauté
  • Icône sport collectif
  • Icône sismicité
  • Icône shopping
  • Icône situation des ménages
  • Icône services aux personnes
  • Icône saturation véhicules
  • Icône services logement
  • Icône services publics et santé
  • Icône risque sol pollués
  • Icône risque nucléaire
  • Icône risque minier
  • Icône saturation population
  • Icône risque industriel
  • Icône restaurant
  • Icône qualité de vie
  • Icône qualité du numérique
  • Icône professions
  • Icône radon
  • Icône prix dans l'ancien
  • Icône loyer
  • Icône prix dans le neuf
  • Icône pompier
  • Icône pharmacie
  • Icône plages
  • Icône pollution de l'air
  • Icône pollution électromagnétique
  • Icône parc et jardin admirable
  • Icône nuisance sonore
  • Icône parc et jardin
  • Icône nuisance olfactive
  • Icône monument
  • Icône musée
  • Icône mouvement de terrain
  • Icône mobile 3G
  • Icône Montagne
  • Icône Mobile 4G
  • Icône mer et océan
  • Icône métro
  • Icône médecin généraliste
  • Icône maternelle
  • Icône marchés
  • Icône médecin spécialiste
  • Icône marais
  • Icône mairies
  • Icône maison
  • Icône maison et appartement
  • Icône lycée pro
  • Icône lagunes littorales
  • Icône lycée général
  • Icône loisir tourisme
  • Icône laboratoire médical
  • Icône inondation
  • Icône internet haut débit
  • Icône lacs
  • Icône infrastructure
  • Icône hôtel
  • Icône gendarmerie
  • Icône hôpital
  • Icône fleuves
  • Icône gare
  • Icône fibre
  • Icône forêts
  • Icône école élémentaire
  • Icône feu de forêt
  • Icône discothèque
  • Icône crèche
  • Icône commissariat
  • Icône commerce utilitaire
  • Icône commerce de bouche
  • Icône collège
  • Icône bar et café
  • Icône bibliothèque
  • Icône avalanche
  • Icône ages
  • Icône accès à l'éducation
  • Icône argiles
  • Icône appartement
  • Icône accès au commerce