Dario Codipietro

Utility Warehouse: Join funnel

As Lead UX Designer at Utility Warehouse, I redesigned the service steps of Join the Club, UW's acquisition funnel on the web, to simplify signing up for a multi-service bundle.

Role
Lead UX Designer
Year
2020
Team
dev team, UX designer
Shape
Eight months, in sprints
The redesigned energy details step in mobile and desktop, with the energy type and the meter type chosen from cards.

Outcome

After the mobile step was rebuilt for UW’s new tariffs, fewer customers left it, more orders had several SIMs, and customers picked the new Unlimited plan most often. When I analysed the funnel, I found that mobile was mostly lost earlier, at the choice of bundle. By December 2020 the energy estimate step, the mobile step in both its phases and full fibre on the broadband step had been built.

Context

Join the Club, JTC for short, is Utility Warehouse’s sign-up journey on the web. It starts with the customer’s address and a choice of three bundles, or one they build. Each service in the bundle then has its own step, for energy, broadband, landline and mobile, and add-ons such as the CashBack card come before checkout. UW’s self-employed partners sign customers up through the same journey, in person or in a remote appointment. A customer taking every service went through four service steps, each with its own questions and prices, before the add-ons.

I worked on it from June 2020 to February 2021, one service step at a time and in sprints, with partner feedback and the analytics in FullStory and Looker as inputs. The Sketch file that holds most of the work is called JTC Simplification.

Comparing the live energy quote with two simpler versions

The first of the live energy quote’s three steps asked for annual use in kWh, prefilled at 4,000 for electricity and 7,000 for gas, with checkboxes for an Economy 7 meter, a prepayment meter and not knowing the figure. The tariff list after it showed each tariff’s cost for a year, and the quotation page showed both cost projections and the important information in full. In July 2020 I laid the live steps out on a Miro board, beside two simpler versions of them.

The live journey, July 2020. On the tariff list, the greener tariffs came with the saving from adding mobile to the bundle, and the current tariff with a button to keep it.

01Energy

Estimating usage without a bill and comparing tariffs on one page

The live step asked for a usage figure that customers find on a bill, and had a checkbox for those who did not know it. In June I had redrawn the energy details step, in mobile and desktop, and replaced its form fields with a card for each answer. Usage came in Low, Medium and High bands, each described by the home it suits and showing an editable estimate in kWh, so a customer without a bill could start from the kind of home they live in. A fourth card was for customers with a bill to hand. Payment became two cards, Budget Plan and Monthly in arrears.

For the tariff list and the long quotation after it, I set two directions side by side on the board. A colleague kept the tariff list and cut the quotation down to one card, a link to switch to a variable tariff and three accordions for the costs and the terms. I merged the list and the quotation into one page, with the tariffs and the terms together. Each tariff became a card priced per month, like the other services in the bundle, with the extra saving per year and the services it comes with. The variable tariffs sat behind a toggle above the same accordions.

A colleague’s quotation. In UW’s purple, with the tariff’s terms as three ticks on the card and Continue as the only action.

Merged quotes page. The services a tariff does not come with are greyed out, mobile on Gold and LED bulbs on the plain Green Fixed.

The Sketch file has both directions. The MVP page, close to the colleague’s version, has a single quotation per tariff and a fixed or variable toggle, and the merged page is the aspirational version. In the MVP, the Gold quotation has a line offering an upgrade to Double Gold at any time.

Prefilling the energy estimate from questions about the home

By November the estimate step was built. Its bands came from national averages, with Medium preselected. The Energy Refinements board shows it in a browser, with the meter type down to Standard or Economy 7 and prepayment moved to its own question on how the customer pays.

On the same board I drew the next change, which added questions at the address step on whether the home is a flat or a house, how many bedrooms it has, whether the customer owns it and whether they moved in within the last three months or owned their previous home. From those answers the energy step would open on an estimate fitted to the home, which the customer could edit in place. I drew the address questions in two versions as prototypes for a test, each adding one question at a time and ending on a test-complete screen. In the second version I merged the move-in date into the ownership question, which then had two yes answers, before September 2020 or more recently, and the address step had one question fewer.

Address questions, November 2020. A wireframe with a placeholder address. On the board an arrow runs from this frame to the built energy step.

The estimate step as built. A browser capture from the same board. Beside the Medium band sits an info panel about quoting from the real usage on a bill.

02Mobile

Selling SIM packs on the new mobile tariffs

The mobile step changed in September 2020 with UW’s new tariffs, Unlimited at £20 a month for the first SIM and £10 for each additional one, and Value at £10 a SIM. The existing step added SIMs one at a time, and on Unlimited the saving came on up to three SIMs after the first. The step was rebuilt for the new tariffs in two phases, both in the Sketch file.

In Phase 1, the release dated 5 September 2020, a new tariff choice and a new order summary were added either side of the existing handset and details pages.

Two sprints later, in Phase 2, those pages were replaced. The customer first picked up to four Unlimited SIMs, with the monthly saving for each pack shown before any handset. They then added a handset and set budget control and number transfer for each SIM, and checked out from an order summary.

The existing handset page. A paged grid of handsets with filters for brand, operating system, price and stock.

The existing details page. Budget Control and a new or kept number for the SIM, with Save and add another mobile for each one after the first.

Measuring the mobile step and finding where mobile was lost

In November I analysed the mobile step and the bundle steps before it on a Miro board, with Looker dashboards and FullStory conversion funnels, to check the September update and find where else in the journey mobile was lost.

ValidateThe September update, before against after, in Looker.

InformSix questions on the bundle and mobile steps, each answered with a FullStory conversion funnel and an insight written beside it.

After the update, fewer customers dropped out between the mobile page and its summary, and more orders had more than one SIM. Unlimited, which had not existed before, was the plan chosen most often.

Mobile was mostly lost earlier, at the choice of bundle. Many customers did not like the default bundles and built their own, and many of those removed mobile from it. Customers who picked a bundle with mobile rarely dropped out at landline or broadband. Few abandoned the journey at the bundles page itself, although I marked that metric as one that could still improve. Only a minority of customers without mobile took the upsell later in the journey, and I noted that the offer was not showing enough value. I wanted to ask partners why some customers went back from the mobile step to drop it.

Partners had also asked for one of the mobile pages to go. Very few customers dropped out there, and I noted that it could be removed. Some customers clicked cards more than once, because the hover and pressed states shared one dark purple. It was the only interface issue on the board, and it had bothered us since we started on JTC. I recommended a distinct style for each state, to show customers that a card was chosen.

03Broadband and add-ons

Showing each address the broadband it can take

By December 2020 full fibre was in UW’s range, and the tiers the broadband step could offer depended on the address. A greenfield address could only take Full Fibre 100 or 300, both broadband-only. A warning said that calls, including to 999, would need a mobile or an existing line, and that alarm and medical diallers would not work. A brownfield address kept the copper tiers, Standard, Ultra and Ultra Plus, with a landline to add.

From August 2020 I had collected the broadband offers of BT, EE, Plusnet, Sky, Now Broadband, Virgin Media, TalkTalk and Vodafone on a Miro board of competitors, to analyse what other providers offered. In the first iteration I drew the step for each mix of tiers an address could return, from a single option to all five, and tried all five as a list and in cards. Another page has a multi-room router with three eero extenders.

Copper tiers, December 2020. The step as built for an address on copper, with each speed given as a maximum.

Full fibre, December 2020. The same step for a full fibre address. Speeds come as a range with a minimum, and the warning sits between the tiers and the router choice.

Redrawing the CashBack and cover steps before checkout

The CashBack card step came last before checkout, and on the live step its pitch sat behind three tabs. I put how the card works, the savings calculator and the retailers on one page, with the choice to add the card or go to checkout after each part. For boiler and home cover, the live step took only a request for details by email. I drew a way to add cover in the journey, with its start date and policy documents, so customers could take it out with the rest of the bundle.

Keeping the monthly price in view at every step

On one page of the Sketch file I redrew the whole journey, from the address questions to the quote, with two kinds of navigation. The first has a step bar for broadband, mobile, energy and the quote. In the second, a running monthly total sits in the header and the quote so far opens over each step, itemised with the saving, so customers can see what the bundle costs as they build it.

Customers kept signing up through Join the Club, on their own or with a partner, while each of its steps changed. The simplified journey is in the Sketch file as I last saved it, in February 2021. In it, the questions about the home come up front, and in one of its two navigations the price sits beside every step.

Sources

  • Join the Club journeysSketch, June 2020 to February 2021
  • Energy quote and refinements boardsMiro, 2020
  • Broadband and full fibre boardMiro, December 2020

Contact

Get in touch

Product design lead across research, design systems and handover, with coding agents in the loop. Contract, outside IR35, or a permanent lead role.

Available
Now
Location
London, remote or hybrid, UK and EU
Right to work
UK settled status, EU citizen
  • RolesLead Product Designer, Principal Product Designer, Design Engineer
  • Experience10+ years
  • ScopeResearch, design systems, prototyping, handover, QA with agents
  • LanguagesEnglish, Italian, Spanish
  • Email[email protected]
  • LinkedInlinkedin.com/in/dariocodipietro

Professional profile

Copy into your coding agent

Skills

  • Product design, end to end
  • UX and interaction design
  • Visual design and motion
  • Prototyping in Figma and code
  • Design systems at scale
  • User research and testing
  • A/B testing and analytics
  • Strategy and discovery
  • AI product design
  • Design to code, with agents
  • Accessibility, WCAG 2.2 AA
  • Leadership and mentoring

Platforms

iOS, Android, responsive web, smart TV and connected devices

Sectors

  • AI products
  • B2B SaaS
  • Consumer apps
  • Streaming, media and sport
  • Health, wellness and food
  • Legal tech
  • Telecoms and utilities

Tools

  • Figma
  • FigJam
  • Figma Make
  • Claude Design
  • Framer
  • Axure RP
  • Storybook
  • Claude Code
  • Cursor
  • Codex
  • MCP
  • GitHub
  • Linear
  • Jira
  • Confluence
  • Notion
  • Miro
  • Prolific
  • Lyssna
  • Maze
  • PostHog
  • Amplitude

Send a message

Tell me about the role and when it starts, and I will reply by email.