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
  • Design
Disciplines
  • Ergonomics
  • UI design
  • UX design
Tools
  • Collaborative workshop
  • Graphic sprint
  • Sketch
  • User journey

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