Daytonas Projekt

Coop.se

Daytona Communication — lör, 13 okt 2012 00:00:00 +0200

Kunderna kan ta med sig nya Coop.se överallt – både till iPaden i soffan för att planera veckans middagar och till butiken för att bocka av varor från inköpslistan i mobilen.

Coop är Sveriges näst största dagligvaruhandlare och ägs av sina över tre miljoner medlemmar.

Hur kan Coop.se inspirera och hjälpa kunderna att förenkla sin vardag? Hur kan medlemmarna få större möjlighet att påverka? Hur kan vi designa en tjänst med responsiv webbdesign som tillgodoser behoven hos den växande mängden besökare på mobiler och surfplattor? Det var några av huvudfrågorna när Coop vände sig till Daytona för att få hjälp med att utforma den nya Coop.se.

Strategi

Projektet inleddes med en intensiv strategifas, där vi träffade nyckelpersoner från Coop, gick igenom existerande kundundersökningar och webbanalys och tydliggjorde webbplatsens målgrupp och syfte med hjälp av två huvudsakliga verktyg.

Shopping missions – varför går man och handlar?

För att låta Coop.se bli en förlängning av det Coop som kunderna möter lade vi tidigt stor vikt vid hur kunderna beter sig i Coops butiker. Genom ett titta på ett antal shopping missions – som storhandlingen som planeras noga eller kompletteringshandlingen där man rusar in för att köpa en ingrediens man glömt – visste vi vilka behov webbplatsen behövde stödja.

Målkarta

För att tidigt lägga fokus på det önskade slutresultatet identifierades de övergripande målen med webbplatsen, både utifrån vad kunderna ville uppnå och vad Coop ville att kunderna skulle göra.

Resultatet ritades ut som en målkarta som tydligt visar deras relation till varandra.

Koncept

Konceptfasen delades in i tre parallella spår.

Att konceptutveckla och ta fram idéer och funktioner inom ett antal fokusområden som skulle bli hjärtat av den nya Coop.se
Att skapa en prototyp som kunde hjälpa oss att bestämma webbplatsens layout och responsiva principer
Att ta fram ett nytt grafiskt manér som utifrån Coops övergripande färg och form bestämmer hur Coop ska se ut digitalt

Mitt Coop – allt det viktiga på en och samma plats

Det fanns redan vissa funktioner för personaliserat innehåll på Coop.se, men de var placerade på en egen sektion av webbplatsen som i övrigt hade fokus på administration av medlemmens kort och konton. Med en mer vardagsnära sajt behövde det personliga vara närvarande på hela tjänsten.

Resultatet blev en personlig panel, Mitt Coop, som finns med överallt på tjänsten. Där kan besökaren se sina sparade recept, inköpslistor, veckoplaneringar och erbjudanden. Mitt Coop finns alltid tillgänglig – på dator, på surfplatta och i mobilen så att funktionerna kan följa med ända in i butiken.

Vad ska vi äta till middag?

Den ständigt återkommande frågan ville vi råda bot på när vi tog fram Mina middagar, en funktion där besökaren kan få förslag på veckomenyer men också själv har en möjlighet att byta ut receptförslagen mot sina favoritrecept.

Att skapa möjligheter för besökaren att påbörja och genomföra sin veckoplanering från flera olika platser i tjänsten och med olika utgångspunkter har varit centralt i funktionsutvecklingen. Detta för att tillgodose den del av trafiken som landar direkt på exempelvis receptsidorna.

Mina idéer

En av de grundläggande målsättningarna med den nya tjänsten var att ge mer plats för medlemmarna att tycka till och komma med åsikter och synpunkter. Vi utvecklade ett flexibelt ramverk för detta – Mina idéer.

Genom Mina idéer kan besökarna lämna förslag på förbättringar eller önskemål rörande exempelvis sin butik eller erbjudanden och få bifall från andra besökare, samtidigt som Coop själva har en möjlighet att kommentera eller svara.

Responsivitet, med hjälp av en prototyp

För att snabbt och effektivt kunna testa olika layoutidéer, bestämma brytpunkter och principer för skalning och omstrukturering av innehåll skapade vi en klickbar HTML-prototyp bestående av de mest grundläggande komponenterna till tjänsten.

Efter ett antal iterationer och ett antal användningstester landade vi i den modell som legat till grund för tjänstens samtliga vyer och principer och kunde redan på prototypstadiet avfärda lösningar som inte skulle fungera samt identifiera problem och fallgropar.

Grafiskt manér

Med utgångspunkt i Coops nya övergripande grafiska manér påbörjades arbetet med att göra översättningar och kompletteringar för att få det att fungera digitalt. I manérarbetet bestämdes exempelvis:

Vilka färger och färgskalor som skulle användas och till vad
Vilka typsnitt som skulle återfinnas på tjänsten, i vilka grader och för vilka ändamål
Hur grafiska detaljer som knappar, formulärfält, innehållspuffar och ikoner skulle se ut

Manéret stämdes löpande av med Coop och utvecklades i flera omgångar innan vi landade i en version som både vi och Coop kände oss nöjda med.

Design

Så snart prototypen och det grafiska manéret var färdigställda påbörjades designen av gränssnittet.

Steg för steg skapades de vyer och de grafiska komponenter som behövdes för att bygga en komplett tjänst. Arbetet skedde i ett nära samarbete mellan Daytonas interaktionsdesigners, designers och gränssnittsutvecklare.

Allt sammanställdes i ett komponentbibliotek, där samtliga beståndsdelar till tjänsten återfanns i färdig gränssnittskod, och ytterligare en prototyp, innehållandes samtliga sidmallar – med tillhörande moduler, klickbara och med färdiga responsiva principer. Allt helt anpassat för att kunna visas på enheter med olika skärmstorlekar på ett optimalt sätt och färdigt för leverans till systemutvecklarna.

Nansen står för systemutvecklingen i EPiserver.

Ett första steg

Vi är stolta över att ha fått vara med och utveckla nya Coop.se tillsammans med Coop och ser fram emot att fortsätta utveckla nya smarta tjänster som kan göra Coops medlemmars vardag ännu enklare och smidigare.

design webbstrategi konceptutveckling webbanalys lojalitet interaktionsdesign varumärke målgruppsanalys prototyp användningstester iphone android ipad responsiv webbdesign tjänstedesign

Vill du också jobba hos oss?
Just nu söker vi en interaktionsdesigner, en affärsutvecklare, en account director, en konceptuell designer och en gränssnittsutvecklare.

Di.se – Sveriges största ekonomisajt

Daytona Communication — mån, 25 jun 2012 00:00:00 +0200

Daytona har gjort om Di.se – Sveriges största och bästa sajt för ekonominyheter och en av landets allra mest lönsamma redaktionella produkter.

Målet med projektet var att öka läsarnas engagemang och lojalitet och därmed öka lönsamheten ytterligare. En nyckel till att lyckas var att arbetet skedde i nära samarbete med Di.se, den tekniska leverantören Bonnier Digital och säljbolaget Bink. Det täta samarbetet gjorde att vi kunde genomföra projektet (undantaget den tekniska utvecklingen) på drygt två månader.

Strategi

Projektets strategiska del bestod primärt av en kartläggning av tre områden:

Di.se:s affärsmässiga drivkrafter och varumärke
det redaktionella arbetet
läsarna och deras behov

En av metoderna vi använde för att kartlägga läsarna var att genomföra en grundlig webbanalys på den dåvarande webbplatsen för att ta reda på hur den användes. Vi kunde bland annat se att läsarna kunde delas in i tre grupper: de som bara läste nyhetsartiklar, de som också läste börs- och valutakurser, samt slutligen de som dessutom deltog i läsarforumet Börssnack och portföljhanteraren Trader. Engagemanget var betydligt högre bland de två senare grupperna. En viktig insikt var därför att vi ville locka över artikelläsarna till de mer engagerade grupperna.

Lägre tröskel med Di-kontot

Vi började med att slå ihop de olika konton som fanns för Börssnack och Trader till ett gemensamt Di-konto. Med det nya kontot har det också blivit smidigare att kommentera artiklar än tidigare. Vi har också gjort det lättare att hitta till de inloggade tjänsterna genom att lyfta ut deras innehåll till andra relevanta platser på sajten.

Domändriven design tar vara på engagemanget

En annan insikt var att läsarnas intresse var intimt förknippat med specifika bolag och personer – det vill säga de primära ämnesområden som Di.se bevakar. Det intresset tog vi fasta på och strukturerade därför sajtens innehåll kring dessa ämnen med hjälp av etiketter.

Redaktören märker snabbt de artiklar han eller hon skapar med en eller flera etiketter – det vill säga de bolag, personer eller ämnen som artikeln handlar om. Den minimala redaktionella insatsen får följande effekter:

Vi kan per automatik publicera relevant vidareläsning i anslutning till artikeln, exempelvis en lista med "fler artiklar om SAAB".

Vi kan samla all information på Di.se som är märkt med etiketten, till exempel bolaget SAAB, på en särskild sida för de läsare som vill fördjupa sig, komplett med artiklar, eventuella börskurser, köp- och säljrekommendationer samt pressmeddelanden.
Vi kan låta läsarna bevaka etiketter så att de blir meddelade när det har publicerats något nytt om till exempel SAAB.

Lättare att hitta med ny struktur och bättre sök

Tidigare fanns hela sajtens navigering i vänsterkanten med ungefär 100 länkar, precis som på exempelvis Expressen och Aftonbladet. Läsarna använde sällan den navigeringen och den upptog därför onödigt utrymme. Innehållet har fått en ny struktur och en tydligare navigering med de mest använda ingångarna i toppen som gör det enklare att hitta. Redaktören kan också lyfta upp de mest aktuella ämnena i toppnavigeringen, så att den som exempelvis vill följa Eurokrisen snabbt hittar allt som handlar om det ämnet.

Sajtens sökfunktion har gjorts om i grunden och den prioriterar nu de vanligaste sökningarna. Det görs både med hjälp av genvägar medan läsaren skriver in sökordet och på sökresultatsidan, där bolag och personer presenteras överst.

Snabbhet

Ett av Di.se:s viktigaste varumärkeslöften är snabbheten. Förutom att Di.se skulle fortsätta vara först med många nyheter hade vi som mål att sajten skulle andas snabbhet, såväl i grafiskt uttryck som i funktioner. Alldeles färska artiklar prioriteras visuellt, och läsaren uppmärksammas på när någonting nytt har hänt – utan att sidan behöver laddas om.

Funktioner som ökar lojaliteten

Koncepten kring lojalitet handlade om att dels ge ett extra värde i form av funktioner som ger läsarna en personlig upplevelse, dels av att hitta smarta sätt att få läsarna att komma tillbaka.

Inloggade läsare har en head-up-display (HUD) i botten av webbläsaren. I den syns det bland annat när det publiceras någon artikel om någon av de etiketter som läsaren bevakar samt när någon svarar på en kommentar eller foruminlägg som läsaren har skrivit.

Läslista

De artiklar som läsaren inte hinner läsa just nu kan läggas i en personlig läslista som är åtkomlig via HUD:en. Läsaren får senare en påminnelse om artiklarna i läslistan via e-post.

Mätning och optimering

Att definiera KPI:er utifrån de övergripande målen har varit en viktig del av projektet. Förutom traditionell trafikmätning så har vi implementerat cirka 60 olika mätpunkter som låter oss se hur sajtens olika funktioner faktiskt används och vilken effekt det får på målen. På så sätt kan vi löpande optimera webbplatsen så att den blir ännu bättre.

design webbstrategi webbanalys interaktionsdesign målgruppsanalys tjänstedesign

Temaresor.se

Daytona Communication — ons, 21 mar 2012 00:00:00 +0100

Med insikten att olika människor väljer och bokar resor på olika sätt ökade vi Temaresors konverteringsgrad med 71 %.

Temaresor har arrangerat resor till världens alla hörn i över 40 år, alltid med ett fokus på natur och kultur. De är kända för sina kunniga och engagerade reseledare, och för att alltid ge en upplevelse utöver det vanliga. Men hur förmedlar man det tydligt på webben, där konkurrenternas resor kan se förvillande lika ut? Och hur kan man använda webben för att nå ut till nya målgrupper? Det var två av frågeställningarna när TUI Nordic, som äger Tema, ville göra om Temaresors webbplatser i Sverige, Norge, Danmark och Finland.

Strategi

Projektet inleddes med en strategifas. Vi ville få en tydlig bild av vad som driver resenärerna. Vad är viktigt när man letar resa? Hur planerar och genomför man sin bokning? För att ta reda på svaren använde vi fokusgrupper och webbanalys.

Relesedaren viktig

En av insikterna var att de kunniga reseledarna är ett viktigt skäl till att man väljer att resa med Tema. Vissa kunder är till och med så hängivna att de väljer resmål baserat på vilken reseledare de rest med tidigare.

Olika utgångspunkter i köpprocessen

Det blev också tydligt att det existerar olika typer av köpbeteenden. Vissa vill hitta en resa inom ett bestämt tidsintervall, medan andra är mer intresserade av det specifika resmålet och programmet för resan.

Genom webbanalys i Google Analytics kunde vi verifiera en hel del av de beteenden som identifierats i fokusgrupperna på ett kvantitativt sätt.

Strategiska riktlinjer

Strategifasen mynnade ut i fyra strategiska riktlinjer:

Plantera ett frö hos den stora mängd besökare som kommer till Temaresor från Fritidsresor.se / Startour.no / Startour.dk / Finnmatkat.fi.
Inspirera förstagångsbesökare och få dem att bli mer intresserade av produkten än tidigare.
Konvertera återkommande besökare genom att förenkla webbplatsernas struktur och besvara de frågor som utgör ett hinder i köpprocessen.
Skapa ambassadörer för varumärket.

I det sista strategimomentet definierades vilka nyckeltal som skulle ligga till grund för framtida effektmätning av resultatet. Vi implementerade också en insamling av motsvarande data från den dåvarande Temaresor.se för att möjliggöra en jämförelse.

Koncept

I konceptfasen satte vi de övergripande principerna för de nya webbplatserna. Vi började med att formulera ett antal personas, fiktiva karaktärer som representerade de målgrupper och beteendemönster som identifierats i strategifasen.

För att tydliggöra och illustrera behoven närmare utformade vi ett antal scenarier. Utifrån scenarierna tog vi sedan fram ett stort antal idéer och lösningsförslag. Baserat på de strategiska riktlinjerna gallrade vi sedan bland idéerna, och utformade strukturen för de nya webbplatserna.

Ett bokningsflöde med många ingångar

En av de saker som är viktigast att få rätt på en resewebbplats är bokningsflödet. Vi började med att förenkla bokningen genom att lista avgångarna direkt på resesidorna, så att man inte behöver söka för att se när en resa går. För att stödja de olika köpbeteendena vi sett i strategifasen var det också viktigt att skapa fler ingångar till bokningsflödet.

Vi landade i två nya funktioner: ett kalendarium som går att filtrera efter datum, resetyp och resmål, samt en världskarta som visar på bredden av resor. Oavsett om man letar resa baserat på resmål eller på datum finns det nu logiska vägar in i bokningsflödet.

Plats för inspiration

En resa med Temaresor är mycket mer än en traditionell chartersemester; det är en upplevelse som innefattar smaker, lukter och aktiviteter. För att göra bilden av detta tydlig fick Temaresors fantastiska bilder och filmer ta större plats, samtidigt som en helt ny sektion skapades: "Tips & Artiklar". Här återfinns resereportage och fördjupande artiklar om de olika resmålen där reseledarna kan sätta en mer personlig prägel på innehållet och artiklarna behandlar allt från det historiska Kina till traditionell mat från Kapstaden.

Lyfta fram Tema som experter

För att framhäva Temaresors roll som experter och på samma gång öka den personliga tonen gav vi reseledarna en mer framträdande roll. Genom att låta reseledarna själva berätta om resmålen skapas en känsla för upplevelsen man får som resenär, och det blir tydligt hur mycket man får för pengarna. För de riktigt hängivna resenärerna lade vi även till presentationer av reseledarna. Reseledarna fick också en plats som författare till personliga reseberättelser och artiklar.

Design

Efter att idéerna formulerats och prioriterats och strukturen för webbplatserna skapats påbörjade vi designarbetet. Initialt strukturerade vi innehållet på de olika sidorna med hjälp av wireframes för att på ett enkelt och snabbt sätt åskådliggöra layouten.

Översiktlig resesida

Hjärtat på webbplatsen är resesidan. Här presenteras resans dagsprogram med sevärdheter och aktiviteter, och här finns praktisk information om hotell, pass, och utrustning man bör ha med på resan. För att mängden av innehåll ska bli lätt att ta till sig delades sidan upp i ett antal flikar med ökande detaljgrad, med översikt på den första fliken, och fördjupande innehåll på övriga flikar.

Visuell design som skapar reslust

Under hela designfasen arbetade vi i nära samarbete med Temaresor, som kom med feedback och konstruktiv kritik under täta avstämningsmöten. Efter ett antal iterationer övergick arbetet med wireframes till visuell design. Grunden för den grafiska formen utgjordes av Temaresors grafiska profil och de fantastiska bilderna. Mycket fokus lades på att detaljerna skulle skapa en känsla av reslust, men också vara tydliga och användbara.

Produktion

Den tekniska produktionen av webbplatserna genomfördes av Valtech tillsammans med TUI. Vår roll i produktionsfasen var att kvalitetssäkra och göra mindre justeringar i designen.

Resultat: kraftig ökning av konverteringsgraden

Den nya webbplatsen har genomgående fått väldigt positiv respons både från besökarna och från Temas säljare som använder den för att hitta information – det är nu mycket lättare att hitta det man söker efter och strukturen är logisk. Sammantaget har projektet resulterat i en ökning av konverteringsgraden med över 70 %.

e-handel design webbstrategi konceptutveckling google analytics webbanalys interaktionsdesign varumärke personas målgruppsanalys tjänstedesign

ERV.se

Daytona Communication — mån, 03 okt 2011 00:00:00 +0200

Försäkringsbolaget ERV (tidigare Europeiska) är en av de största aktörerna på den svenska marknaden för privat- och tjänstereseförsäkring samt försäkring för utlandsstationerade. ERVs affär är därför starkt knuten till resebranschens mekanismer. Resebranschen som helhet genomgår en mycket omfattande förändringsprocess främst driven av globalisering, konsolidering och ökad internetpenetration.

ERV anlitade oss för att de kände att vår strukturerade process för digital strategi var precis vad deras situation krävde.

Strategi

Första uppdraget var ett digitalt strategiarbete där vi under tre månader kartlade ERVs digitala närvaro; företagets plats i ekosystemet, relationen till användarna, varumärkets avtryck och sist (men inte minst) affärsmål och affärsmässiga drivkrafter i digitala kanaler.

För att komma närmare svaren på frågorna "Hur ska vi prioritera vårt arbete i digitala kanaler?" och "Vad och hur ska vi göra" ägnade vi tid och kraft åt att utforska ERVs unika situation, position och affärsmodell. Arbetet genomfördes genom omfattande omvärldsbevakning, studier av försäkrings- och resebranscherna och de samhälleliga funktioner som också har en del i riskförebyggande och hantering av svenskarnas resande. Några av de saker vi ägnade tiden åt var företagsanalyser, branschrapporter, marknadsundersökningar, EU-direktiv för försäkringsbranchen och webbanalys, för att hitta mönster i beteendet bland besökarna på ERVs befintliga webbplats.

Koncept

I konceptfasen delade vi in målgrupperna i ett antal besökartyper, modeller av användare. Besökartyperna användes som ett verktyg som vi och ERV kunde använda för att identifiera och prata om användarnas behov. De användare som själva bokar både sin resa och försäkring kallade vi exempelvis för “egenresenären” och de hade sina typiska navigeringsmönster, vägar in till webbplatsen, mängd tid till förfogande med mera. Med stöd i besökartyperna tog vi sedan fram scenarier tillsammans med arbetsgruppen från ERV:

“Egenresenären Martin bokar flygbiljetter på svenskaflygresor.se till Filippinerna. Han kan via svenskaflygresor.se teckna reseförsäkring genom att enkelt kryssa i en ruta. Däremot vet han inte om den försäkringen som finns där täcker hans dykning och dykutrustning. Istället genomför Martin köpet utan reseförsäkring och går istället till ERV.se för att undersöka det. Martin har haft ERV tidigare, men har även haft annan reseförsäkring och eftersom han inte råkat ut för något särskilt på sina resor har han inget intryck av vem som är bäst. (...)”

Utifrån scenarierna kunde vi sedan generera idéer på funktionalitet och innehåll som skulle stödja besökartypernas olika behov: “Vad behöver egenresenären i den här situationen?”

Även när innehållet och funktionaliteten skulle prioriteras och struktureras utgick vi från besökartyperna och scenarierna. Vissa besökartyper använde menystrukturen för att hitta rätt, andra föredrog att använda sökfunktionen och några mer ovanliga besökartyper kom endast in till olika avdelningar via direktlänkar från återförsäljares webbplatser eller via sökmotorer.

Webbplatsens olika delar

ERV.se bygger på tre huvudavdelningar som kompletteras med nyheter, företagsinformation, livechatt med kundtjänst med mera. Huvudavdelningarna är:

Våra försäkringar / Köp försäkring

Denna avdelning består av en produktkatalog med tillhörande köpflöde. Upplägget baseras på idéarbetet från våra scenarier och i det nya köpflödet kan användaren tydligt se vad försäkringen täcker och vad den kostar per person. Genom att ändra olika parametrar förändras priset i en alltid synlig prisinformation.

Landsguiden

En tjänst för riskbevakning och proaktiv information till ERVs försäkringstagare. Med hjälp av Google Maps API har vi använt kartor för att visualisera var i världen det finns hjälp att få genom ERVs Euro-Center, och vart det är direkt olämpligt att resa, var man måste rapportera in sin resa i förväg (för att försäkringen ska gälla). En mycket efterlyst tjänst som avlastar institutioner som Utrikesdepartementet, genom att grafiskt visa deras risklista på kartor.

Dina försäkringar

Genom att bygga ett inloggat läge har vi nu öppnat upp för att användarna att följa hur det går i pågående försäkringsärenden och se om man behöver ladda upp kompletterande dokument. Dessutom finns möjligheten att ladda upp viktiga resehandlingar till en filbackup i sitt konto, t ex kan man ha sitt pass eller vaccineringskort där om man skulle bli av med sin väska på resan.

Design

Daytonas designarbete bygger på samarbete. Genom att arbeta både tillsammans med ERVs affärsområdesansvariga och teknikavdelning i en gemensam arbetsgrupp redan från början kunde vi välja lösningar som var effektiva att översätta till kod.

Inledningsvis genomförde vi konceptuella arbetsmöten inom områden som interaktionsdesign och visuell design. Det gjorde att vi snabbt fick en samsyn i arbetsgruppen om vad som är bra digital design för just ERV. Arbetet för respektive kompetens blev därmed enklare och gick snabbare att genomföra.

För att konkretisera våra idéer skapade vi wireframes, som vi testade på användare innan vi påbörjade den visuella designen. För att sedan underlätta inför produktionsfasen tog vi i arbetet med den visuella designen bland annat fram designbibliotek med byggstenar, så kallade assets.

Produktion

Inför systemutvecklingen av webbplatsen, som vi i samråd med ERV kommit fram till att den skulle byggas på EPiServer 6, skapade vi en prototyp av webbplatsen. I prototypen fanns alla byggstenar med som behövdes för att bygga användargränssnittet till hela webbplatsen. Gränssnittet för ERV.se är skapat i HTML5, CSS3 och JavaScript och molnbaserade tekniker som av Google Maps API och Google Fonts API.

webbstrategi konceptutveckling webbanalys interaktionsdesign personas målgruppsanalys prototyp användningstester html5 scenarios tjänstedesign

TV4 Play för webb, iPhone, iPad och Android

Daytona Communication — tis, 12 okt 2010 00:00:00 +0200

"Hur ska framtidens TV-tittande ske?" Det var en av frågeställningarna vi gavs när TV4 kom till oss i början av 2010 och ville göra om TV4 Play. "Och hur ska vi ta betalt?" var en annan. Man ville nämligen omvandla TV4 Play till en freemium-tjänst. En tredje fråga var "Hur ska man ta del av den nya TV4 Play på plattformar som iPhone, Android, iPad och Connected TVs?"

Strategi

TV-branschen är mitt uppe i en omvälvande förändring. Digitaliseringen har gjort att antalet konkurrerande distributionssätt, plattformar och aktörer har ökat kraftigt, med förändrade användarbeteenden som följd.

För att förstå allt detta – och inte minst TV4:s unika situation, affärsmodell och innehållsstrategi – genomfördes ett grundligt researcharbete. En del av detta var en omfattande omvärldsbevakning inom online-TV med omnejd för att tillsammans med TV4 få koll på framförallt amerikanska aktörers satsningar.

Med hjälp av webbanalys skaffade vi oss också en förståelse för användarnas beteende på den dåvarande TV4 Play. Några distinkta beteendemönster blev väldigt tydliga. Ett sådant var att tittandet på ett program är som störst precis efter att det slutat i den eterburna TV-sändningen. Detta beteende, tillsammans med en mängd andra, var viktiga att stödja i vårt koncept.

Koncept

I konceptfasen detaljerade vi ett antal tittartyper; modeller av användare som vi baserade på de behov och beteendemönster vi tidigare hade identifierat. Tittartyperna användes som ett verktyg som vi och TV4 kunde använda för att identifiera och prata om användarnas behov. De användare som ville se det som precis har sänts i TV kallade vi exempelvis för "catch up-tittare" och de hade sina typiska navigeringsmönster, vägar in till tjänsten, mängd tid till förfogande med mera. Beväpnade med tittartyperna tog vi fram idéer på funktionalitet och innehåll som skulle stödja deras olika behov: "Vad behöver catch up-tittaren i den här situationen?"

För de mer mobila plattformarna i projektet (iPhone, Android och iPad) definierade vi dessutom ett antal kontexter som tjänsten kunde användas i. Ett tydligt exempel på en sådan kontext var "på resan", med de specifika behov som mobilt TV-tittande på resande fot för med sig. Eftersom programmets slut sällan sammanfaller exakt med resans slut behöver användaren "på resan" till exempel möjligheten att återuppta tittandet vid ett senare tillfälle.

Även när innehållet och funktionaliteten skulle prioriteras och struktureras utgick vi från tittartyperna och kontexterna. Vissa tittartyper använde innehållskategorier för att hitta rätt, andra föredrog att använda sökfunktionen och några mer utforskande tittartyper som var ute efter förströelse, vilken som helst, hjälptes mest av kontextuell navigering.

Design

Ett centralt begrepp i projektet var "TV-känslan". Olika tittartyper efterfrågade olika mycket TV-känsla. I projektet visualiserade vi behovet som ett reglage där vi placerade en tillbakalutad TV-upplevelse i den ena änden och en framåtlutad, aktiv, social webbupplevelse i den andra. Om en vy skulle tillgodose behoven hos en viss tittartyp kunde vi använda reglaget för att kommunicera vilken känsla som vyn skulle förmedla. "Dra upp TV-känslan lite!"

För en multiplattformtjänst som TV4 Play är det viktigt att upplevelsen är enhetlig oavsett vilken terminal som användaren använder. Detta utan att frångå respektive plattforms egna interaktionsparadigm och -konventioner. I delar av projektet arbetade vi därför efter principen "mobile first", det vill säga vi utformade den mobila versionen före vi utformade webbversionen. Det gjorde det enklare att hitta kärnan av funktionalitet och innehåll som skulle finnas på alla plattformar. Sedan hade vi möjlighet att skala upp och lägga till fler saker på de enheter där det fanns mer utrymme.

För att stämma av våra idéer testade vi wireframes på användare innan vi påbörjade den visuella designen. Designen skulle hålla över hela reglagets skala: både för den avskalade TV-känslan och den informationstäta "webbiga" känslan.

Produktion

I gränssnittsutvecklingen för webbversionen, som vi gjorde tillsammans med TV4, använde vi HTML5 och JavaScript. Videospelaren, som utvecklades av Isotop, är Flash-baserad, framförallt av rättighetsskäl. TV4 utvecklade tjänstens backend på Ruby on Rails och iDealApps utvecklade de mobila apparna.

Framtiden

Vi och TV4 ser att denna första version av tjänsten lägger grunden för en framtida utveckling av mer avancerad funktionalitet. Vi har kommit långt i arbetet med nästa steg för tjänsten och ser fram emot att äntligen få dela med oss av tankarna kring framtidens TV-tittande.

design gränssnitt webbstrategi konceptutveckling webbanalys tv interaktionsdesign personas mobila tjänster målgruppsanalys användningstester iphone android ipad html5 mobile first mobil strategi tjänstedesign

Wayne's Coffee i mobilen

Daytona Communication — tor, 10 dec 2009 00:00:00 +0100

Wayne's Coffee är Sveriges första och största cafékedja. Nu ungefär femton år efter grundandet driver man ungefär 100 caféer på sju marknader. Nu finns också ett stort antal konkurrenter. Trots relativt lojala kunder och lojalitetsprogram med rabattkortssystem avgörs cafévalet ofta av andra faktorer och tillfälligheter.

För att göra beslutet att gå till Wayne's Coffee lite enklare tog vi fram en mobilapplikation. I applikationen hittar man dels de närmaste Wayne's-caféerna, ser dem på en karta och får en vägbeskrivning.

Dels får man erbjudanden via applikationen som man kan lösa in i kassan på närmaste Wayne's-café. När ett nytt erbjudande kommer får man också ett meddelande om det — på iPhone via push, på Android via poll.

Designmässigt håller vi oss nära de inbyggda gränssnittselementen både på iPhone och Android. Vi undviker därmed att introducera några nya förvirrande gränssnittslösningar.

Marknadsavdelningen på Wayne's Coffee har fått en kontrollpanel där de kan skicka ut nya erbjudanden på någon av de sju marknaderna. De kan också se antalet aktiva användare och konverteringsgrad i realtid.

Vi kan tyvärr inte dela med oss av några resultat (de som presenteras på bilderna här ovan är påhittade). Vi kan dock konstatera att en ansenlig andel av de som installerat applikationen också har gått till Wayne's Coffee för att utnyttja ett erbjudande. Under sin första vecka låg applikationen etta i kategorin Livsstil i iTunes App Store, före både Blocket och Hemnet.

relationsmarknadsföring konceptutveckling webbanalys lojalitet mobila tjänster Ruby on Rails iphone android gps konvertering tjänstedesign