TV Everywhere Video on-demand

TV Everywhere Video-on-demand

Design and build a multi-brand VOD service for 21 LatAm countries

Design and build a multi-brand VOD service for 21 LatAm countries

Role: Product Design & UX
Platforms: App (iOS & Android) & Web
Client: NBCUniversal Int. Networks

Role: Product Design & UX
Platforms: App (iOS & Android) & Web
Client: NBCUniversal Int. Networks

In 2016, VOD became an integral space for the media business to distribute their TV content direct to their consumers, as traditional TV viewing declined. This was down to the huge YOY growth of providers such as Netflix & Prime as users had more variety at a lower cost than traditional cable services.

After the launch of the project, our results were: 23 operators, 21 countries, 110k activations, 4 brand sites, 2 rebrands, 8 apps, 8% monthly growth, $1.1M cost.

In 2016, VOD became an integral space for the media business to distribute their TV content direct to their consumers, as traditional TV viewing declined. This was down to the huge YOY growth of providers such as Netflix & Prime as users had more variety at a lower cost than traditional cable services.

After the launch of the project, our results were: 23 operators, 21 countries, 110k activations, 4 brand sites, 2 rebrands, 8 apps, 8% monthly growth, $1.1M cost.

My Role

My Role

I was part of the International Digital team, Leading and producing the creative and UI deliverables for the TVE product. I worked alongside Kevin Newman (UX) & Liam Chua (Tech) lead by Bruce Mitchell our VP of digital. We took responsibility for our specialist areas and presented work back to stakeholders as and when it was appropriate for us to do so. I was responsible for designing the Apps for both Android & iOS. Additionally updating the international networks websites and integrating the new catch up content. I was supported by a contract UX Designer and front end developer.

I was part of the International Digital team, Leading and producing the creative and UI deliverables for the TVE product. I worked alongside Kevin Newman (UX) & Liam Chua (Tech) lead by Bruce Mitchell our VP of digital. We took responsibility for our specialist areas and presented work back to stakeholders as and when it was appropriate for us to do so. I was responsible for designing the Apps for both Android & iOS. Additionally updating the international networks websites and integrating the new catch up content. I was supported by a contract UX Designer and front end developer.

The Challenge - 21 countries, 3 Brands, 1 app

The Challenge - 21 countries, 3 Brands, 1 app

How do you build an app for multiple brands that can be used by multiple user types and capable of handling varying quantities of content, there forced the app and its design would need to degrade gracefully when required. There were a number of key business requirements for the design of the app. Firstly Horizontal scroll on all tablet apps, Access to content right from the home screen, One app design system themeable for multiple brands.

I quickly became aware of some key challenges through the design exploration stages. Android Screen sizes offered a huge variety of screen dimensions as well as resolutions which lead to a number of design trade-offs. Like a lot of designers, I like to make sure designs are pixel perfect and look beautiful. Unfortunately, due to the diversity of screen variants on Android, we had to make the decision to go with the approaches to make sure we made deadlines going forward. Fortunately, I was able to collaborate closely with the App agency through conference calls and locating to Madrid for a week to sit alongside them and tighten up the approaches. What I learned through the Android designs especially was that it’s integral to select the highest priority device types. Ideally with the specific target demographic in mind.

How do you build an app for multiple brands that can be used by multiple user types and capable of handling varying quantities of content, there forced the app and its design would need to degrade gracefully when required. There were a number of key business requirements for the design of the app. Firstly Horizontal scroll on all tablet apps, Access to content right from the home screen, One app design system themeable for multiple brands.

I quickly became aware of some key challenges through the design exploration stages. Android Screen sizes offered a huge variety of screen dimensions as well as resolutions which lead to a number of design trade-offs. Like a lot of designers, I like to make sure designs are pixel perfect and look beautiful. Unfortunately, due to the diversity of screen variants on Android, we had to make the decision to go with the approaches to make sure we made deadlines going forward. Fortunately, I was able to collaborate closely with the App agency through conference calls and locating to Madrid for a week to sit alongside them and tighten up the approaches. What I learned through the Android designs especially was that it’s integral to select the highest priority device types. Ideally with the specific target demographic in mind.

Further to the content side of the project, there wasn’t always a guarantee of 20, 30 or even 50+ pieces of video content. Therefore the app had to account for these variations in the way the home screen and catalog (Browse section for this app) was structured. The individual card design system became integral to making the app feel like it had a good quantity of video content without looking sparse or duplicating anything. This is the insight and research into design systems such as Google material design assisted us in developing an adaptive and high standard of visual design.

Further to the content side of the project, there wasn’t always a guarantee of 20, 30 or even 50+ pieces of video content. Therefore the app had to account for these variations in the way the home screen and catalog (Browse section for this app) was structured. The individual card design system became integral to making the app feel like it had a good quantity of video content without looking sparse or duplicating anything. This is the insight and research into design systems such as Google material design assisted us in developing an adaptive and high standard of visual design.

Universal TV Play logo. The play mark to the right is the design we delivered and is used alongside 3 other VOD brands

Universal TV Play logo. The play mark to the right is the design we delivered and is used alongside 3 other VOD brands

Overview of territory & brands

Overview of territory & brands

The 3 brands we launched initially were Syfy, Universal Channel (Now Universal TV) and Studio Universal.

Additionally, we were tasked with creating the Play mark to sit alongside the brands on the TVE platform. I worked closely with the VP of Creative for international to create a mark that was clear, unique and respectful when positioned against the multiple brand logos which were on the TVE platform.

The 3 brands we launched initially were Syfy, Universal Channel (Now Universal TV) and Studio Universal.

Additionally, we were tasked with creating the Play mark to sit alongside the brands on the TVE platform. I worked closely with the VP of Creative for international to create a mark that was clear, unique and respectful when positioned against the multiple brand logos which were on the TVE platform.

The Approach

The Approach

I began the designs by doing a heavy amount of research into design methodology, I’d previously utilized Atomic design on the Networks website design system so I started there. From the experience I had in the 36 websites we had delivered for the international networks I knew about some key areas that needed attention. Cards, cards were integral to having a versatile reusable design. I had done a lot of reading and designing using the Google material design framework. This helped build a good foundation for this part of the design. Additionally, I researched many VOD, SVOD & general video platforms comparing consistent themes and unique features that simplified functionality and user journeys. Throughout this process, I would regularly collaborate with the development & UX team members.  We would all chip in and collaborate on the vision making recommendations and feeding back on one another’s work with a view of quality deliverables and final product for the users and business stakeholder needs.

I began the designs by doing a heavy amount of research into design methodology, I’d previously utilized Atomic design on the Networks website design system so I started there. From the experience I had in the 36 websites we had delivered for the international networks I knew about some key areas that needed attention. Cards, cards were integral to having a versatile reusable design. I had done a lot of reading and designing using the Google material design framework. This helped build a good foundation for this part of the design. Additionally, I researched many VOD, SVOD & general video platforms comparing consistent themes and unique features that simplified functionality and user journeys. Throughout this process, I would regularly collaborate with the development & UX team members.  We would all chip in and collaborate on the vision making recommendations and feeding back on one another’s work with a view of quality deliverables and final product for the users and business stakeholder needs.

Team

Team

The project was lead by the in house digital team. We were comprised of product leads, Back end, Dev Ops, front end, project management, UX and Design teams. We work collaboratively across all aspects of the project. We also collaborated with a 3rd party agency to help assist the app builds.

The project was lead by the in house digital team. We were comprised of product leads, Back end, Dev Ops, front end, project management, UX and Design teams. We work collaboratively across all aspects of the project. We also collaborated with a 3rd party agency to help assist the app builds.

Requirements

Requirements

Designing for a territory I knew little about in regards to technology and user base. From numerous stakeholder interviews and market research, I was able to understand more about the market and the needs of the users. Along with this became more aware of specific business and stakeholder requirements that needed to be considered when building the foundation of the app designs.

Designing for a territory I knew little about in regards to technology and user base. From numerous stakeholder interviews and market research, I was able to understand more about the market and the needs of the users. Along with this became more aware of specific business and stakeholder requirements that needed to be considered when building the foundation of the app designs.

Results

Results

We later launched rebrands for Universal channel to Universal TV and a brand refresh for Syfy channel. Along with this we were are to add Telemundo to the roster. All of these needed little design effort. The main requirement was to update fonts and typography along with the brand colors. This was all achieved through updating JSON files myself assisted on occasion by my interns to help them understand the process.

Result summary: 23 operators, 21 countries, 110k activations, 4 brand sites, 2 rebrands, 8 apps, 8% monthly growth, $1.1M cost.

We later launched rebrands for Universal channel to Universal TV and a brand refresh for Syfy channel. Along with this we were are to add Telemundo to the roster. All of these needed little design effort. The main requirement was to update fonts and typography along with the brand colors. This was all achieved through updating JSON files myself assisted on occasion by my interns to help them understand the process.

Result summary: 23 operators, 21 countries, 110k activations, 4 brand sites, 2 rebrands, 8 apps, 8% monthly growth, $1.1M cost.

Tools used

Tools used

Sketch
InVision
Omnigraffle
Keynote

Sketch
InVision
Omnigraffle
Keynote

Resources & sources used

Resources & sources used

Google material design - Google 
Atomic design - Brad Frost

Google material design - Google 
Atomic design - Brad Frost

Team members

Team members

Bruce Mitchell (VP Digital) 
Liam Chua (Technology & PM) 
Kevin Newman (UX Lead) 
Jamie Eastabrook (FE Dev)
Albert Lo (Snr UX Designer)

Bruce Mitchell (VP Digital) 
Liam Chua (Technology & PM) 
Kevin Newman (UX Lead) 
Jamie Eastabrook (FE Dev)
Albert Lo (Snr UX Designer)