Design System

Aesthetic & Accessible Pattern Library


Creating an accessible and aesthetic design language across all of TalkTalk's products from web, mobile and television interfaces.

Project

TalkTalk


Role

UX/UI Designer


Responsibilities

UX/UI

Design

Prototyping

Customer Validation

Implementation


Timeline

2016-2017


The Problem

At a Glance

TalkTalk is one of the UK’s largest mobile, broadband and TV providers. Their current online presence needed a major overhaul with the overarching mission to make things simpler, clearer and faster for the end user. TalkTalk’s current digital presence was dated and had no sense of structure or hierarchy, for example, there are separate sites for desktop, tablet and mobile which meant that the site was expensive and labour intensive to maintain. With over half a million hits a week and a diverse demographic ranging from students to the retired, this presented itself as a mammoth design undertaking which required a considered user centred solution.

The Challenge

The site currently has around 600k hits a week with a wide demographic ranging from digital native millennials to baby boomers venturing online for the first time. The current offering was confusing and even a simple product page put too much cognitive load on the end user. There were a wide number of varying stakeholders both internal and external to the organisation many of whom had little knowledge of digital.


The Approach

The outline requirements were that the solution needed to be responsive, the current workflow of maintaining 3 breakpoints was highly inefficient and needed to change. It was clear from the onset that simply designing accessible HTML pages on a responsive framework was not the answer, moreover we needed to design an atomic system comprising of components, modules and templates.


Case Study: Iconography

Audit Current State

An audit of the current iconography use was carried out with analysis on their inconsistent use. Once a thorough understanding of the problem has been understood, then an appropriate solution needs to be designed. Icons will have pre-defined sizes, rules and appearance to maximise their semiotics or meaning.


Design Pattern


Documentation


Published Component