DESIGN DOCUMENT CRIA VSD Travellu Design Document Dennis de Kruijf 506404 CRIA LA FEB Datum: 02-04 - 2015
inhoudsopgave INLEIDING inhoudsopgave 2 INLEIDING 3 home page 4 destinations 5 experiences 6 plan a trip 7 contact 8 about us 9 reflectie 10 In dit document worden alle ontwerpen van de website van Travellu onthuld. Er wordt een breed overzicht geboden op de webpagina van Travellu en er wordt uitgelegd wat de gebruiker met bepaalde onderdelen van de website kan doen. Ook worden in sommige delen ontwerpprincipes duidelijk gemaakt en is door middel van de gerealiseerde ontwerpen te zien hoe innovatief het nieuwe ontwerp van de website van Travellu is. Op de website kunnen gebruikers gemakkelijk zoeken naar een backpacking trip over de gehele wereld en uiteindelijk deze backpacking trip ook boeken. Door het gridsysteem dat de designtrrends van tegenwoordig volgt kunnen gebruiker gemakkelijk meer informatie over een reis ophalen en raken zij geïnteresseerd in een diepere complete beleving van de website van Travellu. 2 3
home page destinations 4 5 Wanneer je de webpagina van Travellu opent kom je op dit scherm terecht. Een grote afbeelding die meteen lokt om meer te wil- Het volgende wat de gebruiker tegenkomt is het onderdeel destinations. Hier kan de gebruiker inspiratie op doen naar reizen len zien van de site. Door middel van de gemakkelijke navigatie aan de rechterkant bovenin kan de gebruiker gemakkelijk navi- over de hele wereld. Er is gebruik gemaakt van een opvallend grid met grote afbeeldingen zodat de gebruiker in een klap geren naar verschillende onderdelen op de webpagina. De gebruiker kan door middel van de twee grote knoppen zoeken naar geïnteresseerd is in het ontdekken van allerlei bestemmingen. reizen naar een bepaalde locatie op een bepaalde datum. De gebruiker kan er echter ook voor kiezen om meer van de website te zien en naar beneden te scrollen, zoals het pijltje onderaan de pagina de gebruiker al suggereerd. Op elke afbeelding is aangegeven waar de backpacking trip om draait Zo kan een bos in vietnam ontdekt worden, of kan er een spannende reis naar het mooie Grand Canyon gebergte geboekt worden. Standaard zijn alle afbeeldingen wat donker van kleur, Door gebruik te maken van een rijke kleurrijke afbeelding straalt de voorpagina van Travellu luxe uit. De bergen laten al zien dat maar wanneer de gebruiker met de muis over de afbeelding beweegt krijgt deze afbeeldingen zijn originele kleur weer terug. het geen webpagina is om een vakantie aan het strand of zwembad te boeken, maar een backpack+ vakantie. Hierdoor krijgt de gebruiker direct feedback van de site. De webpagina is een grote pagina die opgedeeld is in delen waar doorheen gescrollt kan worden. Wanneer de gebruiker op een Wanneer een reis geselecteerd wordt komt een pagina tevoorschijn met meer informatie over die reis en een mogelijkheid om te bestemming klikt krijgt hij hier meer informatie over te zien en krijg de gebruiker de mogelijkheid om te boeken. boeken.
experiences plan a trip 6 7 Omdat bij Travellu de community ook erg belangrijk is hebben gebruikers de mogelijkheid om, zonder in te loggen, een review Zoals eerder is aangegeven krijgen gebruikers nadat zij een reis geselecteerd hebben een menu te zien waarin zij de reis kunnen achter te laten bij een reis. Zo kunnen reizigers die een reis geboekt hebben naar de Grand Canyon, zoals Jason gedaan heeft, boeken. Het Plan a Trip gedeelte van de website zorgt ervoor dat mensen hun reis ook daadwerkelijk kunnen boeken. laten weten wat zij ervan vonden en of zij de reis zouden aanraden aan andere potentiële backpackers. In het formulier moet worden aangegeven vanaf welke luchthaven vertrokken wordt en op welke luchthaven de reizigers Het Eperiences gedeelte van de website is met dezelfde insteek als het Destinations gedeelte ontworpen, namelijk grote aankomen. Natuurlijk is het ook essentieel om te weten op welke dag de vetrek en aankomst van de reis is en met hoeveel afbeeldingen met daarop een korte pakkende tekst. Ook bij het Experiences zijn de afbeeldingen eerst donkerder van kleur. personen de reis zal zijn. De gebruiker kan door middel van drop down menus zoeken naar de luchthaven waar zij van of naar Wanneer er over de afbeeldingen gehovert wordt zal de afbeelding zijn originele kleur terug krijgen. Gebruikers hebben bij het toe willen. Zij kunnen ook in het venster typen waarna de sitee automatisch de naam van de luchthaven aanvult. plaatsen van een review de mogelijkheid om te kiezen uit een eigen afbeelding of een stock afbeelding van Travellu. Voorbeeld: Gebruiker typt Ams en de website geeft als suggestie Amsterdam Schiphol Airport, AMS. Wanneer op een review geklikt wordt opent een pagina met de uitgebreide review en een sectie met opmerkingen of vragen van andere reizigers. Wanneer op de plan your trip knop geklikt wordt kan de reis worden afgerekend.
contact about us 8 9 Uiteraard is het belangrijk voor gebruikers om een mogelijkheid tot contact te hebben met Travellu. Via het knopje contact in de Een about us pagina kan eigenlijk nooit ontbreken op een webpagina. Er wordt niet veel naar gekeken, maar voor de nieuws- navigatiebalk, of door middel van het scrollen door de webpagina is het voor de gebruiker mogelijk om op de contactpagina te gierigen onder ons is het toch belangrijk om te hebben. Op de About us pagina van Travellu is een verhaal te zien over Travellu. komen. Hierin wordt onder andere duidelijk hoelang Travellu bestaat, wat zij bieden en hoe zij dat bieden. Aan de rechterkant van het verhaal is een afbeelding van Travellu haar kantoor te zien, zodat de gebruiker zich een beetje op zijn Hier kan de gebruiker contact opnemen met Travellu of een boodschap voor Travellu achterlaten. Via het vragenmenu moet de gemak voelt. gebruiker zijn naam en e-mail adres invullen zodat Travellu een antwoord terug kan sturen. Uiteraard is ook de vraag of boodschap belangrijk en die kan ingevoerd worden in het grote vlak rechts van de gegevens van de gebruiker. Onderaan de webpagina is een footer te zien. In de footer kan de gebruiker navigeren binnen de pagina via het Sitemap menu. Ook in de footer zijn contactgegevens van Travellu te zien, hierdoor kunnen gebruikers zelfs na het contact gedeelte van de web- Mocht de gebruiker gebeld willen worden door Travellu dan heeft de gebruiker te mogelijkheid om zijn telefoonnummer achter site alsnog contact opnemen met Travellu. Ook is een menu te zien van recent experiences, waar de laatste tweets van reizigers te laten zodat Travellu contact op kan nemen via de telefoon. te zien zijn die gebruik hebben gemaakt van het twitterhandle van @Travellu. Als laatst is het social media gedeelte te zien, waar gebruikers van de website Travellu kunnen volgen op Facebook, Twitter en LinkedIn.
reflectie Tijdens het maken van het Design Document heb ik logischer wijs niet heel veel extra s meer geleerd. Alle inspiratie en experimenten waren gedaan in het Design Study document. Het idee zat al in mijn hoofd en door te expirementeren in het Design Study is dat idee werkelijkheid geworden. Tijdens de course heb ik veel geleerd over het ontwerpen van een RIA. Ik wist voor de course al over kleurcombinaties en navigatie etc, maar dat is ook wel logisch, want in mijn ogen is dat iets wat voor zichzelf spreekt. Je gaat natuurlijk geen paars met blauw en rood combineren als je een ontwerp maakt voor een reisorganisatie, toch? Echter heb ik veel geleerd over de andere onderwerpen die komen kijken bij het ontwerpen van een RIA. Zo had ik wel een klein beetje verstand van Grid, maar had ik geen flauw idee hoe ik dat moest toepassen op een correcte manier. Alhoewel ik al wist over kleurcombinaties heb ik toch nog meer over kleuren geleerd. Bijvoorbeeld wat voor een soort palletten bestaan; monochromatisch, analoog, complementair etc. Het ondeel icons sprak dan weer redelijk voor zich, dat iconen wereldwijd begrepen worden was al duidelijk. Wat echter een compleet raadsel was en iets waar ik nog nooit had van gehoord was Gestalt. Een theorie over hoe onze ogen bepaalde dingen zien. Een gestalt waar ik eigenlijk heel veel gebruik van maakte zonder dat ik het wist of doorhad is de gestalt theorie van closure. Hier zien jouw ogen twee blokken met een kleine leegte ertussen als een blok. 10 Tijdens een individueel feedback gesprek is duidelijk geworden dat ik in sommige instanties iets meer moet inhaken op wat ik met een bepaald resultaat doe. Zo heb ik in mijn Design Study een aantal ontwerpen gemaakt, maar heb ik er niet op ingehaakt wat ik met die ontwerpen ga doen. In het vervolg zou het voor mij makkelijker zijn om iets meer feedback te vragen op mijn ontwerpen, in plaats van op mijn documenten. Ik zat namelijk een paar keer goed vast met mijn ontwerpen. Ik was inspiratieloos en wist niet hoe ik bepaalde ontwerpproblemen op moest lossen. Door in het gevolg feedback te vragen over deze problemen kan ik ze oplossen voordat het product compleet gerealiseerd is.