LaetitiaBournazac

COMPANY

GRDF

Mon espace grdf.fr is the private platform of grdf.fr, the unique gas distributor in France.

The main users are : 

* Companies

Local/regional authorities

Private users/individuals  

The platform main services are :

* Register their gas meter number to facilitate online meter reading.

Visualize gaz consumption data, and monitor it.

Learn how to manage the energy consumption.

Take appointment for different installations from the company.

 

brief

Redesign user journey by service design & UI accessibility

Type

Web, tablet & mobile

Duration

Nov 2019 - Nov 2021

role

Research, conception, design, test & iterations

mon espace

Project overview

CHALLENGES​

1 - RGAA Accessibility & graphic design of the website

A RGAA accessibility audit was carried out by Temesis agency in January 2019 on the first version of monespacegrdf.fr, the compliance rate was under 39%. The redesign project aims to greatly improve this rate in 2020 by applying the recommendations of accessibility. Monespacegrdf.fr must adopt this new accessible design on all its screens in order to guarantee a coherent brand and fluidity between the public and private spaces, mon espace grdf.fr must adopt this new accessible design on all its screens.

2 - Listen to the users and build special features for their needs

An ergonomic audit in December 2018, showed that the website did not answer to every users needs leading to a big complexity in the pathways . Eg : The user flows were so complicated that the users couldn't even connect to their account after creating one.

3 - From a website to service design : improving the different user journeys

The services provided by GRDF were the same for all the users whereas their needs are specific and slightly different. This allow a great room for improvement to optimize their experience and create dedicated services for each different user.

Method & Planning

kickoff

As a lead UX/UI and in order to answer the brief in the most accurate way,
I developed a ux/ui design strategy dedicated to the project. It details every steps & deliveries.

The strategy is divided into stages using the iterative method of :

*Research: protocols, interviews, persona, experience map.


*Design: workshops on new user paths, co-design workshop, wireflow, wireframes, mock-ups.


*Test: protocols on several user paths, user recruitment, prototype of the model, feedback and recommendations.


*Analyse: KPI, collecting data, analyse data and recommendations.

Observe & get inspired

benchmark

I conducted a benchmark of few similar websites in order to observe the market. The study is a bit biased as grdf is the only gas distributor in France, I had to select other energy suppliers companies.
Ex : EDF, Engie, Total Direct energie…

Key learnings:
*Have a simple and dedicated connection for each type of profile, in order to have specific services and explanations to convince them to create an account and the benefits of using the website.
*Energy can be scary and complexe to the users. 

Propose a « user friendly » interface to guide users and encourage them to use the services. 

Propose data with simple and understandable vocabulary for all types of users, while educating them.

Analyse

audit

Before redesigning the site, I performed a heuristic evaluation using the famous Amelie Boucher’s method. This method allows to inspect the usability of a product by identifying the problems of the user interface. This is done using examination criteria that will be used to judge if the interface correctly meets the recognized usability principles.

Key learnings:

*Problems of accessibility, and understanding of the navigation.


*The information hierarchy is not readable, which makes the content confusing, it is also very technical.


*Some web conventions of use are not respected, which blocks the user in its journey.

*The services that are offered are not suitable for all users.

Peel off

Analyze data & satisfaction

In order to understand the usage and the blocking points of the journey, I analyzed the usage data of the website which was at that time in production mode.

Key learnings:
*The main target of the website is the private individual user who owns one or two house/apartment.

*The users go mainly on the web to explore their data.
*Only few users accredit their meter numbers on the site, which is the only step to unlock their data.
*A lot of abandonments are from the login and account creation process.

Meet & Understand

interview &
persona

User recruitment - protocols - interview guiding - personas

Through individual interviews, we will investigate the habits, behaviors, needs, expectations, frustrations, and problems of the users. Workshops allow me to define who are the users to study, as well as the subjects of the study.

Interview protocols and observation grids were created to frame our field interventions.

 

Key learnings:
*The services proposed by the website are confusing  « i don’t know where to clic, or where to go » « i feel that some content is not for me »
*The data is complex and very technical « i don’t understand what does this means, maybe you can help me ? »
* Companies & communities need to view bulk data because they have an big amount of gaz meters. « I can’t switch from one detailed graph to another, i need aggregated data »

Deconstruct

Experience maps

Workshop - experience maps

Crucial tool for understanding users. It allows to see how people in contact with a service or a product are impacted.

Each persona is staged via an experience map of its main journey. This will be defined according to the different tasks to be performed by the user.

Imagine a story

storyboard

workshop - drawing

Use the power of storytelling to represent a service in the form of steps in which users are represented while including elements from the research (touch points, context, problems encountered, opportunities discovered…).

Imagine, as one tells a story, the new user journey: the actors, the initial situation, the triggering element, the adventures, the ending.

Create

user flow & ecosystem

workshop - flow charts - wireflow

Define the functionalities in a simplified interface flow but establishing the whole path and tasks of the users. A schematization of the steps (via flowcharts or wireflows) will allow the design of the ideal paths we want for the user. Workshops will be used to integrate users and stakeholders in a collaborative ideation process.

Key learnings:
* From the same platform create 3 different type of users allowing them to acces to some similar services but also dedicated ones for specific needs.

* Integrate a password security module, and allow users to generate a new password. (Including double verification & specific caracters)

– 

* Build back offices to be more efficient on the client support and be more autonomous in the content contribution for internal teams.

co-create

wireframe

Role : 6 to 1 workshop - wireframes on figma

From the paths and content we will be able to organize the information on schematic screens (wireframes).
The goal is to focus on functional design without doing graphic design. This allows us to think about ergonomics, accessibility, and intuitiveness before doing the aesthetics.

Challenge

User test

Role : User recrutment - Protocol & prototypes - Test guiding - analyses - recommandations

This phase allows to put the stakeholders in action on the design of the pathways and the service for the users.

Remotely, we set up usability tests to ensure that what we have designed works properly for all the profiles identified in the research phase.

design

Mock-ups & prototypes