Grupp 3 Anna, Fredrik, Thomas, William, Camilla W, Camilla L Projektplan Nuvarande projektplan. Senaste versionen, uppdaterad 25 februari 2010
Innehållsförteckning Den slutgiltiga hifi prototypen... 3 Hifi prototyp... 5 Lofi prototyp... 6 Förändringar i kraven... 13 Webbprototyp... 15 Mobilprototyp... 15 Skisser... 17 Mobilvisioner... 17 Webbvisioner... 18 Socialt nätverk... 19 Storyboards... 20 Personas... 21 Beteendevariabler... 23 Visioner... 23 Brainstorming... 24 Omvärldsanalys... 24 Användartester... 24
Den slutgiltiga hifi prototypen Efter ytterligare användartester har vi förfinat hifi prototypen till en slutgiltig semifunktionell hifiprototyp, som klarar att utföra följande fyra scenarios: Hitta och köp actionspelet CoD MW2 till XBOX Hitta kunden Kalle Andersson och lägg till honom som vän Titta vad Kalle har i sin kundvagn Ta reda på vilka plattformar CoDMW2 finns till Förändringar som har skett från föregående revision: Bytt ut ordet Lounge till Socialt då lounge missförstods av många användare Möblerat om hyllorna så att det är mer likt en riktig butik, samt användarna trivdes bättre med den nya layouten Ändrat symbolerna för kundtjänst och kassa, de är nu mer tydliga angående vilka funktioner de representerar Senast sedda varor går att minimera Implementerat breadcrumbs där det behövdes
Figure 1 breadcrumbs och kundvagn Kundvagnen är alltid synlig längst upp till höger, förutom på startsidan Utökat recensionsdelen med stjärnor Figure 2 recensionsdel med stjärnor Implementerat så att det går att söka på en vara för att kunna se funktionaliteten
Figure 3 sökfunktion med resultat Hifi prototyp Prototypen är skapad i Fireworks, med lofi prototypen som bas men vissa förändringar har skett. Vi har valt att lägga menyn högst upp. Detta har vi gjort dels på grund av utrymmesmässiga skäl, men också för att vissa användare tyckte att den tidigare vänstermenyn var malplacerad. Vi har även lagt till senast sedda varor längst ner där det är möjligt att gå tillbaka till de varor du tittat på förut eftersom detta var något som efterfrågades av många användare. Figure 4 Gammal startsida Genom att trycka på spelbokhyllan kommer man vidare i vår grafiska menystruktur som har samma logiska uppbyggnad som en traditionell trädstruktur, dock med grafiska element. Vår
menystruktur består utav fyra nivåer och själv bokhyllan är den första. Bilden nedan är således nivå två i vår grafiska menystruktur. Här väljer man den första produktindelningen. Notera att tema bokhylla är återkommande. Figure 5 Hyllvy Lofi prototyp När vi skapade lofi prototyper hade vi fyra visioner som tidigare nämnts, två mobila och två webbvisioner. Dessa slog vi sedan ihop till två visioner, en till webbgränssnittet och en till den mobila applikationen, där vi valde att behålla de bästa funktionerna från de tidigare visionerna. Bilden nedan beskriver sökresultatet på sökorden Street fighter 4. Notera att vi även får upp produktkategorier, samt recensioner förutom de enskilda produkterna. Detta var något som verkligen efterfrågades i våra användartester.
Figure 6 Sökt spel Street Fighter 4 Figure 7 Startsida
Figure 8 Startsida Figure 9 Nivå 4 i menystrukturen
Figure 10 Spel Figure 11 Nivå 3 i menystrukturen
Figure 12 Skapa konto Figure 13 Recensioner
Figure 14 Lägg till vän Figure 15 Logga in_skapa konto
Figure 16 Köpinfo, FAQ, Om oss Figure 17 5 sista tittade varor
Figure 18 Användarkonto Figure 19 Vänner, Kunder online Förändringar i kraven Efter förändringar i kraven från Onnoori Media så har vår prototyp förändrats en del. Vi har helt och hållet tagit bort den mobila applikationen, eftersom Onnoori Media inte längre är intresserade utav den. Enligt de nya kraven ska webbshoppen även börja sälja böcker och e böcker, vilket har gjort att vi har lagt till ytterligare en ny hylla i butiken där man kan hitta dessa
produkter(se bilden nedan). Figure 20 Startsida Ytterligare ett nytt krav är att vi ska implementera någon sorts merförsäljningsfunktion i stil med Amazons kunder som köpt den här produkten har även köpt det här. Eftersom vi har en del sociala funktioner där man kan interagera med sina vänner, så tänkte vi utnyttja de funktionerna i merförsäljningen genom att man kan se vad sina vänner har köpt. Detta löste vi i pappersprototypen genom att implementera populära varor relaterade till din varukorg och dina vänners senaste köp i varukorgen. Vi tycker att detta täcker upp de nya kraven.
Figure 21 Varukorg Webbprototyp Under våra användartester framgick det att användarna kände sig osäkra på om en produkt tillgodogöra de behoven som de förväntade sig av den. Inom designteamet funderade vi på hur detta problem skulle kunna lösas, och vi provade att implementera recensioner. Med hjälp av recensioner kan man ta del utav andra användares produktrecensioner, samt skriva egna. Efter ytterligare användartester fann vi att denna funktion gav det resultat vi önskade då användarna kände sig tryggare i sitt val av produkt. Eftersom Onnoori Media vill använda sig utav merförsäljning så valde vi att ta bort snabbkassan helt och hållet. Snabbkassan har sina fördelar men vi valde att ta bort den ändå eftersom Onnoori har merförsäljning som ett av sina krav. Eftersom kunderna nu måste registrera sig för att genomföra ett köp så kan Onnoori använda sig av data mining för att få kunskap om vad kunderna köper och när, för att kunna utveckla sin merförsäljning. Mobilprototyp Vår mobila prototyp är precis som webbprototypen en blandning av de två tidigare visionerna. Vi hann aldrig utföra användartester eller slutföra denna prototyp då Onnoori Media lade ned idén att ha en mobil applikation. Men de skillnader man kan se gentemot våra skisser är främst att framsidan nu är en login sida och detta på grund av att man måste vara inloggad på ett tidigare skapat konto för att kunna handla via den mobila applikationen. Oavsett var man är i gränssnittet så har vi valt att ha en knapp högst upp för att komma till kundvagnen. Detta är något som vi hade för avsikt att utvärdera i framtida användartester men på grund av att den mobila prototypen lades ned. Vi har valt att behålla idén med att ha coverflows från våra skisser
eftersom att de ger en snabb och bra överblick av sortimentet. Sökrutan ändrar funktionalitet beroende på vilken kategori man för närvarande är i. Om man är inne på startsidan så kommer man att söka på allt. Är man inne på musik så söks endast på artist/genre/album. Under sökrutan så kommer resultatet av sökningen upp. Vi har även valt att behålla idén om att när man tiltar iphonen så blir det en 2D butik. Vi vill understryka att denna prototyp inte är klar på långa vägar och inte testad på användare. De enda användartester som kan knytas till denna prototyp är de tidigare utvärderingarna på skisserna som låg till grund för prototypen. Figure 22 Mobil prototyp
Skisser Mobilvisioner Vision 1 Den första visionen vi skapade var den mobila versionen utav webbvision 1(2D). På startsidan har vi valt att sätta hjälpfunktionen högst upp så att den är enkel att hitta. Nedanför ligger sökrutan där du kan söka på allt som finns i webbshoppen. Skälet till varför vi har lagt den där är att vana användare samt användare med tidspress snabbt kan söka på det de vill ha och köpa det. För de som vill klicka runt i applikationen så finns det populärt just nu, information om Onnoori Media samt produktkategorierna nedanför. Figure 23 Mobilvision 1 Bilden nedan visar hur applikationen är tänkt att se ut när iphonen är vänd vågrätt. Denna ser ut och fungerar snarlikt vår 2D vision för webbshoppen. Figure 24 Mobilvision 1
Figure 25 Mobilvision 1 Vision 2 Denna vision är den mobila versionen av vår socialt nätverk vision. Webbvisioner Figure 26 Mobilvision 2 2D vision Bilden nedan är en skiss utav vår 2D vision. Precis som tidigare beskrivet så är denna webbshopp tänkt imitera en vanlig affär med hyllor, kassor och kundtjänst. Vi har valt att ha den ganska avskalad för att butiken ska vara så flexibel som möjligt, om man skulle vilja utöka den med flera hyllor i framtiden. Delen högst upp består utav ett sökfält längst till vänster. Efter vår omvärldsanalys märkte vi att det är standard att ha sökfältet längst till vänster, och vi tycker inte att användare ska behöva leta efter sökfunktionen då det är en väldigt central del av vår webbshop, så vi valde att placera den längst till vänster. Vi har valt att ha knapparna som behandlar Onnoori Media centrerade så att användaren lätt kan hitta köpinformation och liknande. Vi har även med en snabbkassa som vi tog med oss ifrån vår omvärldsanalys då vi
ansåg att det var en väldigt bra och smidig lösning för folk som inte vill eller har tid att registrera sig. Figure 27 Skiss 2D vision Socialt nätverk Den är uppbyggd som en traditionell webbshop, med menyer till vänster. Toppmenyn med sökruta osv. ser ut som i den förra visionen. I denna vision så ligger inte fokus enbart på köpfunktionen, utan även på den sociala interaktionen. Detta på grund utav att vi i våra intervjuer identifierade ett behov av att se vad andra tycker om olika produkter, och vad de har handlat. Han handlar på nätet ibland men inte särskilt ofta för han tycker att det är tråkigt och att det är roligare med vanliga affärer då han kan prata med andra personer i butiken. säger vår primära persona för målgrupp 1. Figure 28 Skiss sociala nätverk
Storyboards Nedan visas vår storyboard för målgrupp 1, som visar ett exempel på merförsäljning på webbshoppen. Tanken var att göra storyboarden så enkel som möjligt att förstå, utan överflödiga detaljer som lätt kan distrahera användaren och förstöra själva poängen/budskapet. Eftersom vi inte har bestämt oss för något speciellt gränssnitt till desktopprototypen ännu så finns det inga gränssnittsdetaljer, så kundens interaktion hamnar på en ganska hög nivå. Figure 29 Storyboard Mikael Nedan visas vår storyboard som är tänkt för målgrupp 2. Storyboarden visar hur det är tänkt att användaren ska interagera med den mobila applikationen, på ett så enkelt sätt som möjligt.
Figure 30 Storyboard Kenta Personas Bilden över våra beteendevariabler innehåller väldigt mycket information och det kan vara svårt att utvinna mönster ur detta. Med hjälp av färger och dragna linjer så blir det mycket lättare att se mönster i våra intervjuobjekts beteendevariabler. Dessa linjer och färger bildar tillslut någon form av mönster och det är dessa mönster som ligger till grund för våra personas. Varje persona som vi har skapat utifrån våra beteendevariabler är alltså baserade på ett flertal intervjuobjekt. Med hjälp av denna metod kom vi fram till följande fyra personas där två av dessa tillhör målgruppen personer mellan 16 30 år som någon gång har genomfört ett köp på internet och de andra två tillhör målgruppen människor utan datorvana. Figure 31 Sekundär persona målgrupp 2
Figure 32 Primär persona målgrupp 1 Figure 33 Sekundär persona målgrupp 1 Figure 34 Primär persona målgrupp 2
Beteendevariabler Vi bestämde oss för målgrupperna 16 30 åringar som någon gång genomfört ett köp på internet och Människor utan datorvana. För att samla in behovsdata använde vi oss utav intervjuer och observationer. Varje gruppmedlem intervjuade två personer var, och i samband med de intervjufrågor som berörde mobiltelefoner så bad vi intervjuobjekten att visa oss hur de använder sina mobiltelefoner samt till vad. Utifrån frågorna benade vi ut ett antal beteendevariabler som vi senare skulle använda i skapandet av personas; Mediakonsumtion Mottaglig för merförsäljning Intresserad av medlemsförmåner Påverkad av design Prismedveten Förändringsbenägen Datorvana Teknikintresserad Säkerhetsmedveten Integritet Beteendendevariablerna sammanställde vi i en bild där vi placerade ut alla intervjuobjekt på en skala efter till exempel hur teknikintresserade de är osv. Bilden ser ut som följande: Visioner Figure 35 Beteendevariabler Eftersom Onnoori Media letar efter något kul och innovativt har vi för tillfället valt att gå närmare in på en vision som är ett socialt nätverk och 2D visionen, som är tänkt att fungera som en IRL butik, fast på Internet. När man handlar på webbshoppen är det tänkt att man går omkring med en kundvagn, stoppar ner varor och slutligen går till kassan för att betala. Det finns ingen Gå till kassan knapp, utan man går med sin avatar genom butiken (som kan ses uppifrån eller framifrån beroende på vilket läge man befinner sig i) till kassaavdelningen.
Brainstorming Idéerna som vi fick av omvärldsanalysen hade vi i åtanke när vi sedan genomförde en brainstormingsession. Brainstormingmetoden vi valde att arbeta med var metod 635, eftersom den genererar en stor mängd strukturerade idéer som dessutom är väl genomtänkta, och för att vi tidigare har använt den och då gav den bra resultat. Vi anpassade metoden genom att minska ner antalet iterationer. Resultatet från brainstormingsessionen delade vi in i grupper, där likadana idéer hamnade i samma grupp. De olika grupperna vi kom fram till är 2D, 3D, personal shopper, medlemsförmåner, sociala nätverk och spel. Omvärldsanalys Vi har gjort en omvärldsanalys. Detta gjorde vi genom att surfa omkring på Internet och titta på vad olika webbsidor använder sig utav för funktioner. Syftet med omvärldsanalysen var att hitta goda idéer och identifiera dåliga idéer på gränssnitt och funktioner, samt få inspiration till vad vi skulle kunna tänkas använda på vår e handelssajt. Användartester Under hela designprocessen så har vi arbetat utifrån ett användarcentrerat perspektiv. Detta innebär att vi har testat våra prototyper på användare kontinuerligt och arbetat i iterationer. Med hjälp av att göra många iterationer med små förbättringar i varje så upplever vi att vi har förfinat vår prototyp kontinuerligt under arbetets gång. När vi gjorde användartester så fokuserade vi på att extrahera behov från användarna snarare än deras åsikter. Detta kan förstås vara svårt så att det gäller att hela tiden påminna sig själv om detta och ställa frågor som fokuserar på behov snarare än vad användarna tycker. Användartesterna var utformade ifrån prototyping for tiny fingers, dock med undantaget att vi var två designers som utförde dessa, till skillnad från tre som beskrivs i metodbeskrivningen. Två designers kan vara nog skrämmande för en användare, detta är ett skäl till att endast vara två. Problemet med detta är att det kan vara svårt att hinna utföra alla uppgifter under utvärderingens gång, men detta är enligt oss underordnat att användaren ska känna sig bekväm och därmed ge bra svar. Det vi upplevde som den största utmaningen när det kommer till användartester var att värdera de olika användarnas behov. Som designer tvingas man fatta svåra beslut om vilka behov som egentligen är viktigast. Det kanske inte är de mest frekventa behoven som är de viktigaste, utan en är också en siffra.