Back to projects
May 18, 2020
3 min read

Research & wireframe of an Energy Renovation Management and Tracking Tool

Design of a comprehensive web solution, from initial research through to wireframe design
Visual with two desktop screen representing a login and a dashboard screen and a title where it's writen "operating tool research & wireframe"
- [1. Context](#1-context) - [2. Objective](#2-objective) - [3. Process](#3-process) - [3.1. User Research and Analysis](#31-user-research-and-analysis) - [3.2. User flows \& storyboard](#32-user-flows--storyboard) - [3.3. Wireframing and Prototyping](#33-wireframing-and-prototyping) - [3.4. Content Handoff and Documentation](#34-content-handoff-and-documentation) - [4. Tools Used](#4-tools-used)

1. Context

The regional government sought to digitize its energy renovation tools to make it easier for individuals to submit renovation requests and improve the tracking and reporting process for advisors. This assignment did not include any interface design work regarding visual identity. The final deliverables were realistic wireframes with realistic data. The whole process of adapting the print graphic charter into a system design was part of a potential second package.

Three desktop screens from the "folders", "shared space", and "tasks" pages, each one is composed of filters, table and elements

Wireframe screens for the "folders", "shared space", and "tasks" pages

2. Objective

The objective was to design an all-in-one solution that serves as a central interface for the advisors. Those interfaces serve others key user groups: individuals applying for renovations (uploading documents & asking for meetings), and regional administrators responsible for reporting (datatable alimented by the differents category from the tracking tool).

Two desktop screens, one is a table view and the other one is a commentary view

The advisor receive request for a meeting from individuals applying

Two desktop screens, one is a table view and the other one is a form view

The advisor create invitation for a meeting with an individual applyer

3. Process

3.1. User Research and Analysis

I conducted qualitative user interviews with energy advisors, renovation applicants, and regional project managers to gather insights into their needs, pain points, and expectations. These sessions helped define user personas and informed the product’s feature set.

3.2. User flows & storyboard

Through co-design workshops with stakeholders, we defined frictionless user journeys tailored to different personas. This was followed by the development of detailed storyboards to visualize user flows and task completion processes.

3.3. Wireframing and Prototyping

I created an interactive, evolving prototype using a feedback loop from remote testing sessions with both advisors and external users. Regular demos allowed for iterative improvements, incorporating real-time feedback to optimize the user experience.

Desktop screen representing a multi windows page where whe can find all the building and user informations

"Informations section" in the individual folder view

Desktop screen where whe can see all the colors indicators for the energy consuption levels of the house

"Audit section" in the individual folder view

3.4. Content Handoff and Documentation

I produced a detailed functional specification document, tailored for both developers and the UI Designer. This included user stories, interface behavior descriptions, and data types, ensuring a seamless handoff between design and development phases.

Achievement: The clear documentation and defined user stories helped accelerate the development process, cutting development time by 20%, by comparison with a past similar project.


4. Tools Used

  • Balsamiq for wireframing