Digital Alchemy | TalkTalk UI
page-template,page-template-full_width,page-template-full_width-php,page,page-id-1787,page-child,parent-pageid-1584,theme-stockholm,woocommerce-no-js,ajax_fade,page_not_loaded,,select-theme-ver-4.5,menu-animation-underline,wpb-js-composer js-comp-ver-5.5.2,vc_responsive

TalkTalk UI

Effortless UX combined with beautiful and functional UI is our methodology for customer centric design, where decisions are validated with real customers, and insights from observed customer behaviour.

The Design System

TalkTalk Design Systems lead to more cohesive, consistent user experiences across TalkTalk ecosystem. We created it to speed up team workflows, have one unified design language that saves huge amounts of time and money in the process. They make browser, device, performance, and accessibility testing easier and serve as a solid foundation to build upon over time, helping TalkTalk to easily adapt to the ever-shifting web landscape.


The principles

At TalkTalk, we took inspiration from Atomic Design methodology – a system that promotes consistency and scalability while simultaneously showing things in their final context – it is a hierarchical way of organising our design patterns.

Baseline Pattern Library - IOTAUX Rules - Axure (WIP)

The pattern library

TalkTalk pattern library is a repository of reusable components and interactions. It houses components such as buttons, modals, and page layouts. They go hand in hand with TalkTalk style guide as it rely on consistency in form and look.

Pattern Library - Frontify (WIP)TalkTalk Brand Style Guide

UI that works across multi-platform

My TalkTalk App (native iOs & Android), Sales website (Angular 5 & Contentful CMS), TalkTalk MyAccount area (Angular 1 & 2), TalkTalk Help & Support (Lithium), News & TV Portal (OpenExchange), TalkTalk Router GUI

Sales Optimisation

The Right Product for The Right Customer

Customers are self-selecting products that are not suited for their household needs, leaving them unhappy and more likely to churn. We see opportunities to optimise the online journey to prevent customers selecting products which are not suited for their usage at point of sale or upgrade.
View more detailsView User FlowView it LIVE

The customer behaviour

  1. Significant increase in data consumption in a household.
  2. The speed coming into their homes is shared amongst its users, and the experience will depend on how much bandwidth is available.
  3. The average customer does not understand this challenge and what speed they need to support everything they want to do online.
  4. The Service Index now identifies the majority of these customers having problems through the ‘Demand Not Served’ service domain. Customers with a ‘demand issue’ call and churn more.

The vision & approach

Our vision was to deliver a simple, customer centric way to guide customers to the right product that is embedded into our default sales journey.


We set ourselves an ambitious target of providing recommendations across all new acquisition and in life digital channels, working in a test and learn approach.

The Goal

Our goal was to significantly reduce the wasted cost and churn driven by customers on the wrong products for their needs, which translated into:


  1. Reduction in customers with a demand issue (no target). We later identified that <7Mb orders was a lead metric we could track & improve with demand issues becoming a lag metric which takes 60 days to measure.
  2. 300 less churn per month.
  3. 10k less calls.
  4. Improved NPS (no target).

The plan

Delivering recommendation and explanation into all new acq channels:
• Ambient portal
• PPC portals
• Affiliate portals
• Agent sales portals
Delivering into Re-contracting and in-life channels:
• MyAccount
• Handshake with Repair
The potential risks
  1. Issues around dealing with legacy code base, specially in MyAccount for HomeMovers
  2. Issues around dealing with legacy code base in agent sales portal
The result
  1. Fibre mix up 33% (52% Test vs. 39% Control)
  2. Conversion rate up 25% (2.72% Test vs. 2.17%Control)
  3. Recommended product take up @ 69%