App design for GoBoat

Transkript

1 App design for GoBoat Link til website: Linke til PopApp: Gruppe 1 Augusta Holten Eik Franksdottir Mikkelsen Josefine Louise Barsøe Nielsen Thomas Maruia Andersen 1

2 Indhold Design briefet Målgruppedefinition Personas NABC Designovervejelser Styleguide Sitemap Wireframes Scenarie User journey Prototyping process Billeder/mockup af app App ikon Test af app Ekstra detaljer Layoutdiagrammer Test af websitet Links/referencer Link til Trello Board: 2

3 Design Breif Hvem er kunden? GoBoat APS. Hvem er målgruppen for løsningen? Vennegrupper i alderen år, som typisk er bosat i København. Hvilken design løsning er umiddelbar? En appløsning muliggører en digitalisering af bookingsystemet hos GoBoat og mindsker medarbejderomkostninger. Hvornår skal design løsningen bruges? Fredag d. 3. juni Hvor skal designet bruges? Som app til iphone & Android. Hvorfor tror kunden at en design-løsning er nødvendig? Et design af en appløsning vil at gøre det lettere og mere tilgængeligt for kunder, at booke en GoBoat. Ydermere vil GoBoat være interesseret i at effektivisere deres bookingssystem og på den måde mindske arbejde for deres medarbejdere. Hvordan skal design løsningen implementeres? App'en skal markedføres på de sociale medier med reklamer på instagram og Facebook, da det når hurtigt ud til målgruppen. En reklame, som hurtigt fortæller om GoBoat og den nye app på musiktjenesten Spotify, kunne også være en god mulighed for at nå ud til målgruppen. Derudover skal der selvfølgelig reklameres med app'en på GoBoats hjemmeside og evt. en reklame i gratisavisen Metroxpress og lignende magasiner. 3

4 Målgruppe Målgruppe: Vennegrupper Vores målgruppe er unge mennesker mellem år. De er typisk bosat i København og kønsfordelingen er lige fordelt. Det er hyppigst vennegrupper på 4-6 personer, som vil have en social og unik oplevelse på vandet. De booker gennemsnitlig en sejltur på 2 timer, har prøvet GoBoat én gang før og har typisk booket på forhånd. De vælger at bruge GoBoat i stedet for andre bådudlejningsselvskaber pga. GoBoat er en bæredygtig løsning og har en lydløs motor. 4

5 Personas #1 Persona Navn: Christian Rasmmussen. Alder: 30 år. Uddannelse: Cand. i økonomi. Status: Kæreste med Maria i 3 år. Job: Arbejder hos Nordea Bank. Psyke: Christian er en udadvendt person, der elsker at være social. Fritids aktiviteter: Han spiller fodbold med vennerne og elsker at lave mad. Motivation: Christian skal snart holde fødselsdag for sine venner og vil gerne prøve noget nyt. Han kan rigtig godt lide vandet og fælles spisning, så han vil gerne prøve Goboat. Drømme: Christian er meget eventyrlysten og har en drøm om at rejse verden rundt og møde forskellige mennesker på sin rejse. #2 Persona Navn: Anne-Sofie Andersen. Alder: 26 år. Uddannelse: Jura studerende. Status: Single. Job: Studentermedhjælper hos advokatfirmaet Kåre Pihlmann. Fritid: Anne-Sofie træner 3 gange om ugen i Fitness World og er ellers sammen med sine veninder og sin familie, når hun ikke forbereder sig til studierne. Psyke: Anne-Sofie er en rolig pige. Hendes tætte venner er vigitige for hende og hendes familie fylder en stor del af hendes hverdag. Motivation: Anne-Sofie skal være med til at arrangere en polterabend for hendes barndomsveninde og tænker GoBoat kunne være en sjov start på dagen. Drømme: Anne-Sofie har en drøm om at finde en kæreste, blive gift og stifte familie. Karrieremæssigt er hendes største drøm at være forsvarsadvokat. 5

6 NABC Need: Det er vigtigt, at det er nemt og hurtigt at bruge GoBoats app til at booke og betale en GoBoat. Målgruppen er unge mennesker mellem år, som typisk er bosat i København. Det er vigtigt, at app'en er enkel og nem at finde rundt i. Approach: Løsningsforslaget er en app, som gør det let at booke en GoBoat. Via en app for GoBoat kan kunder hurtigt booke en båd med enkelte trin. Man kan fx tilføje andre personer til at splitte regningen, hvis man er en gruppe venner på tur. Efter bookingen får kunden en bekræftelse samt en kode, som skal tastest ind på båden. Båden starter når koden er tastet og efter endt tur udregnes den eksakte pris. Når turen er færdig betales der automatisk. Første gang man bruger app'en gemmer den ens oplysninger og man har på den måde automatisk fået en bruger. På app'en er der også mulighed for at finde rabbater til nærliggende restauranter, ændre personlige oplysninger, læse en startup guide, se kort over kanalerne og finde GoBoats kontaktoplysninger og regler. Benefits: Med en app for GoBoat kan kunder nemt booke og betale for en GoBoat. Dette kan medføre, at flere kunderne bliver mere spontane og derfor hurtigt tager en beslutning om at booke en GoBoat. GoBoat bliver mere tilgængeligt og kan nå ud til flere personer. Det giver GoBoat i sidste ende større indtjening. GoBoat kan med appen spare bemandingskræfter ved at optimere og automatiserer deres bookingssystem. Kunder kan på den måde så vidt muligt selv booke, finde og bruge båden uden meget personlig vejledning. Competition: Der er en ikke stor konkurrence af app for udlejning af både, hvor man kan booke og betale nemt og hurtigt. Med en app kan GoBoat differentiere sig fra andre firmaer med lignende ydelser. For at opnå en konkurrencedygtig løsning skal appen være brugervenlig og let tilgængelig. GoBoats bæredygtige identitet og bådenes lydløse motor er med til at tiltrække kunder og gøres GoBoat til det fortrukne sted at leje en båd. 6

7 Design overvejelser Brainstorm - de første tanker 7

8 Styletile 8

9 Sitemap Forside Burgermenu Book båd My bookings Help Safety GoDeli Profil Kontakt Bookinger Start guide Sikkerhed, regler og tips Brugerinfo Bookingsinfo List of restaurant Kontaktinfo Booking online Pay Split payment Confirmation 9

10 Wireframes Logo Fugia voluptas isquid que plissinveria veremque magnis escium et eraturit, sitaqui dell Logo Estimated Price text text text BOOK NOW Logo Logo text text text text text text Fugia voluptas isquid que plissinveria veremque magnis escium et eraturit, sitaqui dell BOOK NOW PAY 10

11 Wireframes Logo text text text Rores et eum nis cus sum aut volorem fugit occum nonsequam fugiae plibeatem quatiuntem voloris dollupi duntibus, autate aboreprem que dolorec aecuptaqui vitatur ercipsus maio ve Logo text text text My bookings text text text Logo My bookings Fugia voluptas isquid que plissinveria veremque magnis escium et eraturit, sitaqui dell! text text text Logo text text text text text text text text text text text text text Dit modipsusciet quati tem hil mod et officaepudae consequis doluptae ea. Estimated Price Get text started! text text 11

12 Scenarie og User Journey Anne-Sofie vil gerne booke hos GoBoat til en polterabend for sin gode veninde. Anne-Sofie taster ind, hvor og hvornår de vil sejle rundt. Anne-Sofie skal dele regningen med de andre veninder, der arrangerer polterabenden. Anne-Sofie taster mobilnumrene ind og godkender. De andre arrangører får en notofikation om, at Anne-Sofie ønsker at dele regningen med GoBoat, som de accepterer. Anne-Sofie har tilføjet veninderne og kommer tilbage til hendes booking og kan gøre sin booking færdig. Anne-Sofie har brugt GoBoat app'en før, så hendes oplysninger er gemt og hun får nu en bekræftigelse på hendes booking med booking oplysninger og aktiveringskode. Når hun klikker på pop-up bekræftigelsen forsvinder den. Anne-Sofie er tilbage på forsiden. Anne-Sofie bruger app'en for første gang og taster sit navn, og kortoplysninger ind. 12

13 Scenarie Anne-Sofie går efter ind på menu'en for at finde hendes booking informationer. Hun kan ikke huske aktiveringskoden og er i tvivl om, hvordan man skal starte båden. Anne-Sofie går ind på "My bookings" og får nu alle informationerne for hendes booking. Hun kan vælge at læse en Start Guide - det vil hun gerne. Anne-Sofie læser trinfor-trin, hvad hun skal gøre for at starte båden og hvad hun skal gøre, når turen er slut. 13

14 User journey Christian går sammen med en gruppe venner og nyder solen på Islands Brygge. 1 Christians veninde Sofie får øje på en båd i kanalen og udbrøder: "Hvor kunne det være fedt at tage ud og sejle i det her vejr!". 2 3 Christian sige begejstret: "Vi kan da bare booke en båd hos GoBoat!" Vennerne bliver enige om at gøre det. Christian tager sin smartphone frem og går ind på GoBoat app'en og booker hurtigt en båd. 4 Efter booking modtager Christian en aktiveringskode på sin smartphone. 5 6 Christian og hans venner køber lidt snacks og drikkevarer og går hen til den nærmeste GoBoat havn Vennerne hopper ombord på båden, som Christian har booket og stiller drikkevarer og snacks frem på bordet. Christian trykker aktiveringskoden ind og båden starter. Vennerne sejler ud i kanalen og nyder en sejltur i det gode vejr. 14

15 Prototyping process Brainstorm af app design Vores brainstorm over app-designet gav os et tydeligt overblik over hvad vores app skulle indholde og hvilket gennemgående tema, der skulle være gældende. Vi fik listet et par ord, som udgjorde retningslinjer for designet af appen. Disse ord skal holdes i baghovedet når mockuppen af appen laves: - Varm - Moderne vintage/antikvitet - Sømandstema - Vand, sejle, båd, hav - Sommer - Venner - Lys - Hipt og uformelt 15

16 Prototyping process Skitse 1. Skitse 2. 16

17 Mockup af app 17

18 Mockup af app 18

19 App ikon Overvejelsr ift. ikon design Vi fokuserede på at bruge de samme farver, som GoBoat bruger på deres hjemmeside samt den samme typografi. Disse to elementer er en stor del af GoBoats brand identitet, som vi gerne vil bevare i vores app design. Samtidig fik vi en fornemmelse af moderne vintage og antikvitet i deres identitet, hvor vi også har haft dette i mente. Vi gik efter en simpelt ikon med et "sømands-tema". Vi prøvede med forskellige symboler, som giver brugeren en idé om, at der er tale om at sejle. Ord som båd, anker, sejle, vand, ror og sømand var inspiration for ikon-udviklingen. Det endelige ikon har en bølget baggrund, som GoBoat bruger og har i deres designmanual. Da man er sin egen kaptajn hos GoBoat syntes vi, at et ror ville være en god måde at symboliserer dette på. "GoBoat" er skrevet over roret med en blå outline og hvidt fyld. Forskellige udkast til ikon og logo Første ikon Endeligt app-ikon Vi startede med at dele navnet op, i et forsøg på at lave navnet større og mere tydeligt. Vi blev dog enige om at beholde GoBoats eget logo design og på den måde få mere sammenhæng mellem app og website. 19

20 Test af app Testperson: Bettina Alder: 52 Køn: Kvinde Beskæftigelse: Arbejder som selvstændig Tænke højt test Hvad var din oplevelse? Nem at identificere sig med. Meget brugervenligt og lækkert layout på app. Logisk opbygning og god burgermenu. Farverne passer godt til Goboat s identitet og enhver får lyst til at booke en GoBoat ved hjælp af dén app. Hvad var godt? Hele appen fungerer godt og der er rød tråd og tænkt over hver detalje. Kan rigtig godt lide designet af burgermenuen og logoet illustrere fint at man har med en båd/vand at gøre. Hvad var dårligt? Kunne godt gøre mere for at vise at GoBoat er miljøvenligt, er ikke tydeligt i appen. Hvad var historiens pointe? At få booket en GobBoat hurtigt og nemt, og samtidig få de vigtige instruktioner og infomationer. Beskriv løsningen med et tillægsord Enkelt. Overvejelser omkring testresultat Denne test viser, at vi har ramt godt ift. design og brugervenlighed. Bettina passer dog ikke ind i vores målgruppe, men vi valgte alligevel at teste på en ældre, for at undersøge om vores løsning er så brugervenlig, at alle ville kunne anvende app løsningen. Testen viser dog også, at vi kunne sætte mere fokus på bæredygtigheden. Vi vil derfor tage til overvejelse, om det er noget, som vi vil få ind i vores app løsning. 20

21 Test af app Tænke højt test Testperson: Anne Katrine Alder: 22 Køn: Kvinde Beskæftigelse: Studerende, praktik på Ritzau. Hvad var din oplevelse? Det var en overordnet rigtig god oplevelse. Det er et rigtig pænt design og den er let at bruge. Hvad var godt? Allerede på forsiden er man ikke i tvivl om, hvad denne app går ud på. Hele designet har en fin rød tråd igennem og der er den rigtige "stemning". Startguiden er kort og enkel, som jeg synes fungere godt, da man ikke gider læse alt for meget. Hvad var dårligt? Gad ikke læse "Rules og conditons", da der stod lidt for meget. Læste ikke de tre vigtige punkter heller, det stod med for små bogstaver. Derudover var der tvivl om, hvordan man skulle bruge "split payment". Forstod ikke hvordan og om man oprettede en personlig profil og hvor man loggede ud. Hvad var historiens pointe? At booke en GoBoat på en nem måde. Beskriv løsningen med et tillægsord Sommerstemning. Overvejelser omkring testresultat Anne Katrine er tættere på den målgruppe vi har, så hendes testresultat er vigtigt ift. vores design proces. Vi kan konkludere, at vores design er godt og generelt her app'en brugervenlig og nem. Vi skal dog overveje, om vi skal ændre siden med "Rules og conditons", og evt. skrive det mere kort og i punktform. Derudover skal vi overveje, om funktionen "split payment" er en nødvendighed for app'en, da den måske forvirrer brugeren mere end den gavner. 'Split Payment' er måske mere relevant i forhold til turister. Ændringer ud fra testen Vi har gjort "terms and conditions" mere tydelig. Man forstår nu nemmere, at man opretter en profil (hvis man gemmer oplysningerne) og man kan logge ind på forsiden og logge ud i burgermenuen. 'Split payment' beholder vi i denne omgang, da vi har diskuteret at udenlandske vennegrupper, som typisk ikke har Mobile Pay, kunne have gavn af dette. Vi har dog ingen testresultater over dette. 21

22 Ekstra detaljer Udkast til pop-up reminder: Reminder! Today s the day! Remember your GoBoat booking today at at Islands Brygge 10! Når kunden har booket en båd, kan kunden vælge at sætte en "reminder", så der enten dagen før eller en time inden man har en GoBoat, kommer en notafikation på ens smartphone med en "reminder" fra GoBoat. Have an awesome GoBoat experience! Udkast til pop-up notifikation: 30 minutes left It's time to head back to the dock - sadly. "Michala" is free after your booking and it seems like you're having a lot of fun. If you need a little extra time, please let us know. Read more about payment here. Please make sure to be back no later than Don't worry - we'll send a reminder. Når turen er ved at være slut, og der f.eks. er 30 minutter tilbage (afhængig af hvor de er), dukker en lille notifikation op. Denne giver kunden et prej om at det er tid til at sejle tilbage. Samtidig informerer den om, at de godt kan blive ude på vandet, hvis båden ikke er booket lige efter dem. Trykker man på "let us know" kommer man ind på en side på appen, hvor man kan acceptere om man bliver ude på vandet. Ikoner på app'en: 22

23 23 Layoutdiagrammer #home.h1.nav.ul #howitwork.div.div.ul.img.h2 #goprofile.div.div.ul.img.h2 #godeli.div.div.ul.img.h2 #featurs.h2.div.img.li.h3.p.li.h3.p.li.h3.p.li.h3.p.li.h3.p.li.h3.p #carousel.figure.img.img.img.img.img.img.img.img #download.div.header.h2.p.ul.a #footer #icons.a # copyright.a.p

24 Test af website Heuristisk test Status Synlighed: Hjemmesiden skal altid holde brugerne informeret om, hvad der foregår, gennem passende feedback brugeren skal vide hvor den aktuelle placering er, hvilke muligheder der er for at navigere herfra og hvordan den nuværende position er placeret i en større sammenhæng. Konsistens og standarder: Brugerne bør ikke spekulere på, om forskellige ord, situationer eller handlinger betyder det samme. Der skal være konsekvens i både navngivning, funktion og design alle links ser ud og fungerer på samme måde, menuer er placeret på samme måde og fungerer ensartet på hele sitet. Æstetisk og minimalistisk design: Hjemmesiden bør ikke indeholde oplysninger, der er irrelevante eller sjældent nødvendigt man bør forenkle sit design (mængden af information og visuelle elementer) så meget som muligt for at undgå støj. Kategori: 0 = I don't agree that this is a usability problem at all 1 = Cosmetic problem only: need not be fixed unless extra time is available on project 2 = Minor usability problem: fixing this should be given low priority 3 = Major usability problem: important to fix, so should be given high priority 4 = Usability catastrophe: imperative to fix this before product can be released 24

25 Test af website Tænke højt test Testperson: Bettina, Alder: 52 Køn: Kvinde Beskæftigelse: Arbejder som selvstændig Hvad var din oplevelse? Hjemmesiden afspejler appen rigtig godt. Både layoutmæssigt og navigationen. Fungerer godt som en one-page og viser tydeligt at det er et præsentionssite af appen. Navigationen er bygget op omkring en burgermenu (ligesom appen), det giver en rød tråd. Hvad var godt? Sitet fungerer overordnet godt. Man kan ikke så meget, men det er heller ikke vigtigt da den kun skal præsentere appen. Hvad var dårligt? Sitet gør mere opmærksom på at Goboat er miljøvenligt end appen, men man kan godt gøre mere ud af det begge steder, da det er en væsentligt faktor og da målgruppen netop er meget miljøbevidste. Hvad var historiens pointe? At få præsenteret GoBoat appen via sitet, vise dens funktioner, informationer m.m.. Beskriv løsningen med et tillægsord Enkelt. Overvejelser omkring testresultat Denne test viser, at vores website præsentere vores app godt og at der er god sammenhæng mellem vores app-løsning og hjemmeside. Vi kan dog stadig tage til overvejelse, om vi vil sætte mere fokus på bæredygtigheden. 25

26 Links/referencer Links (template til website) Materialer Undervisningsmateriale fra KEA Design manual fra GoBoat Survey Report fra GoBoat GoBoat oplæg Creditering Geared Slab Bold: Ben Dalrymple St Marie Thin: Stereotypes (Font Squirrel) St Marie Bold font: Online Web Fonts. Template til website: Spectral by HTML5 UP. 26