Naturgy — Interactive Bill (Case Study)

From panic to clarity: We turned Spain’s most dreaded envelope into an interactive explainer that finally makes energy bills make sense, right when people needed it most.

In the middle of 2020 energy price surge, Naturgy needed to rebuild trust by making electricity/gas bills understandable. I led discovery‑to‑design work that turned dense, legally constrained paper statements into an interactive, readable, self‑service experience.

Turned a one‑page wall of jargon into a step‑by‑step interactive bill that explains what you pay and why—built to respect Spanish legal disclosures, work with legacy systems, and scale across millions of customer data points.

Role

UX & Product Design Consultant @ Cloud District

Client / Market

Naturgy, Energy (Electricity & Gas Supply), Spain

Timeline

2020

Who might find this case interesting?

Leaders in regulated industries who must explain complex, legally required content without losing people. If your customer communications are accurate but unreadable, this shows how to pair compliance with clarity.

Teams living with legacy systems and messy data who need reusable patterns that scale across countless variants. This case demonstrates how to normalize complexity into stable UI components.

Product managers and designers turning static PDFs into interactive, self‑service experiences. If you’re aiming to cut support tickets by answering the question “why is my bill like this?” in‑product, this approach applies.

Jump to Project's Media and Screenshots ->

Overview

Energy costs spiked in 2020 and customer questions exploded. Naturgy’s brief sounded simple—“help people understand their bill”—but the reality wasn’t.

Bills were optimized for A4 PDFs and legalese, not comprehension. I partnered with product, legal, and engineering to reframe billing from a static artifact into an interactive explanation that reduces anxiety and restores confidence.

Strategic Discovery Focus

What do customers really look for? We audited current bills, mapped questions to support logs, and ran rapid content/card‑sorting exercises. Four recurring tasks emerged:

1. How much do I owe, and when?
2. Why did it change?
3. What is each line item?
4. What can I do to lower it?

Those tasks guided the information architecture. We applied progressive disclosure (top‑line → drill‑down), plain‑language microcopy alongside mandatory legal text, and inline explainers for concepts like tariffs, potencia, impuestos, and regulated fees. Content and layout were decoupled so the same logic worked for web, app, and exportable PDF.

Project Constraints (and how we used them)

• Legal disclosures in Spain: Required wording and order. → Designed dual‑layer content: legal text preserved; user‑friendly summaries adjacent.
• Legacy data and extreme variability: Each bill mixes contract, usage, and pricing rules. → Normalized data into stable UI patterns and reusable components.
• A4 heritage: The PDF shape forced dense layouts. → Reimagined for screen with sections, anchors, and sticky affordances.
• Crisis context: Trust at a low point. → Prioritized clarity, tone, and actionable tips over visual gloss.

Experience Principles

• Find the answer in one glance: Amount due, due date, period.
• Show the “why” next to the “what”: Deltas, drivers, and comparisons.
• Explain without patronizing: Plain language + mandatory terms.
• Never make the user redo math: Totals and subtotals always visible.
• Be verifiably correct: UI mirrors the underlying calculation model.

Key Design Decisions

• Progressive disclosure: Collapsible sections for charges, taxes, meter reads, and adjustments.
• Inline tooltips & definitions: Quick explanations for technical terms without leaving the page.
• Usage & cost breakdowns: Visual and textual summaries that attribute changes to rate, consumption, or taxes.
• Contextual help & next steps: Links to tariffs, efficiency advice, and support flows.
• Componentized bill schema: One system for many bill variants; easier maintenance for engineering.

Outcome

We delivered a validated information architecture, interaction model, and high‑fidelity bill explorer that product and engineering could implement across web/app. Stakeholders aligned on a single, testable source of truth for billing content. Qualitative reviews emphasized “finally understand my bill” moments, and the design set a foundation for measurable reductions in confusion‑driven support contacts.

Type of Company Fit

Enterprise utility · Highly regulated · B2C at scale · Multi‑channel (web/app/PDF) · Legacy systems.

Methods & Activities

• Research & audits (bill artifacts, support themes)
• Information Architecture & task modeling
• Card sorting & content design
• Expert review & field observation
• MVP definition & flowcharts
• Design system alignment (tokens, components)
• Tooling: Figma, presentations, spreadsheets for data mapping, Slack/Trello for collaboration

Core Deliverables

• Information Architecture & content model for interactive bills
• High‑fidelity wireframes and click‑through prototype
• Low‑fidelity flows and schema diagrams
• Benchmark & field notes (documentation)
• Navigation & interaction guidelines for web/app and exportable PDFs

What I’d Do Next (if extending the project)

• Instrument comprehension with quick, in‑context checks (e.g., “Was this clear?”)
• A/B test ordering of sections and copy variants
• Personalize tips based on usage patterns
• Publish a “billing glossary” component shared across help, chat, and product.