Case Study / 02
Hayu Reality on-demand
iOS App design for the Syfy TVE service
NBCUniversal's first international SVOD platform
Role: Product Design Lead
Platforms: Web, TV, and App (iOS & Android)
Client: NBCUniversal Int.
hayu® App Overview
- Over 200 of your favourite reality TV series with tonnes of shows added daily
- Download episodes to watch on the go. With over 6000 episodes to stream or download and watch anytime, anywhere!
- Full Seasons – Watch full seasons of popular reality shows - all 15 seasons of Keeping Up With The Kardashians, 8 Seasons of The Real Housewives of Beverly Hills and loads more. You can binge your favourite TV shows as many times as you want!
iOS mobile App design for the Hayu
My Role
I was Responsible and led the design approach with an external agency. I aligned both my design team and the agencies team on methodology, tools and collaboration approaches. I was responsible for the recruitment of a permanent design head, whilst supporting on UX hires also. Additionally, I consulted and provided design governance after the product launched
The Challenge - 21 countries, 3 Brands, 1 app
Timelines were, as in many projects, tight! We managed to deliver
Landing screen for Apple TV
Content listing screen for Apple TV
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
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 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.
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.
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.
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.
Tools used
Sketch
InVision
Omnigraffle
Keynote
Resources & sources used
Google material design - Google
Atomic design - Brad Frost
Team members
Creative & Marketing—Lee Raftery & Marco Giusti
Technical product leads — Liam Chua, Andrew Clarkson
Design Lead— Rob Cope
UI—Dani Perez, Stereo (Agency)
Development — Jamie Eastabrook, Kyle Braithwaite & Stereo (Agency)
Project Management —Tom Gibb, Raza Ali
UX — Kevin Newman (Lead), Albert Lo & Mark Wu
Selected Works
TV EverywhereVideo On Deman (VOD)
Kiss FMResponsive web design