I’m Pieter (simply pronounced as “Peter”), a seasoned Product Designer based in London, UK. For over 10 years I’ve been involved with large consumer-facing projects, providing my Design expertise on a variety of platforms including TV, responsive web, native devices and desktop. Below you’ll read case studies of some of my key projects of products serving millions of households across Europe. I’d love to share more of my work with you, so don’t hesistate to get in touch…
Sky Q, Sky’s flagship set-top box, represents 40% of the company’s business. Shaping the next generation of this product meant building a seamless cross-platform CX bridging TV, devices and desktop, in a manner that was sustainable from a Development point of view.
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 and their click-through rate and improve programme detail pages.
Additionally, collaborating closely with Development, we needed to establish a shared codebase to reduce development time of visual components.
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 coherent 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. I track the 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.
Rolling out to customers from July 2020, all versions of the Sky Q and multiroom boxes will get the update, going 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.
Techradar – Sky Q gets its biggest ever update
Forbes – Sky Q Rolls Out Major New Feature Update
During the time at home caused by the coronavirus pandemic, I took the opportunity to educate myself in a set of industry standard design tools. One of which was Adobe XD, known for it’s powerful prototyping functionality. I wanted to explore the possibilities of the tool whilst working on an app idea I had for a while.
Online reviews of places and products often require users to enter both a review of varying lenths and some form of star rating. I wanted to create a product that increased the likelihood users leave a review by reducing time spend writing them to at least 75%.
Playing on the concept of shortform texts on Twitter and Summly, I had the idea to launch an app that hosts very short reviews with dynamic ratings assigned from them.
Intuitive UX would sit at the heart of the product, streamlining the user journey to find places near them by implementing a set of search methods helping users explore bars and restaurants in their area.
The review mechanism was a key consideration and needed to be as short and minimal as possible, urging users to share their thoughts in a concise way. To avoid having to enter a star rating, I envisaged using an AI algorithm that analysed a 3 word review to decide whether it was positivie, neutral or negative.
I designed all aspects of this product myself, to breathe life into my idea as well as to showcase my design skills. I focused my thoughts around two key areas of the proposal; finding a restaurant nearby, and making reviewing easy and quick.
While exploring search functionality on other apps, I felt that location based search options would work best for people on the move, exploring dining options near them. A map and accompanying list of nearby restaurants would cover that user group. If the user wanted to do a more specific search, a simple Search input field could be used for that.
Thinking more about how the AI rating algorhitm would work, I imagined that combining the result (positivie, neutral or negative) with other reviews of the same location would dynamically create a percentage rating. For example, if the algorithm established that 9 out of 10 reviews were positive, the rating would be 90%. This would be the equivalent of an average star rating, but without any user ever having to enter it manually. On top of this, additional AI could extract key words from all reviews on a single place and visualise them at the bottom of the page in the form of clickable tags.
Creating this app has helped me think deeper about the challenges and opportunities an app idea like this could bring. Even after setting some of the key requirements and moving into the design stage, new ideas often cropped up, such as sharing and direction options.
This app was primarily created to explore new prototyping tools and build on an idea I set myself, and having spent a few weeks creating this helped me to see the full potential of Adobe XD. I believe that the app concept touches on an interesting idea of dynamically generated ratings that could also be applied as a back-end solution into existing apps, setting new expectations for the users of how long a review process would take. By removing the manual entry of star ratings and reducing review lengths to a mere 3 words, I would argue that the time a user spends on writing a review has been drastically reduced; if an average Google review contains 30 words, my mechanism is already 10 times faster.
Sky Store is a premium service selling films and box sets outside of the regular Sky package, with more than 1,200 titles available to purchase or rent and instantly stream. The OTT side consists of a responsive website and apps for desktop, mobile, tablet and Smart TV.
Over 3 years our team was tasked with refining the digital brand and adding various features across all platforms. At this time, market research proved that many customers were collecting and gifting physical discs (DVD and Blu-ray). Customers could already buy & keep a digital copy, but the brief was to now offer DVD or Blu-ray discs on top of their purchase. This required our team to design for these multiple purchase formats.
Parallel to this project, a secondary brief stated we should make it easier for users to find content by purchase type, certification or category. The KPI’s we assigned at the beginning of this project were for the sales of DVD & Blu-ray discs to meet projection set by our Marketing team, as well as no drop in movie rentals after launch of the new layout. We could measure the success of our filter options against an increased average of purchases or rentals per every programme page visited.
As we were dealing with a high number of transactions, the key goal was to create a seamless shopping experience. Any hiccups in the purchase journey could results in a loss of revenue.
Alongside existing legal copy, I had to ensure legal copy around physical disc postage and ownership were readily available.
Any piece of content could have up to 7 formats available, so I had to allow the visual real-estate on our programme detail pages to accommodate them all.
As Senior Designer I managed the workload and personal development of 3 Designers over all Sky Store projects as well as working hands on UX and UI. Day to day responsibilities included liaising with our off-shore development team, supplying my team with guidelines and templates and conducting stakeholder presentations.
I explored adding purchase formats to our homepage hero area in a web restyle concept shown here, however this solution wouldn’t fit all formats comfortably. Also to add all legal copy on a homepage hero area would quickly look cluttered. Another alternative I explored is combining all purchase options into a dropdown, however this added an unnecessary click to the user journey. I decided that the best location for all purchase options would be to simply add it onto the programme details page using radio buttons.
Buy & Keep Multi-format functionality was successfully implemented on all platforms and its behaviour is seamlessly consistent with Sky’s set-top boxes.
After various features were added, my team future-proofed and maximised the potential of the Sky Store platform. It is currently running as a low-maintenance site on which no further UX/UI has been needed after my team’s efforts.
Buy & Keep sales met Marketing’s projection and has been a low effort offering driving significant revenue to the business from 2015 to 2019. After the DVD and Blu-Ray market has seen a slump in recent years, no discs are currently offered on Sky Store. Technical support for this offering is however still active.
The introduced filter options increased both findability and click-throughs to content, as well as the average of purchases or rentals per every programme page visited.
The Sky Store Player app on iOS is currently rated 4.5 stars of 11.900 ratings.
At launch, nearly half of the UI on the Sky Q set-top-box was taken up by navigational elements. This restricted the space in which Sky could hero a specific piece of content and it limited the amount of programme tiles visible. We wanted to demonstrate to our customers the wide range and quality of content, by improving visual merchandising space and expose a larger amount of content.
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.
After first exploring squeezing more tiles in the existing space and playing around with spacing options, we decided to reclaim navigation space to promote content. A key challenge with altering navigation paradigms for our millions of customers, including a large percentage of elderly user, is not to introduce too drastic a change to cause confusion. Having elderly parents myself I often hear how app updates cause a great deal of frustration within this demographic. This lead us to take a staged approach, first making our content area wider without completely removing the navigation menu, hence the project name “Widescreen”.
After establishing our data points, conducting competitor research and rounds of sketching sessions, we decided to reduce the navigation menu from the 2 panels into a single vertical. I had to rethink the navigational model to fit within this reduced area and I’ve prototyped the result in the shown video. With the content area now widened, I lead the rebuild of each section of the UI to fit within this larger space.
A larger hero space introduced an opportunity to implement title art (programme logos) of featured content to draw the users eye into this page. A challenge with this was briefing the Stills team to create title art that works on top of any imagery in terms of contrast, colour and positioning.
In the role of Lead Product Designer I was in charge of a dynamic team of 5 UI & UX designers dedicated to the Sky Q experience, managing the end-to-end design process as well as stepping in regularly for hands-on UX/UI work. Working closely with our Stills team I supplied guidelines and a template for the enlarged Hero imagery and additional title art. During regular QA sessions with our Agile development team I ensured my navigation paradigm was implemented as per my prototype.
To increase speed and accuracy of the team’s output I created Sketch libraries which allows the team to put together pixel-perfect screens within seconds.
Within the remit of the role also fell driving the project planning, presenting to key stakeholders and recruiting new talent to join us building our growing product.
Among many other Sky Q projects I lead the design on the introduction of third party apps, such as Netflix and Spotify and setting the Sky Q TV platform up for HDR support.
This update was is currently live across all our territories and has increased the promotional space within TV experience by 20%, allowing for more impactful presentation on TV and Tablet versions of Sky Q.
The hero space and programme tiles have increased in size, and gone from 2 to 3 visible programme images and from 3.5 to 5 film covers on a rail. Product Analytics proved that my design increased customer engagement with the Homepage, where Sky sells the majority of new content, as well as a noticeable increase of click-throughs on the newly visible tiles within our wider real-estate. The added tiles allowed Marketing to sell more content without hampering the user experience.
The Verge – Sky Q is getting Spotify, Netflix, and HDR support
T3 – Sky TV Update – New Features Sky Q Box 2019
One of my early projects at Sky was introducing a Homepage on the original Sky+ set-top box.
The brief was to better connect our customers with the non-linear content they are paying for, including On Demand and Sky Store. Two project goals were set; to raise awareness of Sky’s portfolio of products and promote On Demand content early, increasing it’s consumption.
The technological capabilities of the Sky+ box are limited in terms of internal memory, so every visual component needed to be considered from a disk space angle and go through a process of compression. I created sprite sheets to contain visual assets within a single file in order to reuse components where possible.
A second key challenge was being able to strike a balance between the business need and the user experience. All eyes of senior stakeholders were on Sky+, being our flagship product.
Finally, customers would usually start their TV viewing experience by launching directly into the TV Guide section, therefore missing out on lots of great content from our non-linear catalogues.
Within a small design team, my input was building a UX & UI solution around the brief. I was also actively involved with user testing to verify my output. After exploring top menu navigation options and even the option of sending our customers an updated remote control (with prominent On Demand and Sky Store buttons), I decided to pursue a Homepage concept that acts as a hub for all key journeys, accessible by remapping the TV Guide button which is the most used button on the Sky+ remote.
As well as creating this Homepage, I worked closely with our in-house development team to create UI for the interactive red-button Sports app, Catch Up services and many other sections within the Sky+ experience.
My Sky+ Homepage design gave the business a platform to promote the key areas of Sky’s On Demand offering. With an average of one million searches taking place per day, I’ve also given more prominence to our search function. I’ve successfully redirected user traffic away from the TV Guide and into non-linear areas, with On Demand views increasing by 60% within areas such as Sky Cinema. At launch, this homepage became the start of an evening’s TV viewing of 10 million households’ across the UK.
Cnet – Sky+ HD boxes get tasty new homepage from today
The Drum – Sky shakes up Sky+ HD TV guide
Entertainment.ie – Notice anything different with your Sky Homepage?