Sky Q

Product

As the biggest addition to Sky’s all-conquering offering since the introduction of Sky+, Sky Q wants to be the Sonos of TV, allowing you to watch telly all over your house and even take recordings on the road.

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.

In this new world, everything was possible. New hardware that allowed us to really make the most of the imagery, glass and the visual components that enhance the viewer’s experience.

It was important for Sky to get back to their grass-roots of making entertainment better. We did several interviews, including V3 agency who are Sky’s brand agency and Sky’s own Brand Director. The key message was backed up by three core values.

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.

Focus

Television is very hard to design for and one important building block is the focus state. When there is no mouse point or finger to use the focus state becomes a pivotal part of the design system. We used a combination of three elements to help enforce the focus state:

Panels

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

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.

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.

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.

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.

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.

TV Guide

The TV guide was probably the most complex template that we dealt with, so we tackled this first to see if we could create a truly transparent interface. After a couple of design rounds, we found a clever technique that allowed us to keep the transparency while still making elements legible.

Lists

Another challenge was to use a layout that felt more functional than a grid of images, where the system would naturally change the rhythm of the page. Through this the user would gain a subconscious form of navigational learning as well as how each layout had a unique purpose. For us, a grid of images template would be used for browsing while lists would deal with functional aspects of the box – scheduling, deleting, A-Z, etc.

Interim

One of the most important templates – the page in between browsing and playing content. It had to work with many different kinds of content types: movies, TV box sets, store content, etc. trying to give users enough information whilst being visually rich and appealing. I experimented with background takeovers and changing the tone of the current background using average colours – all of these added an immersive ambiance to the viewing space and allowed the users to feel connected to the content.

Featured

We really wanted to challenge the design philosophy by creating a visual interface that linked directly to the emotive imagery used across the entertainment industry. We experimented with many various designs and we found a sweet spot with this template. Not only does it bring beautiful hero images onto the TV screen but allows the user’s curiosity to guide them through the interface while engrossing them in the rich visual content.

Glass panel over video

It was hard to get the glass effect working on video without using a rendering engine. We found a clever method of using shadows and bright gradients, which really helped give that beveled glass look while content was playing. Within the glass panel, we had to play with the shadows to get the right balance between legibility and glass-like material.

Play bar

One of the major areas of innovation was the play bar. We came up with many different concepts to deal with live video, downloading, recording, playing/rewinding/forwarding, paid events, etc. We tried to implement features that would really benefit the user and allow them to enjoy their viewing experience.

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.