Ontwerpdocumentatie

Ontwerpdocumentatie start-up project Climber Timer

Naam Omar Vasquez Jesus Studentnummer 500704100 Klas Roze Docent C.J.H.M. van den Driesche Vak Project 2 fase 3 Team 5 Product Climber Timer Opdracht Ontwerpdocument Datum 16 - 3 - 2015 Ontwerpdocumentatie 3 Versie 1

Algemene inleiding Mijn naam is Omar Vasquez Jesus, ik ben een van de studenten die onderdeel uitmaakt van team 5 van het 2de project. Het team bestaat uit de volgende studenten: Danilo Merea, Daan Ruhland, Khai ThĂŠ, Rufus Smienk, Lars Schuitema en ik. Ons team heeft als doelgroep muurklimmers en het product dat we aan het ontwikkelen zijn voor deze doelgroep heet de Climber Timer.

Door middel van de techniek NFC is het de bedoeling dat wij als team de problemen van de doelgroep verhelpen en hun offline sociaal contact er mogelijk ook mee kunnen bevorderen.

In de voorgaande ontwerprapporten is uitgelegd en getoetst hoe wij onderzoek hebben gedaan naar de doelgroep en hun probleemstelling, de verschillende klimhallen die er zijn, onderzoek naar de NFC techniek en hoe deze is toe te passen op de doelgroep en hun probleem ook is er onderzoek gedaan naar de vormgeving en ontwerpen van ons product.

Binnen het team was ik vooral verantwoordelijk voor het maken,bewaren en toetsen van de vormgeving en ontwerpen van het product. Daarnaast diende ik ook als kwaliteit bewaarder en valideerde ik of een bepaald (deel)product wel voldeed aan de criteria en kwalitatief goed genoeg was om gebruikt te worden.

Als vormgever van het team ben ik voor het grootste gedeelte van de visuele producten verantwoordelijk geweest zowel voor het maken als het bedenken. Te beginnen met een stijl, logo, moodboard, style tile, schetsen, wireframes en ontwerp van de website en mobiele website. Daarbij horen natuurlijk ook mijn presentatie en deze ontwerpdocumentatie.

Wat wordt er in dit rapport besproken? Dit rapport gaat over de laatste fase van het project 2.

In het vorige rapport is uitgelegd hoe we onze ontwerpen hebben getest op de doelgroep en de bevindingen die hieruit zijn voortgekomen geformuleerd hebben. Aan de hand van de bevindingen en feedback die we hebben verzameld tijdens deze testen hebben wij onze ontwerpen en vormgeving voor het product veranderd. Met name de interface van de website en de mobiele website hadden veel aandacht nodig.

De verbeteringen een aanpassingen aan de hand van de feeback van de tests zijn terug te vinden in dit rapport. Te beginnen met het moodboard, style tile, schetsen, wireframes en ontwerpen voor de website en de mobiele website.

Inhoudsopgave Doelgroep 5

Style tile

13

Uitleg style tile 13

Climber Timer 5

Ontwerp style tile 14

Stakeholders 6

Schetsen 15 Uitleg schetsen 15

Onderzoek

7

Waardepropositie canvas 8

Schetsen 16/20

Verbeterde schetsen wireframes

21

Verbeterde schets wireframes 21/24

Programma van Eisen & MoSCoW 9

Conclusie

Algemene uitleg wireframes

25

Ontwerp wireframes website

26

10

Moodboard 11 Uitleg moodboard 11 Ontwerp moodboard 12

Ontwerp wireframes website 26/32

Ontwerp wireframes mobiele website

33

Ontwerp wireframes mobiele website

33/40

Climber Timer website ontwerp

41

Climber Timer website ontwerp 41/42

Climber Timer mobiele website ontwerp

43

Climber Timer mobiele website ontwerp

43/51

Climber Timer mobiele website iPhone

52

Climber Timer mobiele website ontwerp iPhone

52/59

Reflectie

60/61

Persoonlijke uitdaging 62

Doelgroep

Climber Timer

Het product de Climber Timer is een armband die door klimmers in de klim hal wordt gedra-

Hoe werkt de armband?

gen. De doelgroep is dus klimmers die regelmatig in de klim hal komen. Deze armband houdt

Een klimmer beklimt een klimmuur terwijl hij de Climber Timer draagt. De armband wordt

de klimtijd van de klimmers bij met behulp van NFC. Deze klimtijden worden vervolgens

beneden langs de eerste scanner gehaald, vanaf dit punt begint de tijd met meten. De klim-

opgeslagen en kunnen terug worden bekeken door de klimmers. Voor wij als groep verder

mer klimt omhoog, en bovenaan wordt de armband weer gescand. De tijd stopt met meten en

konden gaan met het werken aan dit product, was het nodig om meer onderzoek naar de

de gemeten tijd die het duurde om van de ene scanner naar de andere te gaan wordt opgesla-

doelgroep te doen. Dit hebben wij gedaan door middel van interviews, maar we hebben eerst

gen. Maar waar bevinden deze scanners zich? Overal in de muur? Op elke steen aan de muur,

ook onderzoek gedaan naar het doen van onderzoek zelf.

of alleen op sommige? Is er alleen eentje bovenaan en onderaan de muur of zijn er meerdere?

Hier hebben wij onderzoek naar gedaan.

Als eerste hebben we een waardepropositie canvas gemaakt met de informatie die we al hadden over de doelgroep en het product uit de vorige fases van dit project. In de gebrui-

Checkpoints (door Rufus Smienk)

kerszijde van het waarde propositiecanvas kan er gezien worden dat de doelgroep naast

Om op de klimmuur klimtijden te meten met NFC zullen er NFC-chips in de klimmuur moet-

gewoon klimmen ook steeds een nieuw record wil klimmen en deze informatie makkelijk

en zitten. De klimmer begint onderaan de muur met klimmen en eindigt bovenaan. Onder en

kunnen bekijken zodat ze ook hun vooruitgang kunnen zien. Het kost nu te veel moeite om

bovenaan de muur moeten dus in ieder geval NFC-chips komen. Binnen-klimmuren kunnen

je tijden bij te houden en deze te vergelijken met je eigen tijden of de tijden van je vrienden.

tot 25 meter hoog zijn. Er zal niet altijd tot deze hoogte geklommen worden. Om toch de tijd te meten van het beginpunt tot de hoogte waar de klimmer is gekomen, en om bij te houden hoe lang de klimmer over elk stuk op de muur doet, kunnen er checkpoints op de muur worden geplaatst. Elke keer als er langs een van deze checkpoints geklommen wordt, wordt de tijd gemeten die het duurt om van het ene naar het andere checkpoint te komen.

Waar komen de checkpoints?

Op de klimmuur zitten verschillende klimroutes. Het is niet handig om in elke steen een NFC-chip te plaatsen, maar er moeten op de muur wel op verschillende plaatsen chips zitten zodat de klimmer niet helemaal naar boven hoeft te klimmen om zijn tijden te weten. Het lukt ook niet altijd om helemaal boven te komen. Checkpoints met NFC-chips moeten dus geplaatst worden. Deze checkpoints zouden elke twee meter kunnen worden geplaatst. De checkpoints zouden ook bij elk zekeringspunt kunnen worden geplaatst. Zekeringspunten zijn punten op de muur waar klimmers hun touw vastmaken zodat ze niet helemaal naar beneden kunnen vallen. De klimmer moet met zijn hand naar dit punt toe om het touw te zekeren. Het zou dus geen extra moeite kosten voor de klimmer als op deze punten ook een NFC-checkpoint aanwezig zou zijn die de tijd meet. De klimmer maakt zijn touw vast en tegelijkertijd komen de armband van de klimmer en de NFC-chip in de muur met elkaar in contact en wordt de klimtijd van de klimmer gemeten.

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

5

Stakeholders Stakeholders Met stakeholder wordt bedoeld een organisatie die invloed ondervind of uit kan oefenen op een product. Voor de Climbertimer hebben we onderzocht wie de stakeholder van dit product zijn. Ook hebben we uitgezocht wat voor de stakeholders de positieve en negatieve punten zijn.

Gebruikers Dit zijn directe belanghebbenden van de Climber timer. Voordelen van het product voor deze stakeholders zijn dat ze hun klimprestaties kunnen meten. Hierdoor kunnen de klimmer hun prestaties verbeteren. Een nadeel hiervan is is dat het de gebruikers geld kost om het product aan te schaffen.

Klimhallen De klimhal kan door de Climber timer meer bieden aan hun klanten. Hierdoor kunnen de klimhallen ook meer geld verdienen. Een negatief punt is dat een investering nodig is om het NFC systeem mogelijk te maken.

Concurrenten Er zijn geen directe concurrenten voor de Climber timer maar wel producten die er sterk op lijken. Een voordeel zou kunnen zijn dat klimbanden in het algemeen populairder worden en dat de markt daarom groeit. Een nadeel voor de concurrentie is dat de Climber timer een groot deel van de markt kan gaan bezitten.

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

6

Onderzoek Na het maken van de gebruikerszijde, hebben we de productzijde van het waarde propositie

Hierna hebben we onze doelgroep geĂŻnterviewd om een beter beeld te krijgen van hoe ze

canvas gemaakt met daarin de gain creators, pain relievers en products & services van de

zijn. Wat vinden ze van ons product? Wat zouden ze zelf nog toevoegen? Op deze vragen

Climber Timer, die een oplossing moeten gaan bieden voor de problemen uit de gebruikerszi-

wouden wij antwoord hebben. Uit deze interviews bleek dat de doelgroep het tijd meten in-

jde.

teressant vind en denken dat de Climber Timer mensen zal motiveren om vaker te klimmen.

Veel vonden de tijden van anderen ook interessant. Er waren ook nog ideeĂŤn om een klein

Ons waarde propositie canvas gaf ons al een aardig beeld van onze doelgroep, maar er was

displayscherm aan de bandjes toe te voegen, en de optie dat gebruikers hun eigen bandjes

natuurlijk nog veel meer om te weten te komen. We wouden goed onderzoek doen naar onze

kunnen maken.

doelgroep, en ook naar alle andere onderdelen van ons product. Daarom hebben we ook onderzoek gedaan naar onderzoek doen zelf.

Ons waarde propositie canvas hebben we gedurende de weken van fase 3 ook aangepast. Wat we al hadden verbeterd, elementen verwijderd en elementen toegevoegd.

Onderzoek doen (door Kai ThĂŠ) Er zijn twee soorten manieren hoe je onderzoek kan doen:

We hebben bij ons nieuwe waarde propositie canvas ook geprobeerd het offline sociale as-

-primary research (field research)

pect te verwerken. Klimmers willen naast hun tijden bijhouden en bekijken ook meer com-

-secondaire research (desk research)

petitie vinden door middel van klimwedstrijden. Klimwedstrijden zorgen voor meer offline sociaal contact en kunnen makkelijker worden gehouden met de Climber Timer.

Primary research: Primair onderzoek bestaat uit een verzameling van originele verzamelde informatie die door

De doelgroep van de Climber Timer is dus klimmers. Bij klimmers gaat het er om dat ze moe-

de de onderzoeker is gedaan. Voor dat je begint met je primary research is het handig om

ilijke routes op een klimmuur goed kunnen klimmen. Klimmers willen deze klimroutes in

enig inzicht op te doen door te kijken naar secondaire research of het analyseren van oude

steeds snellere tijden beklimmen, en deze tijden natuurlijk ook makkelijk terugzien. Als ze

primaire gegevens (OWL, z.d.).

de tijden van andere klimmers ook kunnen zien ontstaat er competitie, waar klimmers ook behoefte aan hebben. Door ranglijsten en klimwedstrijden in de klim hal wordt deze com-

Onderzoek kan gedaan worden door verschillende methodes: Vragenlijst en telefonische

petitie bereikt.

interviews, of experimenteren en directe observaties. Het voordeel van primair research is dat je controle hebt over welke informatie wordt verzameld en ook hoe de informatie wordt verzameld, hierdoor voorkom je dat je onnodige informatie verzameld en de manier hoe je informatie verzameld kan gevolgen hebben op het resultaat van je onderzoek.

Desk research: Bij deskresearch maak je gebruik van al bestaande informatie die tot beschikking is.

Door het uitvoeren van zoekopdrachten in kranten, databases, internet en heel veel andere bronnen kan er al heel wat gevonden worden. Vervolgens ga je de bronnen analyseren, je kijkt of er informatie in staat dat van toepassing is. Vervolgens kijk je naar de bronnen van de auteur om te kijken of deze betrouwbaar zijn (Research-insight, z.d.). ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

7

Waardepropositie canvas

Figuur 1 : Waardepropositie canvas gebruikerszijde

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Figuur 1 : Waardepropositie canvas productzijde

8

Programma van Eisen & MoSCoW Gebruikerseisen

Concurrentie eisen

-

Gebruiker kan tijd meten. (M)

-

Nauwkeuriger tijd bijhouden dan concurrentie. (S)

-

Gebruiker kan eigen profiel aanmaken. (M)

-

Uitgebreide app. (S)

-

Gebruiker kan andere profielen bekijken. (S)

-

Bevorderd offline sociaal contact. (M)

-

Gebruiker kan vrienden zoeken en uitnodigen (M)

-

Veel opties voor het klimmen, bijvoorbeeld wedstrijden en challenges. (C)

-

Gebruiker kan tijd meten (C)

-

Gebruiker kan doelen behalen (C)

-

De gebruiker kan zijn positie van zichzelf en anderen zien in het klassement (S)

-

Gebruiker heeft een duidelijk overzicht van tijden. (M)

-

Gebruiker kan zijn vooruitgang zien. (M)

-

Makkelijke ervaring voor de gebruiker. (M)

-

Gebruiker kan competitie vinden, maken, organiseren. (M)

-

Verbetering duidelijk te zien. (M)

-

Gebruiker kan makkelijk klimwedstrijden houden. (S)

-

Helpt competitie vinden. (M)

-

De gebruiker moet makkelijk langs checkpoints op de klimmuur kunnen gaan. (M)

-

Makkelijk resultaten delen. (S)

-

Gebruiker kan contact leggen met andere gebruikers (S)

-

Koppelbaar aan social media. (S)

-

Gebruiker kan winkelen via de website (mobiele website) (C)

-

Gebruiker kan routes aanmaken, afleggen (C)

-

Gebruiker kan trofeeĂŤn behalen en bekijken (C)

-

Gebruiker kan statistieken bekijken (M)

-

De gebruiker kan video’s bekijken van afgelegde routes en trainingen etc. (C)

-

Het bandje irriteert niet. (M)

-

De gebruiker kan zijn profiel verbinden met social media (C)

-

Het bandje is klein en blijft niet haken. (S)

-

De gebruiker kan content delen via social media (C)

-

Het bandje gaat niet glijden of schuiven. (S)

-

Het bandje ziet er hip uit en heeft een simpele sportieve look. (S)

-

De app heeft een simpele en duidelijke vormgeving. (M)

-

De app is niet te druk (teveel knoppen, opties, kleuren enz.). (S)

Technische eisen

Functionele eisen

Vorm eisen

-

De armbandjes kunnen met behulp van de checkpoints tijd meten. (M)

-

De tijden van een gebruiker worden naar de app gestuurd. (M)

-

Kan vooruitgang laten zien. (M)

-

Moet dingen kunnen onthouden. (M)

-

Zonder moeite of teveel stappen tijd meten. (M)

-

Heeft een online omgeving. (M)

-

Touch screen applicatie. (S)

-

Moet kunnen laten zien welke gebruikers online of in de klim hal zijn. (C)

-

Snelle, duidelijke app. (S)

-

Moet een duidelijk overzicht van alle tijden kunnen laten zien. (M)

-

Zonder veel stappen alle opties van de app gebruiken. (S)

-

Moet klimwedstrijden live kunnen bijhouden. (W)

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Interactie eisen

9

Conclusie Alle tijden van de klimmers zijn te bekijken op een groot scherm in de klim hal zelf en op een (mobiele) website. Een gebruiker moet een profiel aanmaken, waarop hij makkelijk al zijn tijden kan bekijken. Naast zijn eigen profiel bekijken en bewerken, moet hij ook profielen van andere gebruikers kunnen bekijken, zodat hij hun tijden ook kan zien en vergelijken met zijn eigen. Verder moet de gebruiker contact kunnen zoeken met andere gebruikers om te chatten en deze gebruikers uit te dagen voor klimwedstrijden.

De belangrijkste eisen van de Climber Timer zijn dus dat de gebruiker zijn klimtijden makkelijk kan meten met een armbandje dat niet irriteert, en een duidelijk overzicht van deze tijden heeft zodat hij ook zijn vooruitgang kan zien. Ook moet de gebruiker de tijden van andere gebruikers kunnen zien zodat hij makkelijk competitie kan vinden. Deze tijden moet de gebruiker kunnen meten met behulp van NFC-armbandjes die makkelijk langs checkpoints op de klimmuur kunnen gaan. Deze tijden moet de gebruiker makkelijk terug kunnen zien op de app. Een makkelijk te gebruiken app waarop alle tijden bekeken kunnen worden en waarop ook contact kan worden gevonden met andere gebruikers voor offline sociaal contact en klimwedstrijden.

In deze fase is er veel veranderd aan het product. De veranderingen die zijn gemaakt waren aan de hand van onderzoek naar de doelgroep, het product, de applicatie, het design en de concurrentie. Ook zijn de stakeholders bekeken. In deze fase is versie 1.0 ontworpen van het product. Het design van het bandje is helemaal afgemaakt. Ook is de website uitgewerkt en getest. Door middel van het programma van eisen hebben wij aangetoond dat de Climber Timer goed aansluit op de doelgroep en daarom is het doel van ook deze fase behaald.

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

10

Uitleg moodboard De moodboard geeft de sfeer weer die wij willen toepassen in de lay-outs en interfaces van

Afbeeldingen en foto’s

de Climber Timer. Tevens wordt dit moodboard ook gebruikt om een basis te vormen voor

Een van de dingen die we naar voren wilde laten komen door middel van onze stijl was het

een style tile die als leiddraad dient om de website en de mobiele website te ontwerpen.

extreme in het muur klimmen, de sport uitbeelden als een stoere en harde sport die veel

Hieronder volgt een uitleg over de keuzes die gemaakt zijn voor het creëren van het mood-

techniek en kennis vergt. De afbeeldingen en foto’s die wij door onze ontwerpen heen heb-

board. Het is onderverdeeld in een aantal categorieën die samen de stijl vormen waarvoor

ben gebruikt brengen het stoere aan de muur klim sport naar boven. Ook hebben we gekozen

wij als team voor hebben gekozen.

om zoveel mogelijk afbeeldingen zwart-wit te laten zien om de impact van het stoere nog groter te maken.

Vorm De vorm die we het meeste gebruiken voor de lay-outs en interfaces zijn voornamelijk sim-

Iconen

pele basisvormen en dan met name, rechthoeken en vierkant. Ons doel is naar overzichte-

Iconen en afbeeldingen zijn en erg belangrijk onderdeel van de vormgeving met name het

lijkheid te streven en dit het liefst zo simpel mogelijk. Zo is het voor de doelgroep duidelijk

persoonlijk communiceren met de doelgroep. De iconen die wij gekozen hebben zijn erg

wat er bedoel wordt en is het toepassen van hiërarchie met deze vorm erg eenvoudig. Ook

simpel, klein en makkelijk te begrijpen. Dit is bewust gekozen om interfaces van de website

zijn dit de vormen die weer terugkomen op interfaces van schermen, zo hebben we minder

en de mobiele website zo duidelijk en helder mogelijk te kunnen vormgeven. De iconen zijn

criteria waar we ons aan moeten houden als we deze vormen ook aanhouden en toepassen.

meestal wit maar kunnen ook zwart terugkomen in de verschillende ontwerpen.

Kleur

Textuur

In totaal hebben we vier verschillende kleuren waar we mee willen werken maar de twee

Binnen onze stijl hebben we niet veel gebruikt gemaakt van textuur, dit is gedaan omdat wij

belangrijkste kleuren binnen de stijl zijn fel oranje en wit. De overig kleuren die gebruikt

bewust voor een heldere, duidelijk en opvallende vormgeving hebben gekozen. Texturen val-

worden in onze ontwerpen zijn zwart en grijs (cool grey). Deze twee zijn meer voor accenten

len meestal weg in de achtergrond en hebben verder niet veel toegevoegde waarde aan ons

en details en dus niet de hoofdzaak van de stijl.

ontwerp. Ook kunne texturen negatief werken als je er geen goed gebruik van maakt en kan de doelgroep een andere indruk krijgen van ons product (Climber Timer)

Waarom hebben wij gekozen voor de kleuren oranje en wit? onze doelgroep zijn muurklimmers, dit zijn meestal mensen die wel van sport houden en het liefst hier ook beter in wil-

Font

len worden zowel technisch als lichamelijk. Muurklimmen is op zichzelf een erg inten-

Als font hebben we gekozen voor Open Sans, waarom we voor dit font hebben gekozen heeft

sieve sport en vergt veel techniek om er beter in te worden. Het valt ook een beetje onder

meerdere redenen de belangrijkste zijn de volgende:

de extreme sports. Wat willen we dus uitstralen voor de doelgroep: energiek, actief, wakker,

•

Duidelijk te lezen zowel op print als op scherm

duidelijk, opvallend en uniek.

•

Het font is te gebruiken in meerdere talen

•

De font is te gebruiken als Google font (wat handig is voor websites en mobiele web-

Dit is de criteria waar we ons aan willen houden en vandaar dat we hebben gekozen voor de

sites)

kleur fel oranje. De kleur valt erg op is goed te combineren met andere kleuren, is op zich

•

De font is voor iedereen gratis te downloaden

uniek vergeleken met andere standaard kleuren als rood, blauw of groen. Wit hebben we ge-

•

Meerdere families

kozen als contrast op het felle en overheersende fel oranje. Wit komt terug in verschillende vormen in het ontwerp, maar het komt vooral terug in de teksten, iconen en logo.

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

11

Ontwerp moodboard

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

12

Uitleg style tile De style tile is opgemaakt aan de hand van de criteria en keuzes waarmee het moodboard opgemaakt is. Vorm, kleur, font en afbeeldingen komen overeen met het moodboard, de style tile dient als leiddraad voor de ontwerpen van de wireframes, website en de mobiele website.

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

13

Ontwerp style tile

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

14

Uitleg schetsen Deze schetsen zijn gemaakt aan de hand van onze allereerste bevindingen deze schetsen hebben we ook toegepast om de interfaces op een makkelijke en snelle manier op ons zelf te testen. tevens vormen deze schetsen de basis voor het ontwerpen van de wireframes, die dan weer dienen voor het uiteindelijke ontwerp van de website en de mobiele website van Climber Timer. De eerste schetsen zijn de aller eerste versies vervolgens zijn deze verbeterd en verduidelijkt met kleur en vlakken om het idee van een interface meer naar voren te brengen.

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

15

Schetsen

Schets wireframes 1 (gemaakt door Omar Vasquez Jesus)

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

16

Schetsen

Schets wireframes 2 (gemaakt door Omar Vasquez Jesus)

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

17

Schetsen

Schets wireframes 3 (gemaakt door Omar Vasquez Jesus)

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

18

Schetsen

Schets wireframes 4 (gemaakt door Omar Vasquez Jesus)

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

19

Schetsen

Schets wireframes 5 (gemaakt door Omar Vasquez Jesus)

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

20

Verbeterde schets wireframes

Verbeterde schets wireframes 1 (gemaakt door Omar Vasquez Jesus)

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

21

Verbeterde schets wireframes

Verbeterde schets wireframes 2 (gemaakt door Omar Vasquez Jesus)

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

22

Verbeterde schets wireframes

Verbeterde schets wireframes 3 (gemaakt door Omar Vasquez Jesus)

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

23

Verbeterde schets wireframes

Verbeterde schets wireframes 4 (gemaakt door Omar Vasquez Jesus)

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

24

Algemene ontwerp wireframes Door de voorgaande onderzoeken en testen die we hebben uitgevoerd zowel bij ons zelf als bij de doelgroep zijn we gekomen tot een aantal bevindingen, deze bevindingen hebben we omgezet in criteria waar we ons aan moeten houden tijdens elk ontwerp die we leveren die verband heeft met de doelgroep en het gebruik van ons product.

Aan de hand van ons PvE en MoSCoW hebben we besloten welke functies de app zou moeten hebben, en zijn er wireframes gemaakt.

De wireframes laten zien wat de app en het scherm in de klim hal allemaal zouden moeten kunnen. De vormgeving was de volgende stap, de kleuren en het font zijn belangrijke punten die de look & feel van de applicatie sterk be誰nvloeden.

Voordat we de website en de mobiele website gaan ontwerpen gaan daar eerst een aantal stappen aan vooraf waaronder de schets fase en het ontwerp van de wireframes van de verschillende interfaces die terug komen op de website.

Hier volgt de verbeterde versie van de wireframes ontwerp aan de hand van feedback van de doelgroep.

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

25

Ontwerp wireframes website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes website 1 (gemaakt door Omar Vasquez Jesus)

26

Ontwerp wireframes website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes website 2 (gemaakt door Omar Vasquez Jesus)

27

Ontwerp wireframes website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes website 3 (gemaakt door Omar Vasquez Jesus)

28

Ontwerp wireframes website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes website 4 (gemaakt door Omar Vasquez Jesus)

29

Ontwerp wireframes website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes website 5 (gemaakt door Omar Vasquez Jesus)

30

Ontwerp wireframes website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes website 6 (gemaakt door Omar Vasquez Jesus)

31

Ontwerp wireframes website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes website 7 (gemaakt door Omar Vasquez Jesus)

32

Ontwerp wireframes mobiele website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes mobiele website 1, 2 (gemaakt door Omar Vasquez Jesus)

33

Ontwerp wireframes mobiele website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes mobiele website 3, 4 (gemaakt door Omar Vasquez Jesus)

34

Ontwerp wireframes mobiele website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes mobiele website 4, 5 (gemaakt door Omar Vasquez Jesus)

35

Ontwerp wireframes mobiele website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes mobiele website 6, 7 (gemaakt door Omar Vasquez Jesus)

36

Ontwerp wireframes mobiele website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes mobiele website 8, 9 (gemaakt door Omar Vasquez Jesus)

37

Ontwerp wireframes mobiele website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes mobiele website 10, 11 (gemaakt door Omar Vasquez Jesus)

38

Ontwerp wireframes mobiele website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes mobiele website 12, 13 (gemaakt door Omar Vasquez Jesus)

39

Ontwerp wireframes mobiele website

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Ontwerp wireframes mobiele website 14, 15 (gemaakt door Omar Vasquez Jesus)

40

Climber Timer website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer website ontwerp 1 (gemaakt door Omar Vasquez Jesus)

41

Climber Timer website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer website ontwerp 2 (gemaakt door Omar Vasquez Jesus)

42

Climber Timer mobiele website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website ontwerp 1, 2 (gemaakt door Omar Vasquez Jesus)

43

Climber Timer mobiele website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website ontwerp 3, 4 (gemaakt door Omar Vasquez Jesus)

44

Climber Timer mobiele website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website ontwerp 5, 6 (gemaakt door Omar Vasquez Jesus)

45

Climber Timer mobiele website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website ontwerp 7, 8 (gemaakt door Omar Vasquez Jesus)

46

Climber Timer mobiele website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website ontwerp 9, 10 (gemaakt door Omar Vasquez Jesus)

47

Climber Timer mobiele website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website ontwerp 11, 12 (gemaakt door Omar Vasquez Jesus)

48

Climber Timer mobiele website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website ontwerp 13, 14 (gemaakt door Omar Vasquez Jesus)

49

Climber Timer mobiele website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website ontwerp 15, 16 (gemaakt door Omar Vasquez Jesus)

50

Climber Timer mobiele website ontwerp

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website ontwerp 17 (gemaakt door Omar Vasquez Jesus)

51

Climber Timer mobiele website iPhone

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website iPhone 1, 2 (gemaakt door Omar Vasquez Jesus)

52

Climber Timer mobiele website iPhone

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website iPhone 3, 4 (gemaakt door Omar Vasquez Jesus)

53

Climber Timer mobiele website iPhone

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website iPhone 5, 6 (gemaakt door Omar Vasquez Jesus)

54

Climber Timer mobiele website iPhone

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website iPhone 7, 8 (gemaakt door Omar Vasquez Jesus)

55

Climber Timer mobiele website iPhone

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website iPhone 9, 10 (gemaakt door Omar Vasquez Jesus)

56

Climber Timer mobiele website iPhone

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website iPhone 13, 14 (gemaakt door Omar Vasquez Jesus)

57

Climber Timer mobiele website iPhone

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website iPhone 15, 16 (gemaakt door Omar Vasquez Jesus)

58

Climber Timer mobiele website iPhone

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

Climber Timer mobiele website iPhone 17, 18 (gemaakt door Omar Vasquez Jesus)

59

Reflectie Dit project was een lang traject waar je tijdens elke fase weer in een andere groepje zat met

De doelgroep die wij gekozen hadden waren muurklimmers, muurklimmers die echt van de

mogelijk een ander product en een verschillende doelgroep. Het project bestond uit 3 fases

sport houden, daarnaast dit graag met vrienden zouden willen doen of doen en wel van een

met elke fase een bepaald onderwerp/thema waar uiteindelijk dan de opdrachten op geba-

competitie spelletje houden. De probleemstelling was als volgt: de offline contacten van

seerd waren. Deze opdrachten moesten in de vorm van een video, website of onderzoek gep-

de muurklimmers moet bevorderd worden doormiddel van NFC techniek. Aan ons als team

resenteerd worden. In de eerste twee fases van het project werd je ingedeeld in een groepje

hier achter te komen, dit te onderzoeken, het onderzoek verwerken in gebruikerseisen, deze

van ongeveer vier á vijf mensen in de derde en laatste fase mocht jezelf een groep samen-

eisen vormen tot een concept en dit concept gebruiken om een product te creëren.

stellen.

Tijdens het doen van onderzoek, ontwerpen van interfaces van het product en het toetsen Het project in het algemeen gaat over een probleemstelling van een bepaalde doelgroep, die

van de PVE’s (Programma van Eisen) op de ontwerpen en de doelgroep zijn we constant

je moet oplossen aan de hand van bepaalde techniek. In dit geval was de NFC (Near Field

bezig geweest met iteraties, elke fase bestaat uit iteraties van het onderzoek en het ontwerp.

Communication) de techniek die we ter beschikking kregen, in het kort is NFC een techniek

De iteraties vinden ook plaats binnen de fase zelf het gehele project door dit is erg typer-

die veel gebruikt en gebruikt gaat worden. Het is een kleine chip die draadloos verbinding

end voor een agile project. Je hebt taken deze maak je, je toets ze bij de doelgroep, ontvangt

kan maken in deze chip kan je informatie en/of code opslaan. Deze informatie kan je vervol-

feedback, verwerkt feedback, past je ontwerp aan toetst het opnieuw bij de doelgroep etc. In

gens op devices zien als je verbinden maakt met de NFC-chip.

het kort heet dit een PDCA cyclus Plan, Do, Check, Act, dit hebben we het hele project door

De doelgroepen zijn door de verschillende fases heen van het project veranderd ook zat je

gedaan.

tweemaal in een andere groep. De laatste fase was de fase waarin het eindproduct gepresenteerd en opgeleverd moest worden. Dit was dus een van de belangrijkste fases van het gehele

Zoals ik als zei was onze doelgroep muurklimmers en de probleemstelling was het bevor-

project. Aan de hand van de voorgaande fases en het onderzoek wat je hebt gedaan kon je nu

deren van hun offline contact doormiddel van NFC. Ons concept is als volgt: doormiddel van

met de NFC techniek een concept/product vormen. Voor de door je groep gekozen doelgroep

NFC kunnen we bepaalde informatie bijhouden van de klimmers, deze informatie kan vervol-

die hun probleemstelling zou verhelpen en mogelijk ook offline contact zou kunnen bevor-

gens opgeslagen worden, verwerkt worden en worden gevisualiseerd voor de eindgebruiker.

deren.

Deze informatie wordt opgeslagen aan de hand van een armband een NFC armband die de klimmer dan om ze pols heeft. De klimmuur bestaat ook uit NFC-chips. Tijdens het klimmen

Voor de derde fase van het project vormde ik samen met de volgende medestudenten een

worden een aantal statistieken van de klimmer bijgehouden door de NFC. Dit kan zijn: tijd,

team, team 5 bestaat uit de volgende studenten: Chris Hoek, Danilo Merea, Rufus Smienk,

snelheid, afstand etc. Deze informatie kunnen we gebruiken en visualiseren. Hierdoor kan

Daan Ruhland, Khai Thé, Lars Schuitema en ik Omar Vasquez Jesus. Samen met zijn zevenen

je een eigen profiel creëren, en ontstaat er zo een soort community onder de klimmers met

vormen wij team 5, als team hebben wij binnen de groep personen met verschillende capac-

verschillende klimmers die allemaal en eigen profiel hebben.

iteiten en vaardigheden die goed op elkaar aansluiten. Zo zijn Lars, Danilo en Chris meer de technische zijde van de groep, Daan kan 3D modellen van de producten maken, Rufus kan

Aan de hand van de opgeslagen statistieken, kan dit gevisualiseerd worden in de vorm van

erg goed visualiseren en kan verbluffende story boards maken en interfaces schetsen, Khai

een website/applicatie die de klimmers dan kunnen gebruiken om met iemand anders te

heeft meer een leidende rol en houdt de takenverdeling en de deadlines bij. Ik zelf ben ver-

klimmen, nieuwe contacten te zoeken of statistieken te bekijken van hun zelf of andere

antwoordelijk voor de styling, vormgeving en conceptvorming van het product.

klimmers.

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

60

Hoe is het project nu verlopen? naar mijn gevoel is het project redelijk goed verlopen, natu-

In het kort heb ik erg veel geleerd tijdens deze periode in het algemeen maar zeker tijdens

urlijk waren hier een daar een aantal onderwerpen die wat beter uitgevoerd hadden kunnen

het project. In teamverband werken blijft altijd een uitdaging maar dat maakt het tegeli-

worden of die onder de loep genomen hadden moeten worden. Maar in grote lijnen is het

jkertijd ook leuk. Naar mijn mening is er door het team erg hard gewerkt en persoonlijk ben

project/product zeker geslaagd. We hebben ons concept/idee zo goed mogelijk (voor de ge-

ik tevreden met het eindresultaat.

geven tijd) omgezet tot een product voor onze doelgroep.

De samenwerking binnen het team ging erg goed en we konden het goed met elkaar vinden, het enige wat af en toe mis gaat en erg belangrijk is, is de onderlinge communicatie binnen de groep. Communicatie zo belangrijk met dit soort projecten dat het veel kan verstoren als dit niet goed en soepel verloopt. Met namen het naar elkaar luisteren blijkt steeds vaker moeilijker te zijn dan je denkt ook jezelf verwoorden naar een ander zo dat diegene echt begrijpt wat je bedoelt is niet altijd even makkelijk.

Tijdens het project is er ook een contract opgesteld met regels, informatie en voorwaardes waar ieder teamlid zich aan moest houden om het project geslaagd en tevreden af te ronden.

Helaas is er een teamlid geweest die mede door persoonlijke redenen zich hier niet aan kon houden en deze heeft als gevolg uit eigen initiatief helaas de groep verlaten. Zijn werk is overgenomen en goed opgepakt door de resterende teamleden.

In het totale plaatje vind ik dat we erg hard hebben gewerkt en dat iedereen een steentje heeft bij gedraagt om het project tot een succesvol en geslaagd einde te brengen. Er zijn zeker dingen waar we zowel individueel als team aan moeten werken maar we zijn tijdens dit project zeker gegroeid. Het herkennen van je fouten, benutten van je eigen maar ook elkaars kwaliteiten en het begrijpen en helpen van elkaar.

Tijdens dit project hebben we ook een persoonlijke uitdaging opgesteld, een soort eis(en) voor jezelf, waar je persoonlijk vind dat je daar aan kan werken of er verder in kan groeien.

Ik persoonlijk heb naar mijn mening het grootste gedeelte van mijn persoonlijke uitdagingen wel behaald maar niet op een manier dat ik er niet verder in kan groeien. Het kan altijd beter of anders dus je kan altijd aan jezelf blijven werken dit is zowel voor jezelf als je team altijd positief zowel nu als in toekomstige projecten/opdrachten.

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

61

Persoonlijke uitdaging •

Presentatie goed voorbereiden en presenteren

Goed in teamverband werken

•

Ontwerpkeuzes beargumenteren

Het goed werken in teamverband is zowel voor je zelf als voor het team waar je in werkt erg

•

Goed in teamverband werken

belangrijk. Ik wil dit verbeteren door ten eerste goed naar elkaar te luisteren en je ook te ver-

•

Opdrachten gepast uitwerken

plaatsen in de gedachtegang van iemand anders. Het bevorderen en het helder houden van

•

Anderen helpen met hun taken

communicatie onderling is dus essentieel voor het goed verlopen van een project. Goed naar

•

Anderen hun kwaliteiten herkennen en hiervan leren

elkaar luisteren empathie vormen voor de andere leden binnen het team en jouw gedachtes en ideeën zodanig uitleggen dat het voor iedereen begrijpbaar is.

Dit zijn mijn persoonlijke uitdagingen, aan de hand van deze uitdagingen wil ik mijn zelf op persoonlijk vlak verbeteren, zowel voor nu als voor de toekomst. Dit heeft voordelen voor

Opdrachten gepast uitwerken

mijn zelf en voor de teams waar ik nu en in de toekomst nog mee ga werken.

Met het gespast uitwerken van opdrachten bedoel ik dat tijdens het project de verschillende deelproducten zo veel mogelijk een eenheid vormen en dat dit ook goed aansluit op de doelgroep en zijn/haar probleemstelling. Tijdens een project werk je altijd samen aan ver-

Presentatie goed voorbereiden en presenteren

schillende deelproducten want uiteindelijk samen het product moet vormen. Deze eenheid

Mijn eerste persoonlijke uitdaging is het goed voorbereiden en het presenteren van presen-

verloopt niet altijd soepel, doormiddel van een document waar de kwaliteit eisen van de

taties, dit is niet per se iets waar ik niet zo goed in ben maar wel iets waar je altijd in kan

deelproducten op staat vermeld kan dit verholpen worden. Ook het toetsen en bespreken van

groeien. Zaken zoals wat presenteer je en voor welk publiek presenteer je zijn heel belangri-

elkaars werk is hier heel belangrijk.

jk tijden het maken van je presentatie. Zo kan je hier op inspelen en de presentatie passend maken voor de situatie. Zo krijgt je presentatie meer kracht en komt het geloofwaardiger

Anderen helpen met hun taken

over. Ik wil dit doel bereiken door goed onderzoek te doen naar presentatie technieken en

Andere helpen met hun taken, daarmee bedoel ik vooral het leren van mijn vaardigheden

goed te kijken naar hoe anderen presenteren, wat doen ze goed en wat doen ze minder goed

aan andere studenten en teamgenoten. Zo komen hun ook verder met bepaalde onderwerpen

en hier ook van leren.

waar ze mogelijk niet goed in zijn of beter in willen worden, dan heb ik het met name over onderwerpen als ontwerpen en ontwerpkeuzes maken.

Ontwerpkeuzes beargumenteren Ontwerpkeuzes beargumenteren, is iets wat heel belangrijk is tijdens elk ontwerpproces

Anderen hun kwaliteiten herkennen en hiervan leren

het maken en bedenken van ontwerpen is een van mijn sterke kanten toch vind ik van me-

Anderen hun kwaliteiten herkennen en hier van leren is ook erg belangrijk tijdens een proj-

zelf dat ik de keuzes die ik gemaakt heb tijdens het ontwerpen beter kan beargumenteren.

ect soms gebeurt dit automatisch maar soms ook niet. Dit wil ik mede verbeteren door goed

Ik moet mijn zelf beter leren plaatsen in de doelgroep of de mensen die geen goed inzicht

op te letten en aandacht te besteden aan zaken waar ik misschien normaal gesproken mind-

hebben hoe ik te werk ga, wat ik bedenk en hoe ik dit uiteindelijk ontwerp. Het formuleren

er aandacht aan zal geven. Door dit te doen groei je persoonlijk en leer je mogelijk nieuwe

en beargumenteren van al mijn gemaakte keuzes tijdens een ontwerpproces is iets waar ik

vaardigheden en/of denkwijze wat zowel voor jou als je team altijd positief is zowel nu als

zeker aan wil werken.

met toekomstige projecten.

ontwerpdocumentatie - team 5 - Omar Vasquez Jesus

62