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
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
