User Experience Design

OTT NOW! apps

Apps

Wat ik heb gedaan

  • • Concurrenten onderzoek
  • • iOS & Android design onderzoek
  • • User flows
  • • Wireframes
  • • UI Design
  • • Prototype

Over de opdracht

Met OTT NOW! Kunnen end-2-end solution providers en TV-operators hun volgende generatie televisie-ervaring op meerdere platforms creëren. Op basis van een ‘vanilla theme’ kunnen bedrijven hun eigen specifieke design wensen laten integreren in het product.

Het product dat bedrijven kunnen afnemen was een aantal jaar gedateerd en kon een opfrisbeurt gebruiken. Aan mij was de opdracht gegeven om ervoor te zorgen dat het OTT NOW! product aantrekkelijker werd om te kopen, zodat dit voor meer werk zorgt voor het bedrijf. De optie om live tv te kijken moest aanwezig zijn binnen de app.

Research

Voordat ik ben begonnen met uberhaupt kijken naar het design van OTT NOW! ben ik mijzelf meer gaan verdiepen in de wereld van video streaming.

Populaire video streaming services

Vandaag de dag zijn er genoeg bedrijven die een eigen streaming service aanbieden. Hierbij kun je denken aan Netflix, HBO, of Disney+. Om erachter te komen wat populaire streaming services aanbieden ben ik opzoek gegaan naar de populairste aanbieders in Nederland.
Op volgorde van populairteit: Netflix, Youtube, een On Demand app via de tv provider, Videoland en Disney+. In het buitenland zijn Hulu en Amazon Prime ook erg populair.

De streaming services zijn beschikbaar op verschillende apparaten. Je kunt ze gebruiken op mobiel, web, Apple TV, Chromecast en Android TV. Daarnaast is de opzet van de apps vrijwel identiek. Los van de user interface komen veel navigatie elementen met elkaar overeen.
Het voordeel van veel van deze streaming services is dat ze eigen content aanbieden. On Demand apps via de tv provider doen dit door samen te werken. Zo kun je met Ziggo toegang krijgen tot HBO.

Netflix

Netflix

Disney+

Disney+

Amazon Prime

Amazon Prime

Videoland

Videoland

Populaire devices

Op welke devices worden deze streaming services dan bekeken? Voor de Apple fans is er de Apple TV. Naast de Apple TV wordt er op verschillende apparaten Android TV aangeboden. Daarnaast is Chromecast populair en kijken steeds meer mensen video op hun mobiele apparaat.

Features

Features die populair zijn en overwogen kunnen worden om toe te voegen zijn, live tv, in-app purchases, originele content en een recommandation engine.

Omnichannel UX

Een trend die veel betrekking heeft tot video streaming apps is de omnichannel.
Omnichannel is een multikanaals verkoopbenadering die klanten een naadloze winkelervaring biedt. Dit houdt in dat een gebruiker in de mobiele app opzoek kan gaan naar een product en deze in de winkelmand kan stoppen. Om vervolgens op de laptop de winkelmand te openen en af te rekenen. Een omnichannel is tegenwoordig ook steeds vaker een vereiste van een streaming service app. Dit houdt in dat wanneer je een film kijkt op je telefoon en deze weglegt, je vervolgens vanaf hetzelfde punt verder kunt kijken op de televisie.
De apps op de verschillende devices moeten dezelfde indeling hebben, zodat de gebruiker niet wordt verward. Wel is het belangrijk dat de apps de design guidelines aanhouden van elk device. Voor het design heb ik onderzocht wat deze guidelines zijn en hoe je ze toepast.

Keuzes

Tv wordt tegenwoordig niet alleen maar op één device bekeken. Mensen gebruiken verschillende devices en daarom is het goed om de app te realiseren voor meerdere populaire devices. Iets dat daarbij erg belangrijk is, is de omnichannel. Gebruikers verwachten een naadloze ervaring over de verschillende devices die zij hebben. Dit moet worden meegenomen in de uitwerking van het eindproduct. Om niet achteraan de concurrentie te blijven, moeten nieuwe features worden geïmplementeerd.

Sitemap

Om een idee te krijgen van de navigatiestructuur voor de app, zijn de apps van de concurrenten bestudeerd. Ook moest de app de functionaliteit hebben om live tv uit te zenden. Vervolgens heb ik een structuur geschetst met pagina’s en opvolgende pagina’s.

Favorieten feature

Wireframes

Op basis van de navigatie structuur die in de sitemap is geschetst, zijn er wireframes gemaakt voor de verschillende devices. Dezelfde functionaliteiten moesten op de verschillende devices aanwezig zijn. Sommige wireframes kwamen tussen verschillende devices gedeeltelijk overeen, zoals die van iPhone en Android. Nu kwam het onderzoek gedeelte over design guidelines goed van pas en kon dit worden toegepast op de wireframes. De wireframes zijn meerdere keren doorgenomen met het design team, zodat dit niet meer werk opleverde tijdens de designfase.

iPhone Wirefames

iPhone Wireframes

Apple TV Wireframes

Apple TV Wireframes

Features

De app biedt de mogelijkheid om Live TV te kijken, deze op te nemen en gebruik te maken van Catch Up-diensten. Overzichtelijk in een gebruikersvriendelijke tv gids.
Of het nu gaat om het streamen van Live TV, Catch Up of On Demand content, de OTT NOW! biedt de beste mogelijkheid voor het consumeren van videocontent. Daarnaast is er de optie om eenvoudig inhoud van externe providers in de app te integreren.
Content in de vorm van series en films kunnen makkelijk worden gedownload op het apparaat, zodat deze kunnen worden afgespeeld zonder internet. Dit biedt de gebruiker de kans om op elk moment van de dag gebruik te kunnen maken van de app.

Tv Gids On Demand Downloads

Devices

Na het realiseren van de wireframes ben ik begonnen met het ontwerpen van high-fidelity schermen. Ik ben dit als eerste voor de Apple TV gaan doen. Ik had een goede houvast aan de sitemap, wireframes en het opzoeken van de design guidelines kwam ook erg goed van toepassing.
Het ontwerpen voor het eerste device was het meest ingewikkeld. Toen eenmaal de ontwerpen van de Apple TV klaar waren, kon ik design elementen hergebruiken voor de andere devices. Vervolgens ben ik begonnen met het ontwerpen van de schermen voor iPhone en iPad. Met deze designs kon ik sneller ontwerpen voor Android devices, om uiteindelijk de benodigde design aanpassingen specifiek voor Android te maken.

iPhone

iPhone Design
Apple TV Design

Apple TV

Web

Web Design