Skatespots app Door Kwabena Appiah-nti en Sanne Schouten. In opdracht van Communication and Multimedia Design te HvA, 20-01-2015
Inleiding
Dit document bevat een ontwerp verantwoording van de applicatie ‘Skatespots’. De applicatie is ontstaan voor het vak ‘the social web’ aan de opleiding Communication and Multimedia Design aan de Hogeschool van Amsterdam. In het document kunt u in grote lijnen terug vinden hoe ons ontwerp is opgebouwd van begin tot eind prototype. Dit document is slechts een beknopte versie van ons gehele proces, alleen de belangrijkste punten(schermen) worden behandeld.
Inhoud Inleiding
blz. 2
Doelgroep
blz. 3
Kernidee
blz. 3
Conceptmodel
blz. 4
Functioneel ontwerp (paper prototype)
blz. 5 - 6
Scenario’s (low fidelity wireframes)
blz. 7 - 8
Wireflow (high fidelity wireframes)
blz. 9
Reflectie
blz. 10
Bronnen
blz. 10
2
Doelgroep
De doelgroep van onze skatespot applicatie zijn skaterboarders, zowel mannelijk als vrouwelijk. De algemene leeftijd van de doelgroep is tussen de 15 en 25 jaar. Een aantal verwachtingen die de doelgroep heeft die wij in de applicatie hebben verwerkt zijn; - Over de gehele wereld(kaart) kunnen zoeken naar skatespots - Onbeperkt aantal spots kunnen vinden en toevoegen - Een verwijzing naar het navigatiesysteem van de mobiel(of googlemaps) - Je favoriete skatespots kunnen opslaan in de app - Zoeken op bepaalde tags (halfpipe, bowl, park etc.) Dingen die wij nog zouden willen toevoegen in een nieuwe versie; - Je skatespot prive of publiekelijk instellen - Delen via social media - Toevoegen van skateshops - Meerdere extremesport spots (longboard, blading, bmx etc.) - Meerdere talen
Kernidee
Een applicatie bieden aan skateboarders waar ze gemakkelijk en snel skatespots kunnen vinden, toevoegen en delen over de gehele wereld(kaart).
3
Conceptmodel
Route
Skate parken Architectuur
bestaan uit
Skatespots
voegen
geven en zien Ratings
Map
toe aan
zijn
geven en zien
creëert
Skate winkels
bestaan uit
bestaan uit
Skateboarders
toont weg naar
worden toegevoegd aan
worden toegevoegd aan
Locaties zijn een
plaatsen
Comments
geven Foto’s
worden toegevoegd aan worden toegevoegd aan
wordt toegevoegd aan
Community BMXen Informatie Longboarden
Overige ‘sporten’
Rolschaatsen
deelt
Blading
4
Functioneel ontwerp Maps (landingspagina)
De maps pagina is waar de gebruikers binnen komen, dit moet er dus een goede, functionele uitstraling hebben. De map zal spots over de hele wereldkaart tonen door middel van een kleine foto, dit is gebasseerd op pattern 1. Daarnaast is het van belang dat de gebruiker weet waar hij zelf is op de map, zodat hij grof kan navigeren. Dit is gebasseerd op pattern 2. (NB; In de detailpagina is een optie tot exacte navigatie.)
Favorieten (overzicht)
De favorieten lijst biedt de gebruiker een overzicht van zijn ‘opgeslagen’ skatespots. Het is in een overzicht van belang dat de gebruiker de voor hem meest relevante informatie ziet, geen extra’s. Dit is een afbeelding, de titel, de afstand en de populariteit. Hier hebben we zowel pattern 1 als 2 ter inspiratie gebruikt. Deze patterns zijn slechts een kleine greep uit vele.
5
Functioneel ontwerp Spot (detailpagina)
Toevoegen (aanmaken spot)
Op de detailpagina kan de gebruiker alle ins en outs over de skatespot te vinden. Het is van belang dat de gebruiker hier kan vinden wat hij wil vinden, geen overbodige dingen maar wel alles wat nodig lijkt te zijn.
Bij het toevoegen van een skatespot, wil de gebruiker zijn ‘ei’ kwijt. Wij bieden hem daarom zoveel ruimte als hij zelf wil in het toevoegen van een omschrijving, foto’s en catagoriën (tags).
Afbeeldingen spreken duizend woorden, zo ook bij een skatespot. De gebruiker zal dus naast een beschrijving ook foto’s kunnen vinden van de spot. Tevens zal de gebruiker hier een knop vinden voor navigatie naar de skatespot(via eigen mobiel).
Dit onderdeel was lastig te basseren op een pattern omdat het specifieke informatie bevat die grotendeels alleen voor de skatespot app van belang is. De bovenstaande patterns zijn slechts een kleine greep uit de vele die ons inspiratie hebben geboden.
Er zijn vele patterns te vinden van detailpagina’s, de bovenstaande hebben ons het meest op weg gebracht met wat we wel en niet wilden laten zien.
6
Scenario 1 - reader Voor gebruik van de applicatie: De gebruiker heeft zin om te skaten met zijn vrienden, ze weten alleen niet waar. Ze pakken de app erbij en beginnen te ‘browsen’.
Tijdens gebruik van de applicatie: AT&T
AT&T
11:56 AM
AT&T
11:56 AM
AT&T
11:56 AM
11:56 AM
The pool - Groene voet
The pool Groene voet
208 11
The pool - Groene voet
Likes Favorites
The pool - Groene voet
May 2nd, 2014
@Map:
208
Likes
110
Favorites
The pool - Groene voet 208 11
Likes Favorites
The pool - Groene voet 208
Likes
11
Report
Favorites
Comments:
18
Likes
11
Favorites
@arie: Toffe plek! Did my first flip here
The pool - Groene voet
@ans: Great one! My hometown
208
@karel2014: Got to love it.
11
Search
Favorites
Map
New spot
Settings
Wanneer de gebruiker de applicatie geopend heeft komt hij op de kaart pagina. Zijn locatie word ingeladen en de map zoekt de dichtsbijzijnde spots. De gebruiker kan over de gehele wereld browsen in deze map.
Search
Favorites
Map
New spot
Settings
De skatespots zijn op de kaart aangegeven met een miniatuur foto. Wanneer de gebruiker op de foto klikt word de titel van de spot zichtbaar. Hier kan de gebruiker op verder klikken om naar de detailpagina te gaan.
Search
Favorites
Map
New spot
Settings
Op de detail pagina vind de gebruiker foto’s en een omschrijving van de skatespot. Daarnaast kan hij ook beoordelingen lezen in de vorm van comments, likes en favorieten. Deze kan hij tevens zelf ook toevoegen.
Search
Likes Favorite
Favorites
Map
New spot
Settings
Wanneer de gebruiker een leuke skatespot heeft ontdekt, kan hij deze opslaan in favorieten. Zo kan hij de spot ieder moment terug vinden.
Na gebruik van de applicatie: De gebruiker en zijn vrienden hebben een toffe ‘skatespott’ gevonden en gaan deze checken. Ze keren eventueel nog terug naar de applicatie om de ‘spot’ te beoordelen.
7
Scenario 2 - creator Voor gebruik van de applicatie: De gebruiker is aan het skaten en komt een toffe plek tegen die hij wil delen met andere skaters.
Tijdens gebruik van de applicatie: AT&T
AT&T
11:56 AM
AT&T
11:56 AM
AT&T
11:56 AM
11:56 AM
Notifications:
Title
New spots, nearby Comments Description
Likes About: Skatespott is an app created for a schoolcourse named Social Web for the study Communication and Multi Media Design in Amsterdam - The Netherlands Help: The purpose off this app is to exchange skatespots and keep the fun in the skate community. If the app doesn’t work please send your claim to
[email protected]
Tags Pool
Nice architecture Grind
Halfpipe
Bowl
Skate Park Wheels
Shop Board
...................
Add
Search
Favorites
Map
Add
New spot
Settings
Wanneer de gebruiker een nieuwe spot in de applicatie wil toevoegen. Drukt hij op ‘new spot’ en komt hij wederom bij een kaart. Zodra hij de locatie goed heeft gezet kan hij op ‘voeg toe’ drukken om toe te voegen.
Search
Favorites
Map
New spot
Settings
Wanneer de gebruiker de nieuwe skatespot gaat toevoegen word de camera functie meteen geopend. De gebruiker kan ook een foto uit zijn bestaande kiezen door op de vierkantjes te drukken.
Search
Favorites
Map
New spot
Settings
De gebruiker kan zijn skatespot een titel geven een omschrijving, tags en vervolgens kan de skatespot toegevoegd worden aan de applicatie.
Search
Favorites
Map
New spot
Settings
Bij instellingen kan de gebruiker aanzetten welke meldingen hij wil ontvangen om op de hoogte gehouden te worden van de applicatie en zijn skatespot.
Na gebruik van de applicatie: De gebruiker heeft zijn eerste eigen spot toegevoegd aan de app. Hij blijft op de hoogte van zijn spot door mede-skaters die de spot beoordelen via de app.
8
Wireflow
0.1 Laden
5.0 Zoeken
3.0 Favorieten
1.0 Maps
2.0 Toevoegen
4.0 Detailpagina
1.1 Maps 2
2.1 Camera
2.2 Omschrijven
6.0 Opties
9
Reflectie De samenwerking verliep voorspoedig. We wisten wat we van elkaar konden verwachten en wat we aan elkaar hadden, hierdoor konden we de taken gemakkelijk verdelen en waren de opleveringen aan elkaar proffesioneel. Het proces van het maken van de app verliep ook goed, we hadden vanaf het begin al eenzelfde eindprototype in ons hoofd en we zijn tevreden met het resultaat.
Bronnen
Kort doelgroep interview Foto’s van;
Iconen in de schermen van; Patterns van; &
10
