Créer le portail régional de la rénovation énergétique

Créer le portail régional de la rénovation énergétique 

Brief client

Aujourd’hui l’organisation des structures et des services locaux, régionaux, nationaux pour la rénovation énergétique est parfois très complexe. L’objectif est de créer un réseau d’accompagnement et de conseils, unique et lisible pour tous.

La Région Nouvelle-Aquitaine a fait appel à nos services afin de créer une plateforme dédiée à la rénovation énergétique.

Année

2022

Expertise
  • Design
Disciplines
  • Direction artistique
  • UI design
  • UX design
  • UX research
Outils
  • Créativité
  • Parcours utilisateurs
  • Sprint graphique

 

01

Acculturation et lancement du projet

Comprendre les enjeux et le contexte du projet

Avec la création du portail internet « Nouvelle-aquitaine Rénov », la Région Nouvelle-Aquitaine a pour objectif d’accompagner les citoyens néo aquitains dans leur démarche concernant la rénovation énergétique.

Le fil rouge du projet se base sur deux enjeux principaux :

  • un site internet régional permettant aux utilisateurs de comprendre ce qu’est la rénovation énergétique
  • les rediriger vers le bon interlocuteur qui saura les conseiller dans leur démarche

Une première phase d’acculturation et un benchmark sont réalisés afin de mieux cerner le contexte du projet et prendre connaissance de l’existant.

Une étape nécessaire afin de comprendre et formaliser les parcours utilisateurs. Ce travail sert de base pour l’atelier permettant définir la nouvelle arborescence.

02

Définir les parcours utilisateurs

Catégoriser le contenu pour répondre aux besoins utilisateurs

L’équipe projet est réunie afin de réfléchir ensemble aux meilleurs moyens de répondre aux besoins utilisateur lorsqu’ils naviguent sur le site.

Cet atelier permet de remettre en perspective les différents contenus existants et ceux que l’on souhaite ajouter.

Le benchmark réalisé en amont alimente les réflexions autour des entrées par profils utilisateurs, de la catégorisation du contenu selon les thématiques et les étapes nécessaires pour accéder au service souhaité…

Les contenus sont ensuite priorisés en fonction des besoins utilisateurs et de leurs futures actions sur la plateforme.

L’arborescence est conçue en suivant le déroulé des étapes répondant aux objectifs que les usagers souhaitent atteindre :

  • découvrir ce nouveau portail internet
  • comprendre la rénovation énergétique et découvrir son actualité
  • s’informer sur les différentes aides pour financer son projet
  • et accéder aux services permettant de rénover un bien immobilier
atelier de co-conception pour l'arborescence
Arborescence consolidée à la suite de l'atelier de co-conception
03

Atelier de co-conception des écrans

Hiérarchiser l’information et penser la structure des écrans

L’équipe projet est une nouvelle fois réunie pour travailler sur l’architecture de l’information et la structure des principaux écrans de la plateforme.

Les propositions d’interfaces réalisées en amont sont modifiées, annotées ou dessinées à nouveau durant l’atelier afin d’affiner la structure des pages.

Ce travail d’idéation permet de répondre aux principaux points bloquants identifiés :

  • créer des gabarits permettant de mettre en valeur le contenu existant et supplémentaire facilitant la prise d’informations par l’utilisateur
  • prioriser l’accès à la recherche d’un conseiller afin de finaliser sa démarche
Board blanc avec des papiers posés dessus
04

Sprint UX Design

Conception des wireframes au format desktop et mobile

Le sprint UX est lancé pour concevoir les écrans priorisés au format desktop et mobile en responsive.

La conception des différentes pages du futur portail permet de prendre du recul sur la disposition des composants et l’interaction entre les écrans.

Les différents blocs structurant les pages répondent aux besoins et enjeux définis en amont :

  • introduire les catégories avant de dérouler les étapes : par exemple “comprendre la rénovation énergétique” puis expliquer les différents types de travaux “audit”, “isolation”, “matériaux”…
  • faire preuve de pédagogie et de transparence en montrant des exemples de rénovations réussies
  • faciliter l’accès aux aides permettant de financer son projet
  • fluidifier la navigation en créant des entrées par type de logement
Conception et design de wireframes
05

Direction Artistique

Un design épuré et accessible à tous

La direction artistique de la plateforme est un savant mélange entre l’identité visuelle de la région Nouvelle-Aquitaine et France Rénov’.

Les différents blocs d’éléments constituant la plateforme sont pensés pour que l’utilisateur identifie rapidement leurs fonctionnalités :

  • les informations primaires et secondaires
  • les étapes d’une démarche à initier pour rénover un bien immobilier
  • le composant permettant de trouver et contacter un conseiller
  • etc

L’enjeu est de créer un design simple et compréhensible par tous afin de donner accès facilement et rapidement aux informations sur la rénovation énergétique.

Maquettes graphiques page d'accueil
Direction artistique typographie utilisée sur la plateforme
Direction artistique palette de couleur utilisée sur la plateforme
Composants du design system de la plateforme
Homepage de la plateforme
06

Maquettes graphiques desktop et mobile

Une plateforme multi-supports

L’identité visuelle validée, les écrans sont ensuite déclinés au format desktop et mobile.

Un design system est mis en place pour gagner en rapidité et en homogénéité lors de la conception, et faciliter le travail des développeurs.

En interne, la création de blocs de composants réutilisables apporte une plus grande flexibilité lors de la création de nouvelles pages par l’équipe éditoriale.

Penser les composants au format desktop et mobile (en responsive) nous assure de proposer une plateforme accessible à tous sur le maximum d’appareils.

Page d'accueil de la plateforme sur tablette
Maquettes graphiques des écrans réalisés pendant le sprint ui
Maquette graphique de la rubrique
Maquettes graphiques responsive en responsive design mobile
Zoom sur une maquette graphique en responsive design
Voir un autre projet