Overview Problem Space Objectives High-Level Audit New User Flow Step 1: Customer Identifier Step 2: Help Topics Step 3: Selfcare Customer Experience Retrospective

Improving support contact form for retail customers

Case study of web contact form redesign at ENGIE

Overview

In 2025, ENGIE’s customer support team pinpointed a high reiteration rate of customer help requests generating costs and impacting customer satisfaction.

During my apprenticeship, I’ve worked with the Help & Support Team to identify pain points and co-create a new experience for the contact form.

The contact form was shipped in mars 2025 and deployed after my apprenticeship and teams are starting to see the impact on OKR.

My Role

UX Designer

Timeline & Status

3 Months (2025), Shipped

Team

1 Project Manager
1 UXD (me)
1 UXW
1 UID
2 Devs

Problem Space

Customer support became highly expensive.

Customer support observed a high reiteration rate on customer requests following an internal analysis.

1 out of 5

help request is repeated with support.

1/3

of customers are not satisfied following their help request.

A large share of support requests concerns customer-related topics.

Chart: Help requests by theme

As a result, we’re seeing...

An increase in customer dissatisfaction.

Higher processing costs per support request for ENGIE.

PROBLEM STATEMENT

How might we improve the contact form to streamline the user experience and reduce help requests reiteration rate?

Objectives

Key challenges & North Star Metrics.

Streamline user experience and improve clarity.

→ Improve customer trust and satisfaction

Reduce help requests reiteration rate.

→ Decrease processing costs per request

Better route requests and optimize response times.

→ Better leverage customer support skills

High-Level Audit

A full obstacle journey.

An excessively long page

The contact form is built as a single page that grows according to user choices, resulting in a very long scrolling experience.

Customer identifier: a barrier to accessing the form

Frequently ignored, this step requires user to look after invoices to get their customer identifier.

Prone to errors, the input field lacks any formatting or validation to prevent mistakes.

Help topics are behind dropdown menus

Dropdown menu are poorly glanceable and raise interaction cost to pick a help topic.

Missing topics and imprecise labels can lead to confusion.

Generic and poorly personalized assistance

The FAQ content lacks relevance to the selected theme.

The component looks like a selector, leading to unclear affordances.

Menus are collapsed by default, increasing interaction cost.

Legal disclaimer following a cross-selling section

Cross-selling appears unexpectedly at the end of the form, potentially triggering user reactance.

Legal disclaimer is long and requires significant cognitive effort to read.

New User Flow

Starting from what we already had.

From single page to progressive steps

As the single-page layout generate high cognitive load combining multiple tasks and steps, we’ve broken down the page into successive steps using the progressive disclosure principle.

Step 1: Customer identifier

Fixing the access to the form.

Customer identifier isn’t always required

In most cases, identifying the customer upfront is unnecessary. The customer identifier had become a barrier to accessing the contact form.

We introduced a login flow that encourages customers to sign in while leveraging their customer data.

Designing a dedicated login step

The login step try to encourage sign-in without forcing it. Through rapid prototyping, we’ve explored different uses cases to picture user journey.

1. An information banner with a hyperlink?

Non-blocking for users, who can choose whether or not to sign in.

Low engagement, and therefore likely to be ignored by users.

2. A modal dialog?

May be perceived as intrusive and trigger user reactance.

Technically challenging and expensive to build.

3. Or a dedicated login page?

Follows previous step and can be perceived as part of the user journey.

An existing page, requiring no additional development cost.

May be perceived as a constraining step.

Following team discussions, a dedicated login page was identified as a viable trade-off, limiting development cost while keeping sign-in optional for end users.

Step 2: Help topics

Better qualifying and routing requests.

Improved glanceability for help topics

Rather than dropdown menus, we designed cards to improve help topics glanceability while ensuring clarity and quick understand through microcopy and illustrative icons.

Step 3: Selfcare

Leveraging self-care.

Fixing the frequently asked questions area

The first step of self-care is to ensure the issue hasn’t already been resolved. The topic-specific questions make this area more relevant for user while narrowing down help requests to specific issues.

Before

Affordance issue could lead to low engagement

FAQ collapsed by default raise interaction cost

After

New component fixes misleading affordance

Microcopy clearly adresses the problem

First FAQ open by default reducing interaction cost

Driving towards action

When FAQs don’t resolve the issue, the self-care step introduces an action-oriented component with a clear call to action. This CTA directs users to existing webpage or in the customer interface to help resolve simple.

Customer experience

Tailored experience for customers.

More personalized experience

Signed-in users benefit from a more contextual support experience. Personal data is used to pre-fill and narrow down help requests, reducing effort and improving relevance.

More personalized experience

Signed-in users benefit from a more contextual support experience. Personal data is used to pre-fill and narrow down help requests, reducing effort and improving relevance.

Guest

Customer

retrospective

What’s happening when you send a customer request.

What I learned from this project.

Key learnings

Data-informed design

Relying on data helps uncover user behavior patterns and turn them into actionable insights, grounding design decisions in evidence.

Embracing trade-offs

I learned that trade-offs are often essential balancing user needs, technical constraints, and business requirements.

Cross-functional collaboration

Collaborating with other roles showed me value of cross-functional input in shaping cohesive experiences.

Joe thanks you for reaching this far!

← Back to projects

Next project

Filiz

UX/UI Design

SAAS

Streamlining contract creation workflow for training centers

Designing MVP from 0 to 1 allowing training centers to reduce by 80% creation process of apprenticeship & internship contracts.