Show Project InfoHide Project Info

Eurosport x Vodafone

Client: Discovery/Eurosport x Vodafone
Date: April 6, 2020
Services: UX & UI Design for OTT/STB

A new live sports experience
from DiscoveryEurosport

Having previously designed Voice and Mobile App projects. I was invited to join Discovery/Eurosport to lead the their Connected Devices pillar as they were looking to rethink and expand their Smart TV application offering.

Being offered the chance to work on multi project Connected devices related project such bring Eurosport to the VodafoneTV was a huge opportunity to for me to continue my exploration of embedded OS’s such as Vodafone’s Over The Top and Set Top Box device.

Working in a small team integrated into the the UX Team, Product Team and Editorial Team we sat down and didn’t just design an experiment but designed commercial products the wider user base for both Smart TV and OTT/STB devices.

Now this projected started a little differently from the usual project of design and develop and release. I was in fact dealing with new port of an existing product. So my first aim was the familiarise myself with a new platform. I read the manual and got my hands on a device and got going exploring it, every setting, every first party app and tried to understand how it worked. This reminded very much of previous times Ive had to design new for tech. For me it is really interesting to see how things work and can I see opportunity to improve things.

Quick Introduction

Vodafone TV is a global TV platform offered by Vodafone Group to it’s partnering OPCOs. The solution is tailored for providing a technically profound TV Framework to markets that have either little experience in the TV domain or that require a fast time to market. VTV provides a set of functionalities to embed external OTT content and UX, to extend core product functionalities and to cover local specific customisation needs: this is commonly called Third-party Apps Framework.

Apps terminology in Consumer market world suggest a quick way of onboarding new content but includes content negotiations, product decisions and technical challenges Apps extensions are targeting 2 main domains with a different level of complexity:

  • Video Apps are containing user-interface but also content streaming from various video platforms, mainly not managed by Vodafone
  • Non-Video Apps are containing only user-interface with no valuable multimedia content
  • All 3rd Party Applications are constructed from HTML5/CSS/Javascript and loaded from the 3rd Party HTML portal to execute within the Opera browser environment. This gives access to various middleware APIs on the STB to gain access to the player, DRM, and other services. In turn the player then gives access to streams over the 3rd party CDN.

Things to Consider and Initial Learnings

Things I took away from after reading the manual was that is was a full web app with support for Javascript, it supported WebKit and the resolution was 1280×760 so don’t design for HD and assume it will fit. That last one was quite important for any one going work.

Lastly and most importantly was that platform doesn’t support third party keyboard. Which was a huge surprise to me, since it would be I would have to design a keyboard for a TV platform for the Spanish language. This lead me to reading about keyboards, characters sets and the idea of qwerty vs alphabetical layouts.

Refining the General Navigation

One of the key tasks for the Eurosport was the improve the TV general navigation, since the first iteration was simple and functional. The ask was the see how we can bring some moments of delights into the General Navigation.

Firstly I had to learn to how to create prototypes for none touch interfaces. This took a little bit of getting used but leaning on my experience with Azure, I used the simple methods to creates states that based on a conditions could be change. The next challenge I had was, how design with Remotes in mind. For Apple, this was quiet simple. I used a third party app to map remote buttons to my prototyping software and connected the SiriVoice Remote (AppleTV 4+ remote) via bluetooth. When dealing with Vodafone and Amazon I had to get a USB inferred attachment to my Mac in order the demo them correctly.

A day-to-day I mapped the navigations keys of my keyboard to variables and conditions to quickly demos interface ideas such as one the ones below. To start demonstrating my ideas on how we could improve and bring the experience up to par with the leaders of the Sports TV industry. The left is funny featured idea whilst the one of the right in demo to learn how to create a full sectioned tv app.

Designing TV Keyboard

Another key section of the App experience I was asked to look into was the Create Account and Sign In flows. This was particularly interesting since the VodafoneTV platform doesn’t allow as of 2020 third party access to developers to use First party keyboards. So I was asked to design a keyboard. Unlike on iOS and Android for touch devices which it would be unheard of to design a keyboard unless really focused on it.

I started to explore the key concepts around TV input methods plus further explored if the keyboard should be Alphabetical or QWERTY focused, this was firstly focused around Spain and Latin America world but later expanded. This raised some great opportunity to review the whole UX process and question everything to design that would be design around  TV Remotes.