This multi-million-pound project aspired to push the TV standards up high with rich content, imagery, data and connectivity across multiple devices. To deliver an immersive and seamless experience across various TVs, tablets and smartphones that could grow as an ecosystem for the next ten years.

Sky is Europe’s leading broadcasting company. The group serves 21 million customers across five countries: Italy, Germany, Austria, the UK and Ireland. They offer the broadest range of content, using innovative new technology to give customers a better TV experience.

Problem

How can we create an omnipresent holistic service that encompasses TV, Broadband and Talk, that is indispensable functionality that permeates customers' lives in ways both subtle & overt? An experience that makes customers fall in love and want to stay married.

How can we excite customers with content and make it more accessible across their different devices?

Outcome

I co-developed a comprehensive design system that redefined Sky’s visual language and user experience across television, web, mobile, and tablet platforms. Collaborating closely with stakeholders, including the brand agency and directors, our team crafted an intuitive, seamless interface that was successfully deployed to over 10 million customers. This initiative marked a significant evolution in Sky’s design philosophy, emphasising user-centricity and adaptability.

The impact of this project was substantial, setting a new industry benchmark for integrating design and technology to deliver cohesive, immersive user experiences. The adaptable design framework facilitated the expansion of Sky’s ecosystem, accommodating new devices and services over time. This strategic design transformation not only reinforced Sky’s brand identity but also drove user engagement and satisfaction, contributing to the company’s growth and leadership in the broadcasting sector.

We designed an experience that was rolled out to over 10 million customers and we also created the evolution of Sky's design philosophy through glass.

Here is how we did it 👇

Brand Refocus

It was important for Sky to get back to its grassroots roots of making entertainment better. We conducted several interviews, including with V3, Sky’s brand agency, and Sky’s Brand Director.

In this new world, everything was possible. The new hardware allowed us to make the most of the art and photography direction to enhance the viewer’s experience. 

Three core values backed up the key message. 

Discovery & Definition

Sky conducted research to understand our consumers’ preferences, behaviours, and traits. This included conducting in-home ethnography (seven days of consumer diaries) with 12 customers, followed by in-home interviews. This helped us understand their environment, the objects they used every day and how they interacted with them.

We also conducted quantitative validation using website data to understand their preferences and behaviours. A 4,000-person survey was distributed to capture quantitative data, providing a comprehensive understanding of our consumers.

The key four themes that were identified were: Experience, Content, Planning and Access. A further 11 drivers were explored as data was consolidated.

Experience

• Relablity
• Quality – Picture and sound

Content

• Quality content
• Variety of content

Planning

• Immediacy (Watch what I want at a time that suits me)
• Planning (Help plan schedule to avoid clash/missing out)
• Personalisation
  

Access

• Simplicity
• Compatibility (Devices working together)
• Flexibility (In accessing OSE in multi- locations)
• Access to OSE (On multiple devices)
  

Simplify

Do a few things really well instead of a lot of things half good

Design principles

• Spatial navigation model
• Touch-like interactions closing the gap between input and content
• Seamless flows, not jumping from page to page
• Progressive engagement – seamless journeys between ‘lean back’ and ‘lean forward’ Adaptable, scalable
  

• Source agnostic – content and context led browsing
• More time used consuming, less navigating
• Performance over ‘bling’
  
• Delightful and fun to use
• Consistency on all levels s

Content Types

We developed a heuristic view of the different types of content to help us break down the information architecture.

Data model

We also broke down what types of data would be stored and what they meant to the user.

Seamless journeys

Consumers’ motivations and desires change as they navigate through content, fluctuating between ‘search’ and ‘discover’ mindsets. The UI paradigm must transition seamlessly and gracefully between states.

Design & Deliver

As we moved towards developing features for the ecosystem,we had to consider how the functionality and interaction model of the set-top box and the remote would translate across the spectrum of devices.

A design system was a key role in helping establish consistent and efficiency across our suite of apps, features, and devices. We began the process by looking at the visual language to see how we can align Sky visual language with it's marketing language.

Visual language

When we interviewed V3, they told us that the core visual language was glass and there was no actual colour behind Sky’s brand – the content was the colour. We took this on board along with a couple of animations that they gave us as a starting point to defining the visual language.

Research

We created mood boards that ranged between different design languages that are out there. Ultimately, we were lead by trying to use the glass material effectively within the interface. It was useful to gain inspiration from different design trends across multiple devices.

Glass

One of the biggest challenges which we faced was designing an interface that was transparent whilst emitting the look and feel of glass. It was quite an interesting challenge for us – we looked at similar interfaces, at the properties of glass and started using Cinema 4D to simulate how glass works in the real world. This gave us a good understanding about the material and how we could recreate it in the 2D world.

Typography

Sky had introduced a new “Sky Text” font, from print to digital, everyone at Sky would start to use the same font family. Televisions aren’t really made for displaying text and so we worked extensively with Dalton Magg on resolving font rendering on TV screens to ensure that there was a minimum amount of issues such as: hinting, black bleeding and kerning issues.

Design system

The challenge was to create a design system that not only worked on TV screens but across multiple devices and situations. This required a lot of expertise from many people and backgrounds but I believe that we created an innovative and solid platform that would help Sky build upon.

Modular scale

Modular scales allowed us to generate a set of numbers based on a ratio that can be used for all kinds of typographic and layout decisions to create harmony in the visual design.

100% grid-free design

Applying modular scales was to create a generic set of spacers that could be applied across multiple devices without having to worry about grids or viewports. This allowed us to have a system that worked across any devices while still maintaining its relationship to our visual language.

Information model

Defining how each panel worked in our design system would ensure users have a logical basis for navigating around our UI whilst allowing us to fix in place a core principle.

Spatial model

It was important for us to map out how Sky’s interface would work spatially. This helped us with how the visual elements react inside this space: from how the background adapts the further into content a user gets, to how the animations work when a user is swiping back.

We also explored how we can enhance the viewing experience by taking the colours of the image and applying it through our spatial model. The closer the user got to playing content, richer the background became.

Building blocks

We decided to build a system based around Brad Frost’s Atomic Design – which tries to convert digital design into a structured methodology, using the periodic table as an example of how nature uses atoms to build elements that are then able to build materials and so forth. It seemed to make perfect sense to use this method to describe how our digital things worked, not only to developers but to the marketing team, directors, etc.

An example of how this works:

Maintenance & Contribution model

To ensure a continued contribution to the design system we created a styleguide for users and agencies to understand the design language, principles and atomic design. The design system was a library of PSDs files that was linked together and could be accessed through a file sharing system. This was eventually moved this into a Sketch library that was managed by the core team. At the beginning, we had weekly check-ins with different design teams to ensure our design system was being followed consistently. Those become monthly and were used as a means to understand what new patterns or components could be feed back into the design system.

Designs 

Project of a lifetime

I was very lucky to be able to work on a project that I saw through right from the beginning to launch: when engineers were still soldering microchips together; developers were coding the core system; seeing the evolution of the physical products; working as a team to design a new visual language that works across an ecosystem of devices, 100% free grid system, visual graphics, UX concepts, countless workshops; helping Dalton Magg on Sky’s TV font; working across multiple departments and design teams as well as presenting to executive team; to finally seeing our project director launching the project in front of a crowd of people.

It has been an amazing experience to see a product grow, develop and evolve into what is now Sky Q. I was very proud to be involved in designing an interface that will probably stay with Sky for the next 10 years.