Next Generation YouView

Rethink, Redesign, Rebuild

Overall

The vision for the YouView project was a continuously updated product that was on the cutting edge of user experience and incorperating the latest back and front end technologies. With this in mind, the YouView team decided to not rest on the laurels of the successful launch but to start the process of the next generation.

There were a few high-end goals the company had which created our boundaries to work within

No Box Left Behind

Every box since release had to support the next generation project

Good, Better, Best

A philosophy that different hardware could have different levels of software to enable the higher end devices to have a more robust feature set

Built on HTML5

The whole project would be rewritten from Flash into the more recent HTML5 to allow easy in updating the software for fast iterative changes

High Level Concepting

The first step in this whole operation was to gather people from across the company and sell them the vision of the next stage in the company. I worked alongside the Creative Director and a select few designers, engineers and testers and spent a few days away from the office to come up with some features which we would strongly like to be included.

At this point in the project, the idea was to create some really out of the box thinking, trying to incorporate future facing technologies and to really stay ahead of rivals products. We went into this stage knowing that most of these ideas may not be able to be incorporated in the first release of the software, but as the project was going to be an agile one with lots of iterations we could always wait for the right time to launch more extravagant features so they would go on the project backlog until ready.

The Grid

Looking at the whole user experience gave us the opportunity to really look at our designs again from scratch. Since the original YouView interface had been created, the televisions in peoples homes had become larger. More features and more screen real estate, going from 720p being the norm all the way up to 8k and beyond.

The first port of call for this was the grid that our whole design system would be built upon. As a design team, we all took our individual takes upon trying to create a grid which would work on TV whilst keeping in mind the limitations and safe-zones. Although the industry had changed, with our goals of allowing all customers to experience the next-generation proposition we had to ensure older tv sets would still work.

Setup

The setup journey was one that changed the most from our initial concepts. The idea that we tried was one which was fully completed with an accompanying smartphone. the idea took the setup journey away from the main screen and allowed a user to set their location, preferences and internet connection via the app before they even received their set-top box in the post. I was a strong advocate for this idea but it was deemed too expensive by the company.

The setup journey that we launched with took a simple approach with the minimum number of screens for a user to accurately choose their settings and to get them watching TV as fast as possible. As this was the approach that was the launch proposition it gave room to enable hints and tips which were pushed to a user on the launch of a feature in the future.

Luckily I had created the templated for the settings area at this point and it was easy for the development team to use the same code to bring a uniform look to the setup area.

YouView setup image YouView setup welcome image YouView setup update image YouView setup update image YouView setup update image YouView setup update image

The Guide

The guide is the main way that people use the TV. In the house, the guide is still the king of the service and as such, it was a difficult sell to really try and change the Guide for the product too much. When we interviewed users of the service as well as users of other TV experiences the majority of users wanted to have an area which was familiar, and they could use without having to read a manual.

We looked at a few concepts and complete redesigns for the guide. One idea that we felt strongly about was the idea to bring imagery into the guide to give an instant view of TV shows currently on.

In the guide, one feature that has always been a unique selling point of the YouView product was the ability to go back 7 days and play content instantly from the tv guide. The date tracker on the guide was something it was agreed would have to stay and would also have to remain a predominant feature, alongside the filters to allow a user to quickly change the type of channel in the guide for the customer.

YouView Guide image
YouView Guide BT skin image YouView Guide TalkTalk skin  image

The old version of YouView had the main menu area which only consisted of the name of the section which would be selected.

With the new designs, we wanted to try and incorporate more visual content to allow the user quick access to the tv shows they enjoy. In turn, this could be tweaked to allow the user to have their favourite show in close proximity to them to allow easy access. Shareholders would also be able to control the shows they would want to promote to individual users. Sports fans could be shown new sports events they would not necessarily know about. This would allow an unprecedented level of personalisation in the UK tv marketplace

A big discussion that was had around the main menu was the number of links we would have on it. without wanting to overwhelm the user but also giving them the ability to navigate across the system easily. The navigation patterns consisting of the search icon and the settings area was also a hotly contested issue.

The search selection state was intentionally e to look different from the rest of the areas as it was the only area which on selection would not take the user to a full-screen experience, so it should have a different visual representation for the end user.

YouView Main Menu players image YouView Main Menu image

Settings

For the settings area of the UI, it had an interesting challenge. It was built as a separate app inside the YouView interface. It was also the only section of the UI which was outsourced to a different company, the development team from Massive Interactive worked closely alongside the internal team, helping to create the vision I had for the settings area. I led the work from the product design team on the settings area and created a template in the first instance which would allow the design to grow as new features and settings were implemented. Looking back, this was a good choice as we quickly expanded the UI to contain many new options and customers quoted that the settings being familiar e it easy for them to customise the UI how they wanted.

We originally utilized a bigger tile size which allowed the 3D imagery to be seen clearly but as the whole UI was adjusted for the smaller tile sizes the settings area followed suit. As settings areas are usually not the most visually attractive areas of an interface I wanted to try and bring in some micro-interactions that would give the settings area a touch of excitement and meaningful delight to a user.

YouView app hero image
YouView app hero image YouView app hero image YouView app hero image YouView app hero image YouView app hero image YouView app hero image YouView app hero image

MyTV

MyTV was the area where we got the most useful feedback. the first iterations of the MyTV area had a large 'hero' tile which would correspond to the most recent recording a user had made. This did not test well for us at all and was something that jumped to the top of our design backlog to fix.

YouView MyTV Recordings BT Skin image YouView MyTV Recordings BT Skin image YouView MyTV Recordings TalkTalk Skin image
YouView MyTV Watchlist image YouView MyTV Scheduled image

Search

The search area had a very particular goal for the project. it was the easiest way for a user to find the exact show that they wanted to find. In the first instances, the platform would link the shows together regardless of where the content was coming from. the idea here was as long as a user didn't have to pay extra then they wouldn't care about where the show was coming from. From a business perspective, this wasn't allowed as the shareholders wished to keep their branding at the forefront of a user. We also had to change the idea that you would be able to play the next episode of a brand from this screen as technical limitations didn't allow this.

One feature that we wanted to have prominence was the ability to start a new search from anywhere in the search journey. This call to action had to be prominent enough for users without taking over the focus for the customer.

After a few rounds of user testing, we settled on this design.

YouView Search suggestion image
YouView Search suggestion image YouView Search suggestion image YouView Search suggestion image YouView Search suggestion 2 image YouView Search suggestion 3 image

Discover

Discover was one of the most popular areas of the legacy YouView UI and its omission from the first release of the next generation project was noted and criticised by the user-base. The senior management team were made aware of the negative feedback and brought together a team to try and solve the issue. Bringing discover back made it easier for customers to find OnDemand tv shows and films that they would want to watch in a much easier way. It is one of the most popular features on the older boxes made it a lot more noticeable. The grand vision for this area would bring together all the best parts from back end services that a customer would want such as 'Cast & Crew' and IMDb ratings. It would also allow cross promotion to other TV or Films that a customer would like such as a ‘More Like This’ area.

Research into our high OnDemand persona lead us to some interesting results which in turn allowed us to create some more unique designs. we crafted a number of designs based on the older Radio-Times style of browsing for content as

YouView setup image YouView setup image

I worked on creating the future facing versions of the Discover area. The original version was pushed out due to the negative feedback from users and in haste, just used the basic carousel view that was used across other areas of the UI. I worked with another senior product designer to try and craft a more visually appealing area. My main goal was to have a large hero image which would represent the TV Show or Film selected allowing a visual representation of the show for a user who may not know about the content. We also tried to create a sub navigation to allow users to jump directly

YouView setup image YouView setup image

Awards

The next generation redesign of the YouView software was seen as a product worthy of recognition and I was lucky enough to be part of the team which was nominated and won a variety of awards



T3 Awards

Best TV Platform 2017



Mediatel Connies Awards

Gold for ‘International Contribution to User Experience’

Silver for ‘Best TV/Video Service Update or Launch.’



DTVE Content Innovation Awards

‘Advanced TV Innovation of the Year’



CSI Magazine

'Best interactive TV technology or application'



TV Connect

‘Best Cloud-Based Video Service' - Shortlisted