A single portal to find your way through energy retrofit in Nouvelle-Aquitaine

Client
Région Nouvelle-Aquitaine
Year
2022

The challenge

Today, the organisation of the local, regional and national structures and services for energy retrofit is sometimes very complex. The aim is to create a unified, clear support and advice network for everyone. Région Nouvelle-Aquitaine commissioned us to create a platform dedicated to energy retrofit.

A single portal to find your way through energy retrofit in Nouvelle-Aquitaine

Project flow

01. Framing and onboarding
02. UX benchmark
03. Sitemap and co-design
04. Desktop and mobile wireframes
05. Art direction
06. Desktop and mobile UI design
07. QA and delivery

Study detail

Getting acquainted and project kick-off

Understanding the project's stakes and context

By creating the “Nouvelle-Aquitaine Rénov” web portal, Région Nouvelle-Aquitaine aims to support Nouvelle-Aquitaine citizens in their energy-retrofit journey. The project is guided by two main challenges:

  • a regional website that helps users understand what energy retrofit is
  • redirect them to the right contact who can advise them in their journey

An initial familiarisation phase and benchmarking study are carried out to better grasp the project’s context and take stock of what is in place. A necessary step to understand and formalise the user journeys. This work serves as the basis for the workshop that will define the new information architecture.

Defining the user journeys

Categorising the content to address the user needs

The project team is brought together to think collectively about the best ways to address user needs as they browse the site. This workshop puts the different existing pieces of content (and those we want to add) into perspective. The benchmark carried out upstream feeds the thinking around entry points by user profile, content categorisation by topic and the steps needed to access the desired service… The pieces of content are then prioritised based on user needs and the actions users will take on the platform. The information architecture is designed by following the sequence of steps that address the goals users want to reach:

  • discover this new web portal
  • understand energy retrofit and discover what’s happening in the field
  • learn about the different funding options for their project
  • and access the services for retrofitting a property
Co-design workshop for the information architecture
Consolidated information architecture following the co-design workshop

Screen co-design workshop

Ranking the information and shaping the structure of the screens

The project team is brought together again to work on the information architecture and the structure of the platform’s main screens. The interface proposals produced upstream are modified, annotated or redrawn during the workshop to refine the structure of the pages. This ideation work helps address the main blockers identified:

  • create templates that showcase the existing and additional content, making it easier for the user to gather information
  • prioritise access to finding an adviser in order to complete the process
White board with sheets laid on it

UX Design sprint

Designing the wireframes in desktop and mobile format

The UX sprint is launched to design the prioritised screens in desktop and mobile responsive format. Designing the different pages of the future portal gives us a step back to look at the layout of the components and the interaction between the screens. The different blocks structuring the pages address the needs and challenges defined upstream:

  • introduce the categories before walking through the steps: for example “understand energy retrofit” then explain the different types of work: “audit”, “insulation”, “materials”…
  • take an educational and transparent approach by featuring examples of successful retrofits
  • make it easier to access the funding options for the project
  • smooth the navigation by creating entry points by type of home
Wireframe design and layout

Art direction

A clean design accessible to everyone

The platform’s art direction is a skilful blend of the visual identity of Région Nouvelle-Aquitaine and France Rénov’. The different blocks of elements making up the platform are designed so that the user quickly identifies their function:

  • primary and secondary information
  • the steps involved in starting a property retrofit process
  • the component for finding and contacting an advisor
  • etc.

The aim is to create a design that is simple and understandable by everyone, in order to provide easy and quick access to the information on energy retrofit.

Graphic mockups of the home page
Art direction: typography used on the platform
Art direction: colour palette used on the platform
Components of the platform's design system
Miniature vidéo

Platform home page

Desktop and mobile graphic mockups

A multi-device platform

With the visual identity validated, the screens are then carried over into desktop and mobile format.

A design system is put in place to gain in speed and consistency during design, and to make the developers’ work easier.

Internally, the creation of reusable component blocks brings greater flexibility when the editorial team creates new pages.

Designing the components in desktop and mobile (in responsive) ensures that we offer a platform accessible to everyone on as many devices as possible.

Home page of the platform on a tablet
Graphic mockups of the screens produced during the UI sprint
Graphic mockup of the 'Where to find my advisor?' section on the platform's site
Miniature vidéo
Graphic mockups in responsive mobile design
Close-up of a graphic mockup in responsive design

Want to discuss your project?

Let's talk about your stakes, constraints and ambitions so we can build the best user experience together.

Contact us