Skip to content

Rogers Communications · 9 min read

Making a bill readable before anyone has to call about it

Cart Summary is the first page in the residential buyflow — every customer, every path. People were leaving it, and the ones who stayed were calling to ask what they had just agreed to pay.

At a glance

Role
Product Designer — owned the journey end to end
Duration
Feb — May 2024 · discovery → design → A/B test
Platforms
Responsive website
Tools
Figma · UserTesting · ContentSquare · Jira
Team
1 Product Owner · 2 engineers — reporting to the buyflow lead

Shared with permission. Rogers figures are shown as relative change.

Challenge

The first page in the funnel

Rogers sells internet, TV and home phone as bundles. The residential buyflow runs Check availability → Add to cart → Cart Summary — and Cart Summary is where a customer sees, for the first time, the whole of what they have agreed to pay. It is the first step into the flow, so it touches every user type and every path through it.

Three things were happening on that page at once. People were exiting it. People who stayed needed the charges explained to them. And that explaining was arriving at customer service as call volume.

New-activation customers took the worst of it — the ones with no existing bill to compare against, and the ones the business most wanted to convert.

The constraint was the page's position. Because everything upstream and downstream passes through it, a small change carries outsized risk as well as outsized upside. Nothing went out without a test behind it.

Research

Four things the page was doing to people

I started in the behavioural data with the Product Owner, then went through the page itself line by line. Four problems came out of it — and the fourth was not one anybody had asked me to look for.

  1. 01The same message appeared in more than one place on the page. A repeated line does not read as a repeat; it reads as a second, different charge.
  2. 02Nothing in the hierarchy said what was required. A mandatory selection sat in its own section with no marker that it was mandatory, and nothing explaining that it referred to show recording. “Why is this in a separate section?” was a reasonable question to be left holding.
  3. 03The price was hard to calculate. Priced items were scattered across the page, and the subtotal still asked the customer to do arithmetic to arrive at what they would actually pay.
  4. 04Analytics showed customers travelling back and forth between two pages to compare packages. They were not abandoning — they were shopping, and the page had given them nowhere to do it.

Design

Read the bill without doing the arithmetic

Finding 04 changed the brief. Not every exit was a failure — a share of them were people leaving because comparison lived on another page. That reframed Cart Summary from a confirmation screen into a decision screen, and turned a drop-off problem into an upsell opportunity in the same move.

Three questions carried into design: how might we help customers understand what is included, understand how the total is calculated, and feel sure about what they have selected. One principle governed the answers — a customer should be able to read their bill off this page without doing arithmetic, and confirm their choice without leaving it.

  1. Split it in threeAccount Detail, Monthly Charges and One-Time Charges became three distinct groups instead of one undifferentiated list. Account Detail was then categorised by service — TV, Internet, Home Phone (optional), Hardware — so a customer reads down their own bundle rather than across a price list.
  2. Excel thinkingI gave Monthly Charges and One-Time Charges the same internal shape — line items, then that block's own discount, then that block's own subtotal — so the two read in parallel and each one totals itself before the grand subtotal appears. Separating monthly discounts from one-time discounts is the same move: a discount only means something next to the charge it applies to. The tradeoff is density, and a layout like that only works if alignment carries it, so alignment got as much attention as the copy.
  3. Bring the comparison inRather than send people back out to the package page, I put the next tier up directly beside what they had already chosen — same row, same shape, with only the price difference between them. A customer comparing Ignite Flex 20 against Ignite TV Premier never leaves the page to do it. It serves the up-sell, and it stops the business losing someone who only left to check.
  4. What I did not doI did not rebuild the comparison page. It is the better long-term answer and it was the wrong size for the risk this page carries. One tier up, in place, covered the behaviour the data showed without touching the flows on either side.

Account Details, read down your own bundle

Before

As shipped

  • One run of marketing copy — TV, internet, hardware explained in turn, none of it priced
  • Nothing to weigh a choice against, so comparing a tier meant going back to the package page

After

Redesigned

  1. 1

    Pictograms and marketing panels out

    The channel icons, the speed arrows and the teal explainer boxes were decoration on a page people arrive at to read numbers. Plain bullets in their place, and the block reads in one pass.

  2. 2

    The next tier up, in the same row

    The comparison that used to live on another page now sits beside what has already been chosen.

  3. 3

    Priced as the difference

    $20 more a month, not $115 a month — the only number needed to judge the trade is the one on the screen.

Impact

What moved

Every iteration went out behind an A/B test — the page's position in the funnel made that non-negotiable. 60 days after launch, drop rate on Cart Summary had improved 2.1% and overall buyflow completion was up 1.02%. On a page that every residential customer passes through, a point of completion is not a small number.

The gap I will name honestly: the third problem we set out against was call volume from customers asking what they were being charged for, and I do not have a number for it. The charges are now grouped and totalled so they explain themselves, which should reduce those calls — but should is not measured. It is the metric I would instrument next.

Shipped in 2024.

Reflection

What I took from it

The agile process is what made this possible — room to learn from a test, rather than defend a first answer through to launch.

Personal learning

Look outside the current solution

In-page comparison was on nobody's list.

It got built because the data said people were leaving in order to compare — not because anyone asked for it.

Personal learning

Ask why, not what

Those exits looked like failure. A good share of them were shopping.

The drop-off number on its own would have sent me fixing the wrong thing.

Related work

All case studies