Projektrapport för designstudio - webb 2/6-17

Transkript

1 Projektrapport för designstudio - webb 2/6-17 Grupp 4: Max Lindroos ( ) maxlin16@student.hh.se William Hedin ( ) wilhed16@student.hh.se Minna Danielson ( ) mindan16@student.hh.se Felicia Stocklassa ( ) felsto16@student.hh.se Carolin Tynkkynen ( ) cartyn16@student.hh.se

2 Introduktion Idrottscentrums hemsida Designstudio - Webb innebär att hjälpa Idrottscentrum med att förbättra deras hemsida. Idrottscentrums mål är dels att få fler medlemmar men även att nuvarande medlemmar ska kunna boka träningspass enklare genom hemsidan. Utefter dessa mål kommer en fungerande prototyp tas fram samt en grund i HTML, CSS och JS för att förtydliga funktionaliteten och interaktionen som ska ingå i hemsidan. Hemsidan som utvecklas kommer utgå från en så kallad mobile first approach där mobila enheter prioriteras först men att hemsidan även kommer fungerar på större skärmar genom att vara responsiv. Möjligheten att ta del av hemsidan på engelska ska finnas eftersom Idrottscentrum har internationella kunder. En metod som använts under projektet är Goal-Directed Design metoden som bland annat innebär att designern utgår utifrån användarens mål. Genom att designa för att användaren ska kunna nå sina mål blir användaren mer tillfredsställd (Cooper et al., 2007).

3 Urval och data 2.1 Intervjuer De intervjuer som gjordes var på fem stycken medlemmar som skiljde sig åt både när det gällde ålder och genus för att få ett bredare spektrum av information om deras beteende (Bilaga 2.1). För att få ett annat perspektiv på situationen intervjuades också två subject matter experts, SME vilket betyder, experter inom området, och i detta fall intervjuades två personer från personalen på Idrottscentrum (Bilaga 2.1). Samtliga intervjuer som genomfördes var semistrukturerade för att hålla intervjuerna relativt öppna för nya frågor De frågor som ställdes till medlemmarna löd t.ex. Använder du hemsidan ofta?, Tilltalar hemsidan dig?, Är informationen på hemsidan lättillgänglig? (Bilaga 3.1). Dessa frågor skapade ett allmänt intryck om hur känslan som medlemmarna har och vad de tycker om Idrottscentrums hemsida. Av nyfikenhet avslutades intervjuerna till medlemmarna med en fråga om det är något de hade velat förändra på hemsidan och isåfall vad. Detta var för att kunna reflektera över vad det är som medlemmarna prioriterar och vad de anser är bristfälligt på den nuvarande hemsidan. (Bilaga 3.1) Medlemmarnas svar var relativt lika, majoriteten tyckte att hemsidan var tråkig när det gällde dess färger och utformning samt att det var svårt att snabbt hitta den information som de söker efter. Idrottscentrums tjänster och vad de erbjuder visste de flesta medlemmarna om men den informationen hade de inte fått från att använda hemsidan från andra medlemmar eller de planscher som finns på Idrottscentrum (Bilaga 4.1). Informationen från intervjuerna med personalen på Idrottscentrum är till stor del partisk men att ha en klarhet över vad beställaren tycker

4 och tänker om nuvarande hemsidan samt vilka möjligheter de vill utveckla är väldigt viktigt för ett lyckat projekt (Bilaga 4.1). Att tidigt få reda på vilka mål som beställaren vill fokusera på är viktigt då det blir som en grund som arbetet sen byggs vidare på. Målen från personalen var att hemsidan behövde bli enklare att förstå, informationen skulle vara direkt och enkel att hitta samt att hemsidan också behövde skapa mer kontrast med hjälp av färger och annan form var också ett tydligt mål (Bilaga 4.1). Under denna intervjun frågades också vilket arbete som har skett med nuvarande hemsida och ifall det har varit i kontakt med medlemmarna och ifall de vet vad deras mål när de besöker hemsidan är (Bilaga 3.1). 2.2 Annan empiri Som en del av informationsinsamlingen besöktes andra liknande hemsidor för att se hur de hade riktat sin fokus. Under intervjuerna med personalen på Idrottscentrum gavs en rekommendation om en hemsida som de kunde identifiera sig med och som de ansåg hade en väldigt bra lösning. Samtliga gruppmedlemmar kom sedan överens om att gemensamt för alla de hemsidor som besökts var de engagerade bilderna som användes och hur färgerna påverkar hur designen på hemsidan får en att känna.

5 Problem (UX Statement) 3.1 Mål och syfte Målet var att skapa en tydlig och lättnavigerad hemsida som användarna snabbt och smidigt kan hitta den information de letar efter. En röd tråd genom hela designen på hemsidan ska skapas vilket är ett problem med nuvarande hemsida då det olika layouter, en för den svenska och en för den engelskspråkiga sidan. Den nuvarande hemsidan är heller inte responsiv. Att skapa en hemsida som är responsiv så att den blir lättanvänd på alla olika typer av skärmar är viktigt för att kunna leverera en hållbar design. Syftet är att designa en hemsida som stämmer överens med den data som samlats in under de intervjuer som genomfördes samt de förslag som uppdragsgivaren, Idrottscentrum, har fastställt som krav. 3.1 Designutmaning En utmaning som de båda två skapade personas upplever är viktigt är att skapa en hemsida som är lätt att förstå, har en tillfredsställande design och utan bristande information. Den första utmaningen i början av projektet var att Idrottscentrum använder sig av Hemsida24, som är ett CMS-tjänst vilket möjliggör förändring på hemsidan utan att programmera. De använder också sig utav en tjänst som heter BRP-systems som tar hand om bokningarna för gruppträning. Problemet här är att dessa två tjänster inte kan kopplas ihop, utan användaren blir länkad in på BRPs egna sida för att göra bokningar till gruppträning. Ytterligare en utmaning är när det inte finns en engelsk översättning tillgänglig för användaren. I nuläget behöver Idrottscentrums personal gå in och göra många ändringar för att den engelska och

6 den svenska sidan ska uppdateras och att ha tid till att lägga in informationen är ett problem. En utmaning är att försöka göra den enklare att kunna hantera hur ändringarna sker och hur sidorna kan ha samma layout. samtidigt inte hantera någon kod. Tjänsten från Hemsida24 tycker de idag är smidigt både ekonomiskt och tidsmässigt. En annan utmaning var att hemsidan i nuläget inte är responsiv. En viktig del för de flesta användarna är att hemsidan fungerar bra på mobilen då det är via mobilen som många användare går in på hemsidan. Användarna vill att hemsidan ska fungera oavsett om det är via datorn eller mobilen som man söker information. En annan utmaning är hur man kan skapa en hemsida som personalen på Idrottscentrum själva kan underhålla men att

7 Personas Att använda sig av personas i en designprocess är ett bra sätt för designerna i designprojektet att få en tydligare bild av vilka problem och behov som finns samt vilka mål både användarna och beställarna har (Kolko, 2010). Figur 1. Vår primära persona Nicklas Carlsson Figur 2. Vår sekundära persona - Jasmine Clifford

8 Scenarios Att använda sig av scenarios i en designprocess är bra då de låter designers se på designen från ett användarperspektiv som kan ge en mer mänsklig synvinkel (Kolko, 2010). 5.1 Kontextscenario Nicklas är en student på Högskolan i Halmstad. Att ha mycket att göra i skolan gör honom stressad och han visste att Idrottscentrum låg nära skolan. Han gick in och kollade på deras hemsida och tyckte den såg väldigt bra ut och han såg även att de hade en veckas gratis provträning vilket han tyckte lät som ett bra erbjudande. Han tränar för att kunna rensa tankarna efter en lång skoldag. På lunchen i skolan funderar han på vad han vill göra på gymmet senare på eftermiddagen och bestämmer sig för att prova på ett av alla de olika gruppträningspassen som gymmet har att erbjuda. Han går in på deras hemsida på mobilen och kollar på dagens gruppträningar som finns på startsidan. Där finns den information om passen han behöver veta, till exempel tid, längd och om det finns några lediga platser. När han bestämt sig för vilket pass han vill gå på så loggar han in på sitt konto och klickar på boka på de pass han bestämt sig för. En bekräftelse om att han blivit bokad på passet kommer då upp. Han loggar ut från sitt konto och känner sig nöjd med att bokningen var smidig och att träningen för dagen är fixad. 5.2 Key-path scenario Nicklas sitter i skolan och känner att han börjar få ont i ryggen. Han tror det är för att han suttit på ett dåligt sätt och pluggat mycket inför en tenta han har snart. Han går in på Idrottscentrums hemsida och ser på första sidan att de erbjuder massage. Det står lite information om gymmets massage och en knapp där det står boka. Nicklas trycker på boka och kommer då vidare till bokningssidan för massagen. Han väljer vilken massage han vill ha och vilken tid. Han

9 fyller också i namn och adress och trycker boka. När han bokat får han en bokningsbekräftelse på mailen där det står vilken tid och dag han bokat sin massage. 5.3 Validation scenario Jasmine bokade in sig på gruppträningspasset BodyPump för 2 dagar sedan och ser fram emot ett svettigt träningspass. Men samma dag som passet är, bara två timmar innan passet ska börja så får hon ett om att passet blivit inställt i sista sekund på grund av att instruktören blivit sjuk. Hon blir besviken men får ett alternativ om att få gå på det ersättande passet Zumba istället. Skulle hon välja att inte gå på Zumban så är hon automatiskt avbokad på passet vilket de meddelar i mejlet. Men denna gången väljer Jasmine att testa på Zumban istället och svarar på mejlet att hon vill bli inbokad på det ersättande passet istället.

10 Design(Lösning) 6.1 Designlösning Beskriv designlösning: De två tjänster som Idrottscentrum använder sig av, Hemsida24 och BRP-systems, fungerar inte att koppla ihop. Det går endast att koppla ihop om man hanterar sin kod själv och på så sätt koppla in BRP-systems API. Detta är inget som går ifall man använder sig av ett CMS som Hemsida24 är. För att komma runt detta problemet och undvika att personalen på Idrottscentrum skulle behöva hantera kod testades möjligheten att använda Wordpress. Wordpress är ett mellanting men som under designprocessen blev en begränsning. Det alternativ som togs fram gjordes genom att använda sig av ett responsivt ramverktyg som heter Bootstrap. Till Bootstrap kompletterades det med både HTML och CSS för att anpassa hemsidan utefter de mål som var identifierade. Ramverk: Under skissandets gång användes den ''rektangulära fasen'' som förmedlar betydelsen av innehållet genom att skissa rektanglar med det innehåll som utgör rektangeln samt genom att beskriva och förklara hur deras funktioner har en påverkan på varandra (Cooper et al., 2007). Efter skapandet av skisser och wireframes var idén tillräckligt detaljerad för att kunna skapa en prototyp. Prototypen skapades i Adobe XD som sedan exporterades till InVision för att kunna kolla flödet och utföra tester. De två personas som skapades gjordes i Xtension, Nicklas Carlsson är den primära och Jasmine Clifford är den sekundära.

11 Principer: I vår designlösning är vår primära personas slutmål att på ett smidigt sätt boka in ett träningspass efter en lång dag med studier. Upplevelsemålet är att de som användare ska känna sig säkra på hur bokningen av ett pass fungerar och att de kan navigera omkring på hemsidan lätt utan felaktig information. Det mål som kallas life goal blir för personas att få en vardag där de kan kombinera sina studier med sin träning på ett så smidigt sätt som möjligt. Visuell design: När designern ska välja vilka färger som ska användas bör det finnas en tanke och en mening bakom färgvalet. Till exempel kan grön dra till sig uppmärksamhet och kan inbjuda till att se hit eller klicka här (Weinschenk, 2011). Typsnitt: Typsnittet som valdes som det primära heter Segoe UI (Regular) och är till rubriker. Det sekundära typsnittet heter Avenir LT com. Figur 3. Färgskalan som användes i prototyperna Designlösning utifrån personans användningsmål: Designlösningarna som tagits fram är framtagna för att passa in på våra personas olika mål. Utifrån de två personas som togs fram framkommer det att ett problem är när hemsidan inte är responsiv vid användning av mobilen. Detta löstes med anpassade media queries som gör att innehållet blir responsiv till mobilen. Ett annat problem är att det är svårt att förstå hemsidan samt att designen inte är tillfredsställande. För att adressera det problemet ändrades layouten på hemsidan och viktig information samlades tydligt på ett ställe för att vara enkelt att hitta och förstå.

12 Prototypen: Figur 4. Startsidan för Invision-prototypen Figur 5. Sidan för Våra anställda i Invision-prototypen

13 Programmerad prototyp: Figur 6. Startsidan för den programmerade prototypen, visad på en datorskärm Figur 7. Startsidan för den programmerade prototypen, visad på en mobilskärm

14 Figur 8. Sidan för att boka pass i den programmerade prototypen, visad på en datorskärm Figur 9. Sidan för att boka pass i den programmerade prototypen, visad på en mobilskärm

15 Sammanfattning av designbrief Under den här kursen har vi jobbat utifrån en designbrief vi fick av Idrottscentrum. Där stod vad Idrottscentrum ville ha hjälp med, vilket var en ny layout på deras hemsida och att koppla deras bokningssystem till hemsidan via en API. De ville inte heller att vi skulle programmera sidan då det blir svårt för dem själva att sedan gå in och ändra/uppdatera. Som skrivet tidigare i projektrapporten lyckades vi aldrig koppla hemsidan med bokningssystemet då vi hade behövt programmera mer och det hade tagit för lång tid. Vi skapade ett nytt utseende för hemsidan som hade en tydligare röd tråd genom hela sidan och som även var lite mer livlig. Vi programmerade även några sidor på hemsidan för att visa Idrottscentrum hur det hade kunnat se ut om de valde att istället programmera hela hemsidan för att få in deras bokningssystem.

16 Referenslista Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). About face: the essentials of interaction design. John Wiley & Sons. Kolko, J. (2010). Thoughts on interaction design. Morgan Kaufmann. Weinschenk, S. (2011). 100 things every designer needs to know about people. Pearson Education.

17 Empiri Intervjuguide Bilaga 2.1 Frågeställningar: Vilken kontext planerar ni välja? - Vilken specifik kontext? Alla som gymmar på idrottscentrum - Vilken specifik plats? Gymmet Idrottscentrum Vilken personahypotes har ni? - Vilka typer av användare tror ni finns i kontexten? Vi tror att det finns medlemmar på gymmet både som använder hemsidan mycket och medlemmar som inte gör det. Vi tror vissa går på gruppass och vissa använder bara gymmets maskiner. Vilka ska ni intervjua? - Vem är SME? Personalen på Idrottscentrum - Vem är användaren? Medlemmar på gymmet - Vem intervjuar? En person vid varje intervju - Hur sparar ni material? Anteckningar på google drive - Vad har syftet med intervjun? Få inblick i vad medlemmarna tycker om gymmets hemsida. Vilka är era fem viktigaste frågor? - Tilltalar hemsidan dig? - Använder du hemsidan ofta? - Är det lätt att hitta på hemsidan? - Har du några andra synpunkter på ''Idrottscentrums'' hemsida? - Är informationen på hemsidan lättillgänglig? Hur planerar ni att analysera materialet? Vi kommer att sammanställa alla intervjuer och ta ut gemensamma problem och funderingar för att sedan skapa en bra hemsida.

18 Intervjufrågor Bilaga 3.1 Frågor till användare(semistrukturerad): - Använder du hemsidan ofta? - Går du på gruppträningar? - Använder du hemsidan när du bokar pass? - Varför/varför inte? - Är det lätt att hitta på hemsidan? - Tilltalar hemsidan dig? - Vad tycker du om layouten dvs sidans alla delar? - Vet du vilka olika tjänster som gymmet erbjuder? (t.ex massage) - Vad tycker du om designen? - Är det lätt att hitta kontaktuppgifter på sidan om du skulle ha frågor? - Har du några andra synpunkter på ''Idrottscentrums'' hemsida? - Är informationen på sidan lättillgänglig? Intervju personal: - Hur ofta använder du hemsidan? - När du går in på hemsidan vad gör du då? - Är det lätt/svårt att navigera på sidan? - Är det något du tycker kan göras bättre? - Hur är designen för dig? - Hur fungerar layouten för dig? - Vad har du för andra synpunkter på hemsidan'? - När började ni använda er av hemsida24? - har ni testat att uppdatera sidan någon gång? - Har ni frågat medlemmarna vad de tycker om ert bokningssystem?

19 Sammanställning av intervjuer Bilaga 4.1 Medlemmar: Ingen av de personer vi intervjuat tycker att sidan har en bra design. Alla intervjupersoner skulle föredra andra (snyggare) färger på hemsidan. En person kommenterade att den var väldigt dålig på mobilen då den inte anpassade sig. 3 av 5 personer gick på gruppass, två bokade på hemsidan och en använde appen för att den var smidigare. Ingen fick reda på vad gymmet erbjuder genom hemsidan 2 av 5 fick reda på vad gymmet erbjuder genom affischer på gymmet 1 av 5 visste inte alls vad gymmet erbjuder 1 av 5 fick reda på det genom kompisar På mobilen gick den engelska sidan ibland tillbaka till svenska 1 av 5 personer tycker inte bokningssystemet flyter på utan hakar upp sig ibland. 2 av 5 personer tyckte det var lätt att navigera sig runt på hemsidan - De tycker dock bara det är lätt att hinna info om saker de redan vet, inte t.ex. information om vilka erbjudanden som finns eller vilket utbud gymmet har(behandlingar) 1 av 5 personer tyckte att vissa saker var lätta att hitta medans andra var svåra, vissa flikar gick till samma plats. Hade varit lättare om man hade en flik till ett ställe. 1 av 5 personer tyckte inte alls det var lätt att hitta på hemsidan. SME: Väldigt olika intervjuer då den en SME har hand om hemsidan medan den andra inte alls är inne på sidan överhuvudtaget. Båda vill ha en roligare, finare hemsida som är lättare att navigera. Simon som inte använder hemsidan, aldrig är inne och redigerar tycker att det saknas vissa flikar och att rubrikerna blir flummiga för att de inte får plats. Hemsida24 begränsar. Simon vill ha mer information på en och samma sida utan att den blir plottrig. Simon går in ibland och kollar så att informationen stämmer Han vill få med fler kommande utbildningar på hemsidan, samt uppstartsdatum mm. De har aldrig förut gjort någon undersökning på vad deras medlemmar tycker om hemsidan.

20 Carolin går in och redigerar 1-10 ggr i månaden beroende på hur mycket som behöver ändras. Carolin tycker hemsidan är platt, behöver mer liv. De tycker det är smidigt med hemsida24 för att den finns i Halmstad men öppna för att byta. Är intresserade av Heimo, dotterbolag till Hemsida24.

21 Designhistorik och skisser Att göra skisser är bra i ett tidigt skede i designprocessen för att få bra och användbar feedback som man sedan kan använda för att utveckla en bättre prototyp. Om man visar kunden en för utvecklad prototyp tidigt i processen blir feedbacken inte lika användbar (Kolko, 2010).

22