Dario Codipietro

Case study · 2020 · Lead UX Designer

Utility Warehouse: Join funnel

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

Role
Lead UX Designer
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.

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, then has a step for each service in the bundle, energy, broadband, landline and mobile, with add-ons such as the CashBack card before checkout. UW’s self-employed partners sign customers up through the same journey.

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.

Mapping the energy quote journey

In July 2020 I laid the live energy steps out on a Miro board, beside two ways of changing them. The first step 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.

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

Redesigning the estimate and the quote

I redrew the energy details step in June, in mobile and desktop, with a card for each answer in place of the form fields. Usage came in Low, Medium and High bands, each described by the home it suits, with its estimate in kWh shown and open to editing, and a fourth card for customers with a bill to hand. Payment became two cards, Budget Plan and Monthly in arrears.

For the quote I set two directions side by side on the board. A colleague kept the tariff list and cut the quotation after it 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. Each tariff became a card priced per month, with the extra saving per year and the services it comes with, and 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.

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

Estimating usage from the property

By November the estimate step was built. 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, questions at the address step on whether the home is a flat or a house, how many rooms 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 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 folded the move-in date into the ownership question, with two yes answers, before September 2020 or more recently.

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. Medium is preselected, beside an info panel about quoting from the real usage on a bill.

02Mobile

Rebuilding the mobile step in two phases

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. In the Sketch file the rebuild runs in two phases.

The rebuild ran in two phases. The Phase 1 release, dated 5 September 2020, put a new tariff choice and a new order summary either side of the existing handset and details pages.

Two sprints later, Phase 2 replaced those pages. The customer picked up to four Unlimited SIMs first, with the monthly saving for each pack, 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. One SIM at a time, with Save and add another mobile for each one after the first.

Reading the funnel in FullStory and Looker

In November I read the result of the update, and the bundle steps before it, on a Miro board with Looker dashboards and FullStory conversion funnels.

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. Customers who picked a bundle with mobile rarely dropped out at landline or broadband, but many customers did not like the default bundles and built their own, and many of those removed mobile from it. 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, which I read as an offer 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. It lost very few customers, and I noted that it could be removed. The one interface issue on the board, known since JTC began, was customers clicking cards twice because the hover and pressed states shared one dark purple, and I recommended a distinct style for each state.

03Broadband and add-ons

Adding full fibre to the broadband step

From August 2020 I collected the broadband offers of BT, EE, Plusnet, Sky, Now Broadband, Virgin Media, TalkTalk and Vodafone on a Miro board of competitors. By December full fibre was in the range. A greenfield address could only take Full Fibre 100 or 300, both broadband-only, with a warning 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.

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.

Add-ons and a running quote

The CashBack card step came last before checkout. On the live step the 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, where the live step took a request for details by email, I drew cover added in the journey, with its start date and policy documents.

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, itemised with the saving, opens over each step.

Outcome

The estimate step, both phases of the mobile step and full fibre on the broadband step were built between September and December 2020. In Looker, fewer customers left the mobile step after the update, and more orders had several SIMs.

Customers and partners kept signing up through Join the Club while each of its steps changed. The simplified journey, with the questions about the home up front and the price beside every step, is in the Sketch file as I last saved it, in February 2021, a month before I left UW.

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.