TeamApp en app för att samla ungdomar med gemensamma idrottsintressen Sara Avén Sveavägen 107, 1301 11350 Stockholm, Sverige saraaven@kth.se Johan Olsson Körsbärsvägen 3, 1110 11423 Stockholm, Sverige johaolss@kth.se Introduktion Denna rapport behandlar slutprojektet i DH2626 - Interaktionsdesign 1 på KTH. I detta projekt har det skapats en prototyp av en applikation (app) för iphone. Applikationen har tilldelats namnet TeamApp. Eva Olsson Kungshamra 82, 1106 17070 Solna, Sverige evo@kth.se Abstract In this paper the final project for DH2626 Interaction design 1 at The Royal Insititute of Technology is described. The final product, an app for teenagers who would like to meet other teenagers to play against is described. Nyckelord App, iteration, sport, ungdomar, målgrupp, TeamApp, designmetoder, projekt Copyright av Sara Avén, Johan Olsson samt Eva Olsson Slutprojekt i Interaktionsdesign. DH2626. KTH, Maj 2012 TeamApp riktar sig mot ungdomar i åldern 13-17 år som har ett intresse av att aktivera sig på fritiden och träffa andra ungdomar. Den är både till för dem som tränar intensivt flera gånger i veckan och för dem som bara vill spela för nöjes skull. Tanken är att de ska hitta personer att spela mot som de inte brukar spela mot. I rapporten kommer syftet med appen att tas upp, relaterade artiklar som projektet har utgått ifrån, samt hur processen har gått från idé till en färdig applikation. Bakgrund Detta projekt tog avsats i två uppsatser, den första var: But I don t trust my friends Ecofriends - an application for reflective grocery shopping (2011) Denna artikel handlade om hur man kan få folk mer intresserade av att agera miljövänligt. Genom att utnyttja folks växande intresse inom sociala medier vill man kunna engagera och inspirera varandra till ett mer hållbart beteende.
De flesta vill vara miljövänliga och göra rätt val men har inte alltid tid till, eller kunskap om det. Den andra artikeln, Gamification and location-sharing: some emerging social conflicts (2011), handlade om hur man kombinerar inslag av gamification med location-sharing-tjänster. Detta är ett intressant ämne och något som eventuellt kunde vara en del av projektet. Figur 1. Den ursprungliga idén Dessa artiklar var tänkt att fungera som grund för den idé som projektgruppen hade från början, sedan ändrade projektet riktning vilket gjorde att dessa artiklar fungerade som utgångspunkt för projektet då idén växte fram från dem. Eftersom de föregående artiklarna inte var riktigt relevanta för projektet användes även Athletes and street acrobats: Designing for play as a community value in parkour Många timmar ägnades åt detta men efter den första kritiken fanns det fortfarande inte någon idé som kändes konkret och bra. Problemet var att ämnet blev för stort och tiden alldeles för knapp för att hinna skapa en världsomvälvande app. Ett beslut om att försöka bryta ner idéerna till mindre idéer togs. Många iterationer av de olika ideérna och parallelldesign krävdes innan den idé som valdes för utveckling föddes. Ett av förslagen, en sommarlovsapp för ungdomar under arton år med ett antal funktioner, bröts upp i mindre delar och slutligen var det bara en funktion kvar. Denna funktion utvecklades till den slutgiltiga appen, TeamApp. En app för ungdomar som har ett lag och vill utöva en idrottsaktivitet mot ett annat lag. De idrotter som man kan välja i appen är: fotboll, basket, tennis, brännboll, volleyboll, badminton, amerikanskfotboll och baseboll än så länge. (2012). Denna artikel var mer relaterad till projektet då den handlade om ungdomar, idrott samt appar för att gemensamt utöva idrott. Idé Planen var från början att delta i tävlingen Open Stockholm. Stockholms stad har tillgängliggjort en mängd data om Stockholm och söker nu den bästa appen man kan skapa av dessa data. Det lät som en spännande utmaning att anta. Figur 2. Screenshot på annonsvyn I appen Idén för projektet var att kombinera tre områden: effektivisering av vardagen, gamification av vardagen samt ett bättre agerande för miljön. En kombination av dessa tre skulle ge den bästa appen för Stockholms stad, se figur 1. Det finns redan befintliga hjälpmedel såsom sms och Facebook för att hitta sina kompisar att utöva olika idrottssaktiviter med. Det finns dock inget bra sätt att komma i kontakt med andra ungdomar som är intresserade av samma aktivitet för att hitta ett lag att spela med eller mot. Det är det här tomrummet som TeamApp ska fylla. Funktion Som person ska det finnas möjlighet att lägga upp en annons för sitt lag med syfte att hitta ett annat lag att spela emot. Det finns även möjlighet att svara på andras annonser för att spela mot dem. En chattfunktion för att interagera med andra lag för att bestämma detaljer finns, samt även en personlig profilsida med alla lag den personen är medlem i. Även möjligheter att hitta planer att spela på genom en
kartfunktion har implementerats i appen då det ibland är svårt att veta var olika planer för olika sporter finns idag i Stockholmsområdet. Figur 4. Pappersskisser på appen Det finns fem sidor i appen. Profilsidan är den sidan i appen där alla användarens lag finns sparade, det finns även möjlighet att lägga upp nya lag på denna sida. Händelsesidan är den sida där alla utmaningar som personen lagt upp eller alla utmaningar som andra lag accepterat eller nekat ligget. Annonssidan är applikationens kärna, det är där alla utannonserade annonser kan ses, nya annonser kan läggas upp och det går att utmana ett lag som det egna laget vill möta. Även en chatfunktion är implementerad på denna sida. Figur 3. Kartvyn I appen På sidan lägg upp har en person i laget möjlighet att lägga upp en annons med information om sitt lag, allt från lagnamn till sport de vill spela och tid och datum händelsen ska äga rum. Under den sista fliken hitta planer finns en kartfunktion där det finns möjlighet att söka på olika typer av planer och möjlighet att se var i staden de finns. Metod För att dokumentera arbetet under projektet har en blogg använts som platform. Den finns på dennaaddress: http://saraevajohan.wordpress.com/ Designmetoder Projektet har varit fokuserat på användarcentrerad design [1, sid 33] och utgått från filosofin bakom användarcentrerad design, The user knows best. Figur 4. Pappersskisser på appen Denna designmetod användes med utgångspunkt i 5 decision styles. What s yours? (2009). Genom användarstudier, enkäter och återkoppling till målgruppen har arbetet hela tiden kretsat kring användarna. Designen och funktionerna har ändrats efter deras önskemål under processens gång. Mind mapping [1, sid 119] användes i början av projektet när olika ideér skulle itereras. Detta följdes av parallelldesign då alla tre projektmedlemmar skissade på utseende, idéer och funktioner till applikationen samtidigt utan att tala med varandra om detta för att sedan diskutera de olika idéerna. Pappersskisser Samtidigt som vi försökte komma i kontakt med vår målgrupp och användare gjordes en pappersprototyp parallellt. Detta för att spara tid eftersom tiden utgjorde en begränsning av projektet. Alla funktioner itererades och diskuterades i gruppen och de största funktionerna var gruppmedlemmarna överens om. Arbetet var omfattande och tog ganska lång tid då det var meningsskiljaktigheter i gruppen om de olika funktionerna och vilket tillvägagångssätt som var det bästa för att lösa användbarhetsproblemen i appen. Även om det kändes som att pappersprototypen tog alldeles för lång tid att utveckla tjänades denna tid sedan in när mockuperna gjordes, då det vid det stadiet var bestämt hur funktionerna skulle fungera. Designverktyg Fluid UI (http://fluidui.com) Fluid UI var det första programmet som användes för att göra mockups. Med detta program skapades
Figur 5. Startsidan i TeamApp mockups som kunde laddas ner till telefonen med ett realistiskt gränssnitt som gjorde att vår mockup kändes som en riktig, programmerad applikation. Problemet med Fluid UI var bland annat att det inte fanns någon ångra-funktion. De olika sidorna man gjorde gick inte heller att duplicera, och att ladda upp egna ikoner var väldigt svårt. Trots detta gjordes mer än halva mockupen i detta program vilket ändå fungerade bra ända tills programmet bestämde sig för att inte spara en dags arbete på appen. Detta gjorde att gruppen tröttnade på att den inte fungerade som den skulle och bytte därför program till Mockko. Mockko (http://mockko.com) Mockko var inte heller perfekt att göra mockups i, men de blev realistiska och såg ut som riktiga applikationer som kunde laddas ner till telefonen. Mockko är inte heller optimalt ur ett användarperspektiv då det kan vara buggigt. Det är svårt att ladda upp egna ikoner, ikonerna lägger sig lite som de vill, länkar mellan olika sidor blir trasiga trots att de ser ut att vara hela och det finns ingen bra överblick för att se de olika länkarna. Trots detta föll valet slutligen på Mockko för att göra mockupen i då Mockko hade den ångrafunktion som Fluid UI saknade. Andra program som har använts i designprocessen är Adobe Photoshop och Adobe Illustrator. Illustrator användes för att designa och rita logotypen till appen. Photoshop användes för att redigera och finjustera olika ikoner och andra bilder för att få dem att bli så realistiska som möjligt, eftersom Mockko endast erbjuder mycket begränsade redigeringsmöjligheter för bilder i sig. Dessa ikoner och bilder importerades sedan till Mockko. Användartester Två stycken användarstudier gjordes. Den första var en fältstudie där olika idrottsplatser och skolgårdar besöktes och idén presenterade för vår målgrupp. Ungdomarna fick också fylla i en enkät för att en överblick av deras idrottsaktivitetsvanor skulle fås. Den andra användarstudien gjordes på Norra Reals Gymnasium där 6 stycken elever, blandat tjejer och killar, i åldern 15 till 16 år fick utvärdera och utföra ett användartest av mockupen. De fick olika uppgifter att utföra i appen, t.ex. skulle de lägga upp en annons och orientera sig i appen och de olika funktionerna. Efter varje uppgift hölls en diskussion huruvida uppgiften var lätt eller svår att lösa, om olika knappar var logiskt utplacerade och om det var någon funktion som saknades. Resultat Feedbacken från målgruppen var väldigt nyttig och flera punkter som inte tänkts på när appen designades kom fram och diskuterades. Detta var nyttigt då det faktiskt är målgruppen som appen är designad för. Slutresultatet i detta projekt resulterade i en mockup för appen som kallas för TeamApp. Denna mockup ser ut som en riktig applikation och den fungerar att interagera med och använda även då alla funktioner i den inte är implementerade. Slutprodukten för detta projekt är en klickbar mockup. Mockupen kan testas genom att gå in på http://www.mockko.com/r1168017/ i Safari eller Chrome på en dator, eller Safari i en iphone.
Figur 6. Screenshot på händelsefliken I TeamApp Öppnar man länken i en iphone kan man även välja att lägga till länken på hemskärmen och det blir således som en riktig app. Diskussion I efterhand när mockup-programmen utvärderats hade det antagligen varit lättare att göra en snabb och enkel mockup i ett program som t.ex. Balsamiq för att sedan ägna tid åt att programmera en riktig app istället för att enbart använda mockups. Processen från idé till färdig app har varit motig. Flera moment har tagit längre tid än planerat på grund av olika problem och det har varit en krävande process för att få fram slutresultatet. En anledning till detta är att appen är till för utomhusaktiviteter och det har varit svårt att komma i kontakt med användarna då det flertalet gånger har regnat eller snöat. De funktioner som diskuterats mest under processen är annonssidan samt lägga upp sidan där alla i gruppen inte hade samma åsikter. Dessa sidor har itererats och med hjälp av användartesterna löstes meningsskiljaktigheterna kring dessa två sidor. Alla i gruppen är nöjda med slutresultatet och processen har varit lärorik på många sätt. arbeta vidare med och perspektiven har vidgats under detta projekt inom flera områden, allt från möten med målgruppen till den slutgiltiga produkten. Målgruppen Det har varit en intressant målgrupp att jobba med då ingen i projektgruppen tidigare arbetet mot den. Detta har varit lärorikt då de har ett annat perspektiv på appar och interaktionsdesign än vad gruppmedlemmarna har, vilket har varit utvecklande. Gruppdynamiken Gruppdynamiken i detta projekt har varit intressant, om än komplex på många sätt då tre personer med starka viljor, åsikter och tankar har samarbetat mot ett gemensamt mål som inte alltid varit helt klart. Processen har inte varit smärtfri eller enkel alla gånger men detta projekt har svetsat ihop gruppen under projektets gång och alla medlemmar har lärt sig mer om gruppdynamik och att arbeta i grupp, både som ledare och gruppmedlem. Bakslag Enkäten som skulle delats ut till fotbollsklasserna på Engelbrektsskolan blev inte ifyllda den dagen som det var tänkt. Kontaktpersonen på skolan hörde aldrig av sig, skolan hade flyttat och ingenting gick som det var tänkt från början. Spontana resor till Vasaparken och Humlegården för att hitta ungdomar som skulle kunna fylla i enkäten visade sig vara lönlöst då de var upptagna med andra saker än att fylla i enkäter till KTHare. Detta bakslag gjorde att projektet stannade upp för några dagar för att sedan komma igång igen genom att gruppen bestämde sig för att börja skissa på en pappersprototyp parallellt med att personer från målgruppen försökte kontaktas. Andra skolor kontaktades och av de som svarade, svarade alla att de inte tog emot enkäter från andra skolor eller högskolor. Slutsats Lärdomar En stor lärdom från detta arbete är insikten om hur svårt det kan vara att komma i kontakt med sina användare och sin målgrupp när målgruppen ligger
utanför de preferensramar och de målgrupper som arbetats med innan. Det tar tid och är ansträngande att göra detta men i slutändan lönar det sig ändå då feedback från dessa är ovärderliga då det är de som i slutändan ska använda appen. Andra insikter som detta projekt gett är hur något problem som antas vara simpelt och snabbt löst egentligen är mer komplext och tar mycket längre tid än planerat och förutsett. Funktioner tar tid att utforma och iterativa processer kan ibland vara ansträngande och utmanande. Referenser [1] Designing for interaction Second Edition, Dan Saffer, New Riders 2010, ISBN0-321-64339-9 [2] But I don t trust my friends, Ecofriends - an application for reflective grocery shopping, MobileHCI 2011, (2011) [3] Gamification and location-sharing: some emerging social conflicts, Henriette Cramer, Zeynep Ahmet, Fortsatt arbete Det fortsatta arbetet för appen är att göra en screencast samt skriva en två sidors brief till Mobile Cup och skicka in den som ett bidrag i Konceptkategorin 2012. Det fortsatta arbetet med själva applikationen skulle i detta fall vara att programmera den och lansera den i Apples App Store. Även kategorierna i appen skulle kunna utvecklas till att innefatta andra saker än just bollsporter som man kan göras tillsammans så som magic cards eller dans. Mattias Rost, Lars Erik Holmquist, Mobile Life Centre (2011) [4] 5 design decisions styles. What s yours? Jared M. Spool, (2009) [5] Athletes and street acrobats: Designing for play as a community value in parkour, Annika Waern, Elena Balan, Kim Nevelsteen, Mobile Life Center (2012)