Hydro-Quebec . Design system

Desktop & smartphone interface

Lead UI

2022

Workshops with Heads of AL Clusters

Objectif

Update, simplify and optimize gas distributor’s digital tool for selling cylinder gas, services and equipments to customer

DI 2.0 Dashboard

Context

A reliable tool widely used in Europe (deployed in 11 countries , 5 000 distributors using MGP, 400 000 customers (SH)

Mainly focused on logistics and administrative functions

    • Transaction: Gas, contract management, cylinder movement…
    • Distributors deliveries management
    • Distributor’s reordering to AL
    • Partner inventory management
    • AL – distributors communication tools
Meet with AL distributors

My role

I led the design of « Distributor Interface » for mobile and desktop since the outset of the project in March 2018.

Up until August 2019, I led efforts to evolve the service and address distributors pain‐points related to their job and Airliquide business rules.

The mains pain points

One of the principal pain points for distributors was their way to manage products. To track cylinders they used a barcode, scannable with a divice without screen. It was very painfull because the distributor unknow if he have correctly scan all cylinders he needs.

The second principal pain points was the complexity of their software. Old and very unpractical, many bugs were disturbing the distributors during theirs Job Flow

Old tool - My Gas Partner: user research during a visit onsite

Stay agile with teams

TO facilitate the coordination between Designers (Factory), Head of clusters (Europe), Project managers (Defense) and developers (Capgemini) an agile method has been implemented.

  • Kickoff
  • Weekly teams
  • UATs
  • Workshops
  • Backlog review
Jira's Backlog

Design an omincanal saling tool

Airliquide’s customers use MyGaz to buy gaz cylinders. When an order is created by a Welder the distributor receive a notification with which product he could deliver to his customer.

To fit with MyGaz, Airliquide asked me to respect the UI of MyGaz

Left: My Gas - Right: first design approach

Responsive design & PWA

After several interface tests, I managed to convince the teams to break away from the design of MyGas and to design a new ergonomic, modern and responsive base.

To facilitate the scan of the barcode I decided to push the idea to develop a mobile application to help distributors during their sale’s process.

Old scanner - New DI 2.0 PWA

Atomic design

In parallel with this project, I worked with the design teams to develop the Air Liquide design system. The DI 2.0 project was a test of our atomic design

Atomic design

In parallel with this project, I worked with the design teams to develop the Air Liquide design system. The DI 2.0 project was a test of our atomic design

Atomic design based on Air Liquide's design system

Improve the sales process

The process to make a sale in complex. The system need to check many informations to validate if the sale can be validate or not.
We identified 5 mains steps to lead a sale:

  • Cylinders’s barcode validation
  • Customer attribution
  • Sales parameters: date of delivery / discount / fees …
  • Contract validation / creation
  • Delivery note edition

To make these steps simpler, clearer and more intuitive, we have designed a stepper that separates all of the tasks that distributors must do throughout the sales flow.

Leave a Reply