UX/UI d’un outil de suivi de performance énergétique

UX/UI d’un outil de suivi de performance énergétique 

Brief client

Kocliko est une jeune start-up qui propose des solutions d’optimisation de la gestion énergétique des bâtiments pour les professionnels d’un bâtiment et pour les locataires. Ils nous demandent un accompagnement complet sur l’UX et l’UI des interfaces.

Année

2019

Expertise
  • Design
Disciplines
  • Ergonomie
  • UI design
  • UX design
Outils

    01

    Quelles solutions ? Pour quels usagers ?

    Pour bien démarrer, nous identifions ensemble les différentes typologies d’ utilisateur et leurs besoins.

    Avec l’équipe Kocliko, nous identifions les besoins principaux par rapport à chaque typologie d’utilisateur : les gestionnaires de l’optimisation énergétique et les gestionnaires de l’individualisation des frais d’un côté, les locataires de l’autre. Nous réfléchissons aux parcours utilisateurs correspondants.

    Nous analysons aussi les solutions existantes visant des besoins et parcours similaires, afin d’en tirer des bonnes pratiques et des inspirations.

    Tableau avec liste des tâches des parcours utilisateurs
    Les parcours utilisateurs dégagés pendant l’atelier
    Imac affichant un tableau de benchmark
    Le tableau du benchmark UX
    Les parcours utilisateurs dégagés pendant l’atelier
    Le tableau du benchmark UX
    02

    Deux interfaces co-conçues

    Nous co-concevons l’interface destinée aux gestionnaires des bâtiments, et celle destinée aux locataires.

    Nous formalisons les parcours utilisateurs. L’arborescence de la solution constitue la base pour le travail de co-conception.

    livrable de l'arborescence de l'outil
    Livrable de l’arborescence de l’outil

    En atelier, nous identifions les pages à concevoir pour les deux interfaces. Ainsi, nous rédigeons ensemble la liste des fonctionnalités par page.

    Dernière étape de l’atelier, nous matérialisons ces informations sur papier par des croquis : c’est la phase de co-sketching.

    Mockup des sketches papier de l'interface
    Sketches papier de l’interface après la consolidation
    Mockup d'un détail des sketches papier de l'interface
    Détail d’un sketch papier
    Sketches papier de l’interface après la consolidation
    Détail d’un sketch papier

    23
    sketches produits en atelier

    Pendant deux sprints de conception UX, nous hiérarchisons l’information via les wireframes.

    wireframes de l'interface gestionnaires
    Wireframes de l’interface gestionnaires
    wireframes de l'interface locataires
    Wireframes de l’interface locataires
    Wireframes de l’interface gestionnaires
    Wireframes de l’interface locataires

    Pour valider nos hypothèses, nous menons des courts tests utilisateurs à distance, avec des gestionnaires des bâtiments et des locataires. Les wireframes sont consolidés suite aux retours utilisateur et à l’itération avec Kocliko.

    03

    Direction artistique / Design UI

    C’est le moment de transformer nos wireframes !

    Une étude de la concurrence et des nouvelles tendances d’interfaces est réalisée afin de définir une direction artistique claire et adaptée. L’enjeu étant de concevoir un design qui permette une immersion rapide pour une utilisation régulière.

    Design UI de l'interface gestionnaires
    Maquettes graphiques de l’interface gestionnaires

    Notre équipe de designers a conçu l’interface, pour quelle soit, « cosy » et apaisante, favorisant ainsi le parcours. Les éléments graphiques, les boutons, la navigation, la typographie… Tout est pensé pour maximiser l’expérience utilisateur.

    Maquettes graphiques de l'interface locataires
    Maquettes graphiques de l’interface locataires
    Haute qualité de l’intervention et beaucoup de professionnalisme de la part des interlocuteurs.
    Renaud Nédélec, Directeur technique, cofondateur chez Kocliko
    Voir un autre projet