UX/UI of an energy performance monitoring tool

UX/UI of an energy performance monitoring tool 

Client Brief

Kocliko is a young start-up offering energy monitoring optimization solutions to both building managers and tenants. They need full UX and UI support on the interfaces.

Year

2019

Expertise
    Disciplines
    • Ergonomie
    • UI design
    • UX design
    Tools

      01

      Which solutions? For which users?

      To get started, we identified together the different types of users and their needs.

      Together with Kocliko team we have identified the main user needs according to each type of user : energy optimization managers and cost individualization managers on the one hand, and tenants on the other. We then have reflected on the corresponding user journeys and analyzed the existing solutions to similar needs and user journeys, in order to identify good practices and ideas.

      Table and task list of the user journeys
      User journeys worked out during the workshop
      Imac displaying benchmarking board
      UX benchmarking board
      User journeys worked out during the workshop
      UX benchmarking board
      02

      Two co-designed interfaces

      We co-design the interface destined to be used by building managers, and the other that will be used by tenants.

      We have formalized each user journey through a tree structure of the solution, which represents the starting point for our co-designing workshop.

      Deliverable of the tool’s tree structure
      Deliverable of the tool’s tree structure

      During the workshop, we have identified the pages to be designed for both inferfaces, and have made a list of functionalities for each page. Final step consisted in co-sketching phase, by materializing information on paper.

      Mockup of the interface's paper sketches
      Paper sketches of the interface after consolidation
      Mockup of a detail of the interface's paper sketches
      Detail of a paper sketch
      Paper sketches of the interface after consolidation
      Detail of a paper sketch

      23
      sketches drawn during the workshop

      During the two UX design sprints, we worked on wireframes architecture information.

      Managers’ interface wireframes
      Managers’ interface wireframes
      Tenants’ interface wireframe
      Tenants’ interface wireframe
      Managers’ interface wireframes
      Tenants’ interface wireframe

      To validate our hypothesis, we conducted short remote user tests with building managers and tenants. Wireframes have been consolidated following users feedbacks and validation from Kocliko.

      03

      Boosting information with the final touch

      It is now time to transform our wireframes into dashing deliverables!

      Mock-up of the managers’ interface
      Mock-up of the managers’ interface

      After consolidating wireframes, we have been able to move on to the final step before integration : graphic visuals.

      Mock-up of the tenants’ interface
      Mock-up of the tenants’ interface
      High quality of service and very professional interlocutors.
      Renaud Nédélec, Technical Director and Cofounder at Kocliko
      See another project