Nya plattformar, nya kommersiella förutsättningar och nya användarbeteenden. Det var det som gjorde att den dåvarande TV4.se hade spelat ut sin roll. Med den insikten kom TV4 till oss för att få hjälp med att definiera vad en helt ny TV4.se skulle vara för något.

”Vi behöver er kreativa process.”

Tommy Jarnemark, affärsansvarig TV4 Digitala Medier

Målsättningarna med den nya TV4.se var att:

  • skapa, möjliggöra och ta till vara på tittarnas engagemang
  • vara tillgänglig från datorer, mobiler och surfplattor
  • öppna för innovativa möjligheter till annonsering
  • öka lagret av videoannonser, särskilt genom klippkonsumtion

Och visionen var tydlig:

”TV4.se ska bli Sveriges bästa sajt!”

Sandra Brundell, redaktionschef TV4.se

Frågetecknen var många. Vi började med att ta fram en grund för konceptet att stå på.

Strategi

Tvn har fått hård konkurrens

I arbetsgruppen hade vi både läst om och själva upplevt ett nytt användarbeteende. Vi hade suttit med våra mobiler i tv-soffan och följt twitterflödet till Melodifestivalen och Agenda och insett att det här var något nytt och intressant. Men hur såg det här beteendet ut egentligen? Vilka program var det som olika tittare engagerade sig i? Hur såg engagemanget ut och hur utbrett var det? Och, inte minst, hur kunde TV4 dra nytta av det i sin annonsaffär? Det var några av de övergripande frågeställningarna som vi behövde besvara.

I strategiarbetet undersökte vi:

  • Tittarnas nya beteende
  • TV4:s kommersiella förutsättningar
  • Omvärldstrender
Daytonas modell för digital strategi har tre fokusområden för researcharbetet.

En djupdykning i nuläget

Eftersom ramarna för vad TV4.se skulle bli var så pass lösa ville vi och TV4 göra en så bred kartläggning som möjligt. I researcharbetet använde vi därför ett brett spektrum av undersökningsmetoder, såväl kvalitativa som kvantitativa.

Fånga upp behov, beteenden och förväntningar

En av de allra viktigaste insikterna var att engagemanget var extremt programspecifikt. Idolpubliken hade helt andra behov än de som tittade på Solsidan.

Vi kunde ändå formulera ett antal generella insikter om tittarnas nya beteende, den nya kommersiella spelplanen och trender i omvärlden. Det här är några av huvudteserna.

Nya kommersiella möjligheter

Det sker en snabb utveckling av nya digitala annonsformat, inte minst inom rörlig bild. Native advertising och t-commerce är bara två exempel. TV4.se skulle, i en responsiv miljö, kunna ta till vara på de nya möjligheter som utvecklingen innebär.

Engagemangslivscykel

Tittarnas intresse var knutet till tv-tablån enligt ett tydligt mönster. TV4.se skulle återspegla det här skiftande intresset genom att understödja olika typer av beteenden på olika tider på dygnet och olika dagar i veckan.

Typanvändare

Olika tittare hade olika behov och beteenden. Vi kokade ner våra kundinsikter till fyra typanvändare som vi använde i designarbetet till att prioritera innehåll och funktioner. Typanvändarna plockades också upp av redaktionen som använder dem i sitt innehållsarbete.

Relationen till TV4 Play

Våra användarstudier bekräftade den bild som även utländska rapporter gav: second screen-beteendet var stort. TV4.se skulle vara en plattform för framåtlutad interaktion och engagemang—medan TV4 Play skulle vara platsen där man tittade på tv.

Struktur för enkel navigering

Genom en enkel sidstruktur kunde vi låta tittarna navigera utifrån olika aspekter, såsom tid, alfabetiskt eller sök.

Modulär arkitektur

Vi tog fram ett system för att klassificera TV4:s olika program utifrån deras respektive tittares behov. De gemensamma nämnarna var många, men det fanns också stora skillnader. Tjänsten behövde vara modulär för att kunna anpassas till de olika programmen.

Design

Så gjorde vi det komplicerade enkelt

Det var flera saker som gjorde designarbetet till en utmaning.

  1. Tjänsten skulle vara väldigt omfattande, med vyer för varje program och varje avsnitt som sändes på någon av TV4:s (vid den här tiden) 11 kanaler.
  2. Ramverket behövde vara flexibelt nog att innehåll och funktioner skulle kunna anpassas till de olika programformaten.
  3. Displayannonsaffären var fortfarande viktig — och hur får man den, som bygger på bannerannonser i fasta storlekar, att fungera i en responsiv miljö?

Säkra den bästa kundupplevelsen

Vi använde en iterativ och användarcentrerad process. Vi utgick från de behov som våra olika användartyper hade och testade det vi hade designat på riktiga användare. Vi delade också upp designarbetet i steg. Vi började med att utforma tjänstens viktigaste vy: programsidan. Vår plan var att om vi fick till den på ett bra sätt så skulle resten av tjänsten gå av bara farten.

Insikt

En analys av testernas resultat ledde till nya insikter och sätt att åtgärda problem eller skapa nya lösningar.

Prototyp

Baserat på det vi vet designar vi en prototyp. Tidigt i projektet var prototypen ett par enkla skisser på papper, men detaljnivån ökade gradvis och i slutet av projektet utgjordes prototypen av färdig gränssnittskod.

Test

Vi testade den prototyp vi tagit fram på riktiga användare.

I arbetet med TV4 jobbade vi så här.
TV4.se:s struktur är enkel och baseras på en datastruktur snarare än en sidstruktur.

En domänbaserad arkitektur

Tittarnas intresse var tätt förknippat med de objekt som tv-världen består av: program, personer och ämnen (t ex matlagning och sport). Inspirerade av stora mediesajter som The Guardian, The New York Times och inte minst BBC så strukturerade vi tjänsten baserat på de objekten, snarare än ”sidor”, ”artikelflöden” eller andra mer traditionella skärningar. Fördelarna med detta är många och det skulle vi kunna skriva en hel uppsats om — men det har andra redan gjort.

Navigeringsmässigt tillgodosåg vi dessutom fyra olika sätt att navigera:

  • baserat på tid — som vi sett i strategin styrde tittarnas intressenivå
  • baserat på alfabetisk ordning — för den som vet vad den letar efter
  • utifrån sök — också för den som vet vad den letar efter
  • kontextuellt — inte minst för en ökad serendipitet

Layout med hjälp av prototyp

Det första vi gjorde var att försöka hitta en grundlayout och ett par principer för hur innehåll och funktioner skulle flöda beroende på skärmstorleken. För att kunna testa att ramverket fungerade utvecklade vi en enkel klickbar prototyp i HTML.

Grundlayout

Även om stora delar av tjänsten var specifik för de olika programmen fanns det många funktioner som skulle vara tillgängliga över hela tjänsten. Vi tog fram principer för hur de skulle placeras.

HTML-prototyp

Med en enklare prototyp kunde vi utforska olika vägval för det responsiva ramverket. Arbetet med följsamheten var särskilt utmanande eftersom vi hade fasta annonsstorlekar att förhålla oss till.

Nyckeln till framgång

Även om tjänsten skulle byggas upp av moduler för att kunna stödja olika typer av program fanns det en ganska stor minsta gemensam nämnare som gällde för alla program. Det fanns också en mängd funktioner som tillhörde tjänstens ramverk.

Programsidan absolut viktigast

Det är naturligt att börja designa det som är kärnan i en tjänst och sedan jobba sig utåt. På TV4.se var programsidan absolut viktigast. Det var dit TV4 ville driva tittarna (av annonsförsäljningsskäl) och det var där vi på bästa sätt kunde fånga upp tittarnas engagemang. Vi började därför med den vyn.

Därefter designade vi tjänstens andra sidor i en iterativ process.

Så jobbade vi fram visuell design

Att tjänstens design skulle lyfta fram innehållet och annonserna var egentligen det enda vi visste. Manéret skulle tillåta att enskilda program tog ut svängarna, med helt egna uttryck.

För att hitta rätt och skaffa oss en gemensam bild av det visuella koncept vi skulle ta fram genomförde vi flera övningar tillsammans med produktägare och TV4:s varumärkesansvariga.

Vilken känsla skulle designen förmedla? Reglagen var en av de övningar vi genomförde.

Två manér

Baserat på reglagen tog vi fram två olika utkast till manér. På ytan kan de tyckas vara ganska lika, men uttrycken är distinkt olika.

Det manér vi landade i till slut var en blandning av de två utkasten.

För att få ett enhetligt uttryck tog vi tidigt fram ett bibliotek av återanvändbara grafiska komponenter.

Komponentbiblioteket.

Slutresultatet är en design som följsamt anpassar sig till tittarens tekniska förutsättningar. Tjänsten är uppbyggd av tre layoutlägen: en för desktop, en för surfplatta och en för mobiltelefoner.

Klicka på bilden för att förstora.

Startsida
Programsida (desktop)
Programsida (tablet)
Programsida (mobil)
Clip heaven (tablet)

Second screen-upplevelsen

Under 2013 tog vi tillsammans med TV4 fram ett second screen-läge i form av en single-page responsiv webbapplikation. Vänstermenyn består av sex stycken ”appar”. Det går att skapa och lägga till fler appar beroende på vilket program det gäller.

Händelser

Den här appen innehåller ett samlat flöde av redaktionellt material, med omröstningar, bildspel med mera.

Twitter

Redaktionellt utvalda tweets om programmet från tittare och programdeltagare.

Bilder

Bakom kulisserna-bilder från Instagram.

Chat

Realtidschat mellan tittare.

Rösta

Information om hur man röstar i programmet.

Se live

Den linjära tv-sändningen.

Resultat

Sveriges bästa sajt

En första pilotlansering gjordes till Hockey-VM 2012. Hela tjänsten lanserades i juni samma år. Sedan dess har konsumtionen av klipp ökat stadigt, vilket har lett till intäktsrekord för rörlig reklam.

TV4.se vann också InternetWorld Topp 100 2012, både i underhållningskategorin och totalt. Vi lyckades därmed uppnå visionen för projektet, att bli Sveriges bästa sajt.

”Daytona har haft en stor och viktig roll i den resa TV4 gjort på digitala plattformar de senaste åren. Tillsammans med oss har de utvecklat koncept och design för våra digitala tv-tjänster och hjälpt oss att ta djärva och kloka beslut, alltid med tittaren i fokus.”

Cecilia Beck-Friis, Vice VD, TV4

2:a plats Topp 100 2011

”TV4 är experter på att koppla ihop tv-innehåll med webbinnehåll. /.../ [TV4] bygger närvaro som matchar och ibland överträffar deras ambition och utbud i tv-tablån.”

Vinnare Topp 100 2012

”I en bransch präglad av kraftig förändring till följd av digitaliseringen lyser en aktör just nu starkare än de andra.”

Tre frågor till Rasmus Sellberg, strateg

Vad har varit de viktigaste framgångsfaktorerna?

— Förutom det täta samarbetet med TV4 vill jag lyfta fram de grundliga användarstudierna vi genomförde i det inledande strategiprojektet. Vi lärde verkligen känna tittarna och deras behov.

Vad borde ha gjorts annorlunda?

— Det här var ett av våra allra första responsiva projekt och vi lärde oss massor. Så här i efterhand skulle vi ha gått snabbare till kod — designarbetet blev lite för statiskt.

Mest stolt över?

— Att vi lyckades skapa en tjänst som levde upp till i stort sett alla målsättningar. Vi ökade lagret för rörlig reklam och vi besegrade ärkerivalen SVT i Topp 100.

Rasmus Sellberg, strateg

Roller i projektet

  • Strategi, koncept & design: Daytona
  • Webbutveckling: TV4, Daytona och Fleecelabs

Vill du veta mer om projektet eller hur vi arbetar?

Kontakta Martin Ragnevad, VD.
martin.ragnevad@daytona.se