Design Systems Product Designer @ BT Group

This site is built to WCAG 2.2 AA. See how

UX Design

Where’s my broadband?

I rebuilt Plusnet’s broadband order tracker from the ground up, so new customers can see exactly where their order is without picking up the phone.

  • 9%

    Of customers calling during setup, down from 11%

  • 5

    Customer satisfaction score, up from 3.49

  • 10%

    Of customers cancelling before install, down from about 12%

Three phones showing the new order tracker: the tracking history with engineer and router updates, the Track your order screen with the completion date, and choosing a new engineer appointment Three phones showing the new order tracker: the tracking history with engineer and router updates, the Track your order screen with the completion date, and choosing a new engineer appointment
Role
Product Designer
Company
Plusnet (BT Group)
Timeline
2022–2023
Team
PM, research, content, engineering
Platforms
Mobile web, React, Figma

Customers were left guessing

New Plusnet customers waited in a ‘Get’ state until their broadband went live. They could log in to the Member Centre straight away, but the home page and a separate Order Tracker page told them very little about their order.

So they picked up the phone. Around 11% of new customers called during setup, and nearly 12% cancelled before their install.

The old Broadband Order Tracker, a long list of steps such as Signup, Checking your line and Activating your line, next to the old Member Centre home page, a long page of account details and small print The old Broadband Order Tracker, a long list of steps such as Signup, Checking your line and Activating your line, next to the old Member Centre home page, a long page of account details and small print
The old tracker: a list of system steps, not answers.

The brief

How might we answer customers’ questions about their order, before they need to call?

I led the design: discovery research, workshops with the squad, prototyping and testing, through to the designs we built.

Success looked like

  • Calls during setup down from 11% to 9%
  • Customer satisfaction up from 3.49 to 5
  • Cancellations before install down from 12% to 10%

Constraints

  • Broadband and phone line orders only, before activation
  • Built in React, inside Plusnet’s existing Member Centre
  • Updates had to cover things going wrong, too

Listen first, then test every path

I started with what customers expected to see after ordering, then tested a prototype against it, covering the orders that go wrong as well as the ones that go right.

  1. Listen

    Interviewed customers about what they expect after ordering broadband, and sat in with call centre agents to hear why people call.

  2. Agree what matters

    Turned the findings into six user needs, then ran a Build Measure Learn workshop with the squad to agree what to change.

  3. Test every path

    Tested a mobile prototype with five people across four order scenarios, happy and unhappy, then refined it for build.

Before

A close-up of the old Broadband Order Tracker: the same weight for every step, such as Signup, Checking your line and Activating your line, and no dates A close-up of the old Broadband Order Tracker: the same weight for every step, such as Signup, Checking your line and Activating your line, and no dates
Every system step, same weight, no dates.

After

The new tracker on a phone: the completion date and latest update at the top, then a timeline of each step with its date and status The new tracker on a phone: the completion date and latest update at the top, then a timeline of each step with its date and status
Completion date and latest update first, the detail one tap away.

Behind the scenes

Close-up of the Build Measure Learn canvas: the Should we? column, with sticky notes of user needs and business goals Close-up of the Build Measure Learn canvas: the Should we? column, with sticky notes of user needs and business goals
Build Measure Learn canvas: what to change, and why.
Close-up of the affinity map: two prototype screens surrounded by colour-coded sticky notes from the testing sessions Close-up of the affinity map: two prototype screens surrounded by colour-coded sticky notes from the testing sessions
Affinity map from testing the prototype with five people.
Design exploration: a row of tracker screens for different order states, including delays, problems with the order and the full tracking history Design exploration: a row of tracker screens for different order states, including delays, problems with the order and the full tracking history
Every state mapped out before we built a single one.

Key decision

Lead with the latest update, not every step

The old tracker gave every system step the same weight. Customers told us they just wanted to know what’s happening now, and when they’ll be connected.

Option A: Show every step

Thorough, but the one update that matters gets lost in a long list of system jargon.

Option B: Latest update first

Chosen

Completion date and latest update at the top, with the full history one tap away. Clear at a glance, detailed when needed.

Four screens of the chosen design: the completion date and latest update at the top, with the full tracking history opening below Four screens of the chosen design: the completion date and latest update at the top, with the full tracking history opening below

Fewer calls.
Clearer orders.
Within weeks.

Plusnet launched the new tracker as an 80/20 A/B test against the old one. Calls to the call centre dropped by 38% within weeks, with real-time updates on engineer visits, router delivery and go-live dates, and a clear next step when something goes wrong.

Three screens from the launched tracker. Clear at a glance: Track your order, with the completion date. Help when it goes wrong: a message that something has gone wrong, with a button to request a different appointment. Sorted without a call: confirmation that the new engineer appointment request has been received Three screens from the launched tracker. Clear at a glance: Track your order, with the completion date. Help when it goes wrong: a message that something has gone wrong, with a button to request a different appointment. Sorted without a call: confirmation that the new engineer appointment request has been received
Built in React and launched as an 80/20 A/B test.

What I learned

  • Unhappy paths are when people call
  • Plain words beat system steps
  • Call centre agents know the real questions

What I’d do next

  • Use the new reporting to keep refining
  • Add the features held back from the MVP
  • Let customers rebook engineers themselves
“On the order tracker, Stefan was always open to new ideas, but challenged them pragmatically wherever it mattered for our customers.”
Paul Scott Product Manager @ Plusnet

See more of my work

Design Systems

Loop Multi-brand Design System

Rebuilt EE's design system to power BT, EE and Plusnet from one foundation, now used by over 650 people at BT Group and reaching 25 million customers.
Design Systems

Loop Figma Debug Tool

Gives designers a one-click way to spot mistakes in their files before developers do, now used by over 350 people a month across BT, EE and Plusnet.

Let’s talk about what’s next...

Or we can talk video games, golf or skateboarding :)

Message me!
Video description

Stefan Adams: The S-N of Stefan A hand-drawn animation, set to music, that spells out my name one letter at a time, each with something that says a bit about me.

  • S is for skating
  • T is for making tea 24/7 for my wife - never finishes!!!
  • E is for easy going… unless there’s jellyfish
  • F is for making food (mostly hot Mexican food)
  • A is for Apple
  • N is for never too many shoes!!!

The end. The whole thing by Stefan Adams.