Sky Q, Sky’s flagship set-top box, represents 40% of the company’s business. When I first joined the team, the product existed on TV set-top-boxes only. It’s start page (then called “My Q”) was unengaging and didn’t sell our content very well. On top of that, a large part of valuable screen real-estate was taken up by the menu and PiP video.

During my time working as a Lead Product Designer within the Sky Q team, I delivered a wide range of features. In this case study I want to focus mainly on the visual layout improvements. The brief was two-sided; first we wanted to better demonstrate the range and quality of content to our customers by improving merchandising spaces. A key goal was to increase titles on screen as well as their click-through rate, and improve programme detail pages.

 KPI’s we tested against were:
– Increase in customer engagement with programme titles that are now visible within newly gained layout real-estate
– Increase of visits to our visually revised Homepage
– Higher click-through rate on the first set of tiles of the Homepage.

Additionally, collaborating closely with Development, we needed to establish a  codebase that is shared amongst all platforms to reduce development time of visual components on these individual touchpoints. Doing so would mean we could build a seamless cross-platform CX bridging TV, devices and desktop, in a manner that was sustainable from a technology point of view.

Sky Q 2.0 brings together all Q platforms in a single project. The key challenges are defining a consistent and recognisable design across all as well as ensure the existing IA communicates well through our revised UX. On top of that, there has been a high urgency to ship this update and deadlines are tight. This meant resource had to be maximised to hit delivery milestones and task assignment needs to be reviewed on a weekly basis. In showing more content on screen, I had to find a balance between the amount of cover art images on screen and their legibility. Another consideration was that the Mini TV, the PiP preview playing in the top left corner of the UI, needed to remain easily accessible. As I was delivering UI for a wide range of platforms, this meant making the imagery dynamic to work on anything from low-res TV’s to retina screens. Altogether I wanted to maintain a consistent look and feel on all Sky Q digital touchpoints, making it feel like a single family of products.

Following Design Thinking methods, I lead a team of 5 talented Product Designers at Senior and Mid-weight levels and managed the end-to-end design process on all 4 platforms. I tracked capacity of the team, assign resource across all tasks of this project and drive design delivery. In the early staged I set out design principles in line with our design direction and business, analysed market research and user data and conducted competitor research. After establishing the right requirements and key considerations, I moved us on to iterative creative sessions through brainstorming and sketching, where we explored ways to display our content better within the limited spaces across our platforms. On TV, I designed a set of options for menu positioning and interactions including top menu navigation and a more out-there idea of a centrally positioned menu.

One of the most popular concepts was the dynamically hiding menu, shown in the video. In constant collaboration with Development and Product teams, I involved all key areas of the business in our design decisions. After narrowing down our concept with key stakeholders, we moved into the stage of prototyping and qual testing at our external testing centre in Central London, where I ran workshops documenting our customers thoughts and ideas. Back in the office, I analysed these with the team and adjusted our designs accordingly. New UI designs were added into Sketch libraries which I originally created for previous versions of Sky Q. Working closely with our colleagues in Technology I ensured our design was implemented accurately by organising showcases and reviews that were aligned with their development sprints.

Rolled out to customers from July 2020, all versions of the Sky Q and multiroom boxes have updated and Sky Q 2.0 went live to 4 million homes across the UK, Germany, Italy and Austria. My revised UI delivery method has reduced development time on visual components by 75%. By implementing my layout design, Sky can now promote up to 33% more of the the range and quality of programmes on their flagship TV platform, while the expanded view allows 60% more visibility to content on the main view.

In addition to the TV roll-out, we successfully delivered full apps for Apple TV, Mobile, Tablet and Desktop with a consistent experience and look and feel.