Redesign en ontwikkeling van de grootste online tv-gids van Nederland

De grootste online tv-gids van Nederland heeft een nieuwe frisse uitstraling gekregen en op het gebied van gebruiksvriendelijkheid is een flinke stap gezet. Daarnaast heeft Move4Mobile de volledige realisatie van de native apps voor Android en iOS voor haar rekening mogen nemen.

Afbeelding

Grootste online tv-gids

Met meer dan een half miljoen gebruikers per dag, verspreid over de app en website, is TVgids.nl uitgegroeid tot de grootste online televisiegids van Nederland. Met een keuze uit meer dan 100 tv-zenders en tips voor films, series en sport ontdek je via TVgids.nl snel wat je wilt kijken op tv of on demand.

De gedateerde vormgeving en feedback van gebruikers waren redenen om dit platform een volledig redesign te geven en naar een hoger niveau te tillen. Opdrachtgever Bindinc. en Move4Mobile sloegen de handen ineen met als resultaat: een geheel vernieuwd uiterlijk voor zowel de app als website, waarbij usability op één staat. Bij de app hebben we gekeken hoe we de meest recente design guidelines van Android en iOS konden combineren met een stijlvorm die voor zowel eindgebruiker als opdrachtgever vertrouwd aanvoelt.

Back to basics

De briefing was duidelijk. Terug naar de basis! In de loop der tijd is de app uit een opeenstapeling van functionaliteiten gaan bestaan waardoor juist de basis van de app, het bekijken van zendtijden, in de schaduw van de rest stond.

Een analyse van de app en site was de start van het designtraject. We hebben gekeken hoe de app werd ervaren door gebruikers en de pijnpunten op een rij gezet. Een veelgehoorde klacht was de onduidelijke navigatie en hoeveelheid features. Een feature die juist als positief ervaren werd was de gids zelf.

Aan de hand hiervan zijn we begonnen met het inzichtelijk maken van de core features. Dit heeft zich vertaald in een versimpelde navigatie met nog maar vier hoofdpagina’s: home, tvgids, films+series en mijngids. Minder afleiding dus, en alleen nog maar pagina’s die er écht toe doen.

Afbeelding

Look & feel

De ‘back to basic’ mentaliteit gold niet alleen voor features, maar ook voor de uitstraling van de apps en website. Door de accentkleur rood spaarzamer in te zetten, is er een lichte interface ontstaan waardoor er een grotere focus op beeldmateriaal is ontstaan.

Ook het  logo hebben we met subtiele wijzigingen een up-to-date uiterlijk gegeven. De typografie is versimpeld en oogt vriendelijker, net als de kleur rood die we wat feller hebben gemaakt. In de app trekken we paginatitels, zoals ‘voorjou’ en ‘films+series’ gelijk aan de stijl van het logo.

 


'Er is echt goed meegedacht om van de nieuwe TVgids.nl-app oprecht een versie 2.0 te maken. Zo hadden wij al wat ideeën voor een 'MijnGids'-gedeelte in de app. Dankzij aanvulling van Move4Mobile op die ideeën, kwamen we samen tot een nieuwe gepersonaliseerde tv-gids.'

Yvin - Productmanager Digitaal Bindinc

 


Componenten zoals cellen met tijden, knoppen en navigatie-elementen zijn versimpeld. Er staat nu een set aan standaard componenten die we op zowel iOS, Android als web kunnen toepassen. Hierdoor ontstaat een eenduidige look & feel, waardoor gebruikers op elk platform een soortgelijke ervaring hebben. Standaard iOS- en Android componenten zoals bijvoorbeeld top- en bottom navigatie zijn juist native gehouden, zodat de apps ondanks de custom styling vertrouwd aanvoelen op de apparaten waaraan een gebruiker gewend is.

Meer gemak

De gebruiker ervaart meer gemak met de vernieuwde app. De app gidst de gebruiker op interactieve en persoonlijke wijze door het grote aanbod op televisie en de on-demand-kanalen. Daarnaast worden aanbevelingen getoond op basis van je voorkeuren. In de pagina ‘MijnGids’ kan de gebruiker zelf een lijst met genres samenstellen om zo dagelijks persoonlijk kijkadvies te krijgen.

Omdat de app dagelijks door een groot aantal gebruikers wordt bezocht, is het van belang dat de server zo min mogelijk belast wordt. Voor het ophalen van data hebben wij gebruik gemaakt van een caching-laag aan de app kant. Dit houdt in dat de data niet elke keer opnieuw opgehaald hoeft te worden. De functionaliteit in de app wordt hierdoor niet onnodig vertraagd. Bijkomend voordeel is dat de server op deze manier ook ontlast wordt.

Gefaseerde uitrol

De update van de TVgids.nl app is een grote verandering voor een groot aantal gebruikers. Wij hebben er daarom voor gekozen deze app gefaseerd uit te rollen, zodat onvoorziene zaken opgelost konden worden voordat de update voor iedereen beschikbaar zou zijn. Apple en Android bieden beiden de mogelijkheid van een gefaseerde uitrol aan. 

Een gefaseerde uitrol is aan te raden wanneer een app een groot aantal gebruikers heeft. Met behulp van Google Firebase kan met Analytics en Crashlytics gevolgd worden wat er gebeurt tijdens de uitrol.

Bij de uitrol van de TVgids.nl app zijn we gestart met 3% van de gebruikers. Omdat de uitrol soepel verliep is het percentage daarna verhoogd naar 20%. Dit gaf een goede indicatie van de belasting van de server in relatie tot het gebruik van de app weer. Vrij snel daarna hebben we het percentage verhoogd naar 100%.

Webdesign

Het vernieuwde uiterlijk van de website is geheel in lijn met de app. Dankzij het opgebouwde designsysteem met componenten kunnen pagina’s eenvoudig worden opgebouwd. Door daarnaast met duidelijke blokken te werken staan advertenties altijd zo rustig mogelijk in de pagina, zodat deze zo min mogelijk afbreuk doen aan de ervaring.

Bij de ontwikkeling van de TVgids.nl app en website werkten we samen met isource als dataleverancier. Isource willen we bedanken voor de prettige samenwerking.

De vernieuwde website van TVgids.nl is hier te bekijken.

Afbeelding

De TVgids.nl apps zijn te downloaden via de stores.

Yvin Hei
Uitgelicht

‘De samenwerking tussen Move4Mobile en onze andere leveranciers verliep erg prettig.’

‘Voor de content in de app – televisiegidsen, nieuwsartikelen, on demand-kanalen, advertenties etc. – zijn wij als Bindinc afhankelijk voor een grote groep leveranciers van deze data. Move4Mobile heeft met al deze leveranciers goed contact onderhouden om de app te kunnen ontwikkelen naar onze wensen.