selected work

engie chatgpt widget

Interactive data visualisation widget built for Engie, following their branding system. A ChatGPT-embedded experience.

client
Engie
role
Product Designer & Frontend Developer
timeline
2026 · 2 weeks
tags
  • ux
  • design systems
  • branding
  • ai

Impact

The work began as my own initiative rather than an assigned brief, and that is what it turned into:

  • Invited onto the Engie engagement - I jumpstarted the exploration myself, and that initiative is what brought me onto the work.
  • Invited to present to Engie's board - after the internal demo the project went in front of leadership, rather than staying a side experiment.
  • Talks on the process, inside and out - I gave in-depth sessions on how the work was approached, both at Engie and internally at my own company.
  • First to explore the ChatGPT Apps SDK - the first in the company to build on it, which is what made the exploration possible before there was a brief asking for it.

The exploration is now being considered for a production implementation as a new customer-facing channel.

About

A ChatGPT-embedded experience for Engie that gives customers clear, interactive visualizations of their energy consumption and contract, suggests realistic advance payments, and flags whether they'll pay more or less than expected, all through a conversational interface powered by a custom MCP server.

Problem

Engie customers struggle to understand their energy usage patterns, whether their advance payment is set correctly, and what they can do to optimise costs. The information already exists, but it is spread across multiple screens and needs manual interpretation, which is what makes it hard to act on.

User Flow

A customer opens ChatGPT with the Engie app context, asks about their households, and immediately sees their data. They can request a consumption graph, filter it by date range, hover for details, and prompt the agent directly from the widget to analyze trends or suggest optimizations. For advance payments, the agent compares past usage against the contract and recommends an adjusted amount, flagging overpayment or underpayment before the next billing cycle.

Features

  • Interactive consumption graph - filtering by month and hover detail, so a usage pattern can be read rather than reported.
  • Two-way prompting - the user can ask ChatGPT to analyse the data from inside the widget, so the question and the chart stay in one place instead of the conversation restarting around them.
  • Advance payment tools - view, edit, and get AI-suggested values derived from actual consumption rather than a flat estimate.
  • Household management - view, update and delete records, all written through to the real database, so the widget is a working client and not a mock.

Design Approach

The hard part was belonging to two design languages at once: the widget has to read as Engie while sitting natively inside someone else's product.

  • Engie's design system carried over - colours, typography and spacing stay on-brand, so customers recognise who they are dealing with even outside an Engie surface.
  • Built for a constrained viewport - ChatGPT offers a narrow column beside chat bubbles, not a dashboard, so the layout was designed to that limit rather than scaled down into it.
  • Minimal chrome, clear data hierarchy - the visualisation has to be legible at a glance, because every second spent decoding it is a second spent out of the conversation.