Issuu on Google+

DESIGN DOCUMENT CRIA VSD

Travellu DesignDocument Naam: Evan Jullian Restu Respati Studentnummer: 499639 Klas: VSD B Datum: 11-04-2013


INLEIDING

2

Tibus dit faceribusae estrundunt, asperum volorem di omnitat iatur?

Oluptaquo et lab ipis ima sunt quatem rerrovitasi omnihil lanimag

Giat unt, venis ipsuscitat odiorio. Et qui blatenim aborepu danitio

nihillecto volupta voluptur aut a consedis il in re, volut voluptiis dest

odite odicatibus dolupta sperum voluptius, ipsam fugitiume natia

utem aditat et quiaeribus andit volut plitas delibus, omnimil ibeaqui

ipienis magnis as magnihi lluptatem autas doluptat laci assumqui

nimagnisquis sinulla ciendam ent voloriae. Anditin umquae vellate

unt, quo ma voluptam rat delis iuntium faces aut ad ellabor magnate

dolo tecaese quatio. Itate core natis molore prae dioribus, cum reriati

pero to es di dusam nossum qui aut officiet facest lis ped magnatet

onseri doluptatur as etur?

desequia voloriatur sae ipitius as quam aut et la as que voluptiassi

Te aut hit facest destius venihicilit, omnim quatemq uiasinc idebi-

deliberum rempor molore voloria nos dolestis dolesti busdaeped qui

tatum quam quidunt.

omnia voluptae mo conectur rem fugitaquo berorunt aspidisque ne

Obition nonsequi con eum eat.

sintur?

Picabo. Nequi quam harum cor sequam erecturest quodica tamus,

Simus re plab imil et, et repraere, sunt ma si aliquam et am volupta

sim quod quunte dentem eum nis cuptatet prae sincipsunt, aut

non expliquam, sit, vende explature eaquo eos sit, ut aliae verup-

eosaecab int ipsuntibus, sitiati offic totas esti od eraturi aestis aut ma

tatent ea nusantis core auda cum que ist, consect iaessumenis pe

dolupta turesedi ut expero conse invelest expediscit inctendae pos

con pratio inullac illiqui officimus volupta tecus.

eatur autem dolendam, to coreperio. Fugia dolore eum faccusdae

Ihicili gendae ex et occus.

3


CONCEPT

OPDRACHT Travellu wil zich gaan onderscheiden aan de concurrentie door

De RIA zelf moet voldoen aan de vier ijkpunten, namelijk Seamless,

meer te zijn dan een organisatie waar mensen een reis gaan boeken.

Focussed, Connected, Aware en Personal. Wat de vormgeving

Ze willen graag de klanten tijdens hun reis inspireren, informeren,

betreft, moet de RIA de huisstijl van Travellu bevatten. Het moet

faciliteren en committeren. Hiermee willen ze dat de klanten een

een unieke locale, duurzame uitstraling krijgen, voor zowel vast als

volledige “experience” krijgen van het land en hun vakantie. Om

mobiel internet.

de doelgroep optimaal te bedienen wil Travellu een online reizigers community aanbieden onder het motto voor reizigers door reizigers.

De volgende eisen heeft Travellu: - Reizigers dienen tijdens hun reis ondersteund te worden door

De opdracht van Travellu is een RIA maken dat niet alleen de

lokale informatie te geven. (hotels/tickets/vervoer/tours etc.)

doelgroep zal inspireren, informeren, faciliteren en committeren. De

- Reizigers kunnen zelf blogs/vlogs en fotoalbums bijhouden.

RIA moet ook een rijke interface hebben, waarbij rekening wordt

- Reizigers kunnen met elkaar in contact kunnen komen.

gehouden met zowel vast als mobiel internet. De RIA moet ook

- Reizigers inspiratie/suggesties vinden voor evt. vervolgroutes.

een online community hebben. De reizigers moeten dus optimale ondersteuning krijgen van de RIA voor, tijdens en na hun reis.

4

5

DOELSTELLING Mijn doelstelling voor de RIA is als volgt:

Als concept wou ik als hoogtepunt geanimeerde objecten gebruiken

het vliegtuig deur plaats, dan gaat bijvoorbeeld de deur open met

zoals vaak wordt gedaan in Flash werelden. Als je kijkt naar het

als titel: Welkom, begin hier met het boeken van uw vlucht. Zulke

- Een homepage voor de Travellu Community.

schetsje, dan zie je een paar elementen, zoals de koffer en het

interactieve functionaliteiten hebben de andere knoppen ongeveer

- Een rijke en slimme zoek en boek engine waarmee gezocht kan

vliegtuig. De bedoeling is dat objecten zoals de koffer of het

ook. Aan de rechterkant heb ik de Timeline neergezet die linkt met

[Maak een RIA voor Travellu, die een rijke interface heeft voor

worden naar vliegtickets, hotels, bus/treintickets.

vliegtuig een functie krijgen van een knop. Als je met je muis op

Twitter. Je krijgt foto’s en berichten te zien.

zowel vast als mobiel internet met als motto voor reizigers door

- Een rijke reisplanner waarmee reizigers hun reis kunnen plannen en

reizigers binnen 6 weken.]

eigen content aan events kunnen toevoegen (foto’s / video’s / blogs etc.)

Naarst de hoofddoelstelling zijn er ook subdoelstellingen. Deze

- Een mobiele variant of reis assistent. Deze dient op z’n minst

doelstellingen zijn noodzakelijk voor het maken van de Website. Dit

uitgebreid als concept uitgewerkt te worden.

zijn specifieke eisen die de website moet bevatten.


6

7

HOMEPAGE

kalender en eentje met een stetoscoop. Deze knoppen zijn blader-

Die staat nu nog niks te doen en kan klaar staan voor de reis. De kleur

knoppen voor de pagina’s. Als je bijvoorbeeld op de kalender pijl/

die ik heb gebruikt, zijn de kleuren van Travellu logo. Zoveel mogelijk

knop klikt dan ga je rechtstreeks naar de planner. Je kan ook simpel-

blauwe kleuren dus. Bij de menu, kan de gebruiker ook zien op welke pagina hij of zij zich bevind door de gekleurde streep.

Bij de homepage krijg je alle kwaliteiten te zien van Travellu. Je wordt

page is dus meer een introductie pagina over Travellu. Het vertelt de

weg navigeren door het menu te gebruiken. De achtergrond is een

eerst verwelkomt door een stuk tekst. Naarmate je naar beneden gaat

merkwaarden en waar Travellu voor staat. Je ziet twee knoppen/pijlen

vliegtuig hangar. De vliegtuig moet de reiziger/gebruiker voorstellen.

scrollen zal er meer informatie te vinden zijn over Travellu. De home-

aan de zijkant van de scherm. Eentje met een symbool van een


RIA ZOEK & BOEK STATE #1 Dit is het begin van de Search & Book pagina. Hier wordt er gevraagd of de reiziger een vlucht wil boeken, wil inchecken of een eerdere geboekte vlucht wil wijzen of controleren. Hier komen een paar elemanten terug net als bij de homepage. - Namelijk de menustreep functie. - De pijlen/knoppen naar de volgende pagina’s zijn hier ook te vinden. Deze zullen net als bij de homepage, steeds meer omhoog de pagina gaan staan naarmate je naar beneden gaat scrollen. Zo weet de gebruiker namelijk hoever die naar beneden kan scrollen. Als je hier de funtie “Start your Journey” klikt, dan gaat automatisch de pagina naar beneden scrollen.

8

STATE #2 Als de pagina naar beneden is gescrold dan zie je gelijk een landkaart van je eigen land en je buurlanden. In dit geval dus Nederland en Duitsland als buurland. Je krijgt meteen te zien welke vliegvelden dicht bij jou in de buurt zitten. Dit wordt aangegeven met een grote pijl. De plaats wordt in de titel aangegeven en in het grijze vak wordt weergegeven hoeveel kilometer het van de gebruiker vandaan is en in welk land het is. De bekende steden krijg je ook te zien op de kaart, om zo te weten waar het ongeveer in de buurt ligt. De gebruiker moet hier op een pijl klikken om hun vertrekplaats te kiezen. Ze kunnen niet zelf in het tekstvak iets invullen. Ze moeten hier echt een plaats kiezen/klikken. Een kort tekst wordt uitgelegd wat ze moeten doen. Je krijgt ook acht symbolen te zien. Dit zijn de navigatie balken van de Search & Book. Zo kan de gebruiker weten hoeveel stappen die nog moet doen en in welke stap hij of zij op dat moment is.

9


RIA ZOEK & BOEK STATE #3 Als een gebruiker een plaats heeft gelecteerd, dan komt het automatisch in het tekstvakje te staan. De andere plaatsen/vliegvelden buttons worden dan minder verlicht zodat de gebruiker kan zien welke vliegvelden hij of zij heeft geselecteerd. De gebruiker kan nu weer naar beneden scrollen om verder te gaan met het boeken van een vliegreis.

10

STATE #4 De tweede item is het selecteren van de gebruiker aankomst plaats. Je krijgt hier te een wereld kaart te zien op de achtergrond. De gebruiker moet hier wel eerst een plaats of land in typen zodat het systeem kan bepalen welke vliegvelden in de buurt zitten. De pijlen/ knoppen naar de andere pagina’s zijn nu ook wat omhoog geschoven omdat de gebruiker steeds meer naar onderen gaat in de pagina.

11


RIA ZOEK & BOEK STATE #5 Als de gebruiker een plaats of land gelecteerd heeft, dan gaat het systeem suggesties maken over de vliegvelden die in de buurt zitten. De landkaart word ingezoomd op het land waar de plaats in bevindt. Zo kan de gebruiker namelijk zien waar de vliegvelden precies zitten in het land. De plaats wordt ook aangegeven op het landkaart. Zodat je weet hoe ver het zit van de geselcteerde vliegvelden. In deze stap moet de gebruiker een vliegveld selecteren net als bij STATE #3.

12

STATE #6 Als een gebruiker een plaats heeft gelecteerd, dan komt het automatisch in het tekstvakje te staan. De andere plaatsen/vliegvelden buttons worden dan minder verlicht zodat de gebruiker kan zien welke vliegvelden hij of zij heeft geselecteerd. De gebruiker kan nu weer naar beneden scrollen om verder te gaan met het boeken van een vliegreis.

13


RIA ZOEK & BOEK STATE #7 De derde stap is het kiezen van het vertrek datum. Op de achtergrond is er een klok te zien. Het is een extra illustratie over de pagina. De klok laat ook precies zien hoelaat het is op dat moment op het vliegveld dat je geselecteerd heb. De datumgetallen kun door het drukken van de pijlen gaan veranderen. Wil je bijvoorbeeld 4 Juni kiezen in plaats van 5 Juni, dan klik je simpelweg op het bovenste pijltje en het veranderd de datum.

14

STATE #8 De vierde stap is het kiezen van het terugkomst datum. Op de achtergrond is er een klok te zien. Het is een extra illustratie over de pagina. De klok laat ook precies zien hoelaat het is op dat moment op het vliegveld dat je geselecteerd heb. De datumgetallen kun door het drukken van de pijlen gaan veranderen. Wil je bijvoorbeeld 19 Augustus kiezen in plaats van 20 Augustus, dan klik je simpelweg op het bovenste pijltje en het veranderd de datum.

15


RIA ZOEK & BOEK STATE #9 De vijfde stap is het kiezen van de aantal passagiers. Op de achtergrond als illustratie een wereld met mensen erop. Dit heeft geen verdere funtie. Het is gewoon een plaatje. De gebruiker kan pas de aantallen in een groep vergroten door op het illustratie met een plus teken te klikken. Wil je het minder maken dan klik de gebruiker op het tekstvakje. De gebruiker kan niet zelf een aantal invullen in het tekstvakje. Het zijn alleen maar knoppen.

16

STATE #10 Op de achtergrond als illustratie een wereld met mensen erop. Dit heeft geen verdere funtie. Het is gewoon een plaatje. De gebruiker kan pas de aantallen in een groep vergroten door op het illustratie met een plus teken te klikken. Wil je het minder maken dan klik de gebruiker op het tekstvakje. De gebruiker kan niet zelf een aantal invullen in het tekstvakje. Het zijn alleen maar knoppen. Als de gebruiker het aantal passagiers in heeft gevuld dan kan hij of zij weer naar beneden scrollen om verder te gaan met de volgende stap.

17


RIA ZOEK & BOEK STATE #11 De laatste onderdeel is het kiezen van de vliegreis type. De gebruiker heeft drie optie’s. Namelijk Economy Class, Bussiness Class en Diamond Class. De drie rondjes met symbolen en tekst zijn de knoppen die de gebruiker kan selecteren.

18

STATE #12 De gebruiker heeft drie optie’s. Namelijk Economy Class, Bussiness Class en Diamond Class. De drie rondjes met symbolen en tekst zijn de knoppen die de gebruiker kan selecteren. Als de gebruiker een vliegreis type heeft gelecteerd dan worden de andere wat waziger. Zo kan de gebruiker zien welke hij heeft geselecteerd. De gebruiker heeft 5 seconde bedenkt tijd en dan wordt hij meteen doorverwezen weer naar bovenaan de pagina.

19


RIA ZOEK & BOEK STATE #13 Boven aan in de pagina krijgt de gebruiker een vlucht te zien die Travellu voor hen heeft gelecteerd. Dit is dat de goedkoopste vlucht die er op dat moment is. Natuurlijk kan de gebruiker ook naar andere vliegmomenten kijken. Dan klikken ze op de knop “More Flights” en er wordt automatisch een nieuw vlucht aangevuld op het scherm. Als de gebruiker een vlucht wil gaan boeken, dan drukken ze op de knop “book your flight” en hebben ze hun vlucht geboekt.

20

21


RIA TIMELINE STATE #1 Als eerst kom je op de bovenste gedeelte van de pagina terecht. Hier krijg je te zien in welk plaats je bent en de huidige tijd. Dit wordt allemaal zelf aangevuld door Travellu GPS functie. De achtergrond veranderd ook per plaats. Ben je in Seoul, dan krijg je een foto te zien van een beroemde plek in Seoul. Dit geld dan ook voor de andere steden. De gebruiker kan naar beneden scrollen om te zien wat hun mede reizigers aan het doen zijn. Hier zijn de pijlen/knoppen aanwezig en de menu functie net als bij de Homepage en Search & Book pagina.

22

STATE #2 Wanneer de gebruiker naar beneden begin te scrollen, krijgen ze als eerst een tijd te zien links in het nieuwe gedeelte. De eerste tijd dat er op de pagina staat is de huidige tijd van de gebruiker. Je ziet ernaarst gelijk foto’s van medereizigers die op dat moment een foto hebben geüpload op Twitter met als tag #bogor. Deze foto’s zijn dus actueel en net gemaakt.

23


RIA TIMELINE STATE #3 Als de gebruiker meer naar beneden gaat scrollen, dan krijgen ze meer foto te zien van bijvoorbeeld een minuut geleden. Hoe meer de gebruiker dus naar beneden scrolt, hoe verder hij of zij terug gaat in de tijd.

24

STATE #4 Als er op een foto geklikt wordt, dan wordt deze uitvergroot en krijg je ook gelijk de tweetbericht te zien met ernaarst de tijdstip van de fotoopname. Je krijgt gelijk links en rechts ook andere suggestie’s foto’s te zien. Als je hier op klikt verschijnt deze in het midden en zo kun je navigeren tussen de foto’s op dat tijdstip. Mocht de gebruiker terug willen gaan, dan klikken ze simpel weg de Timeline button aan in de navigatiebalk bovenin.

25


26

27


MOBILE De mobiele site van Travellu is een aangepaste versie van de echte

de rest zijn alle functionaliteiten aanwezig net als bij de echte site. Ik

site. Alles is zoals je ziet wat kleiner geworden. Alle items worden op

wil het niet te verschillend maken voor de gebruiker, zodat ze namelijk

een pagina gepropt. Je krijgt ook niet de volledige achtergrond te

kunnen wennen aan één systeem in plaats van twee systemen. Hier-

zien, maar wel volledig de items die op de pagina te vinden zijn. Je

door raken ze niet zo gauw in de war wanneer ze de applicatie gaan

kan nog steeds naar beneden scrollen. Het duurt dan op de mobiele

gebruiken.

site wat langer voordat je op de onderkant van de pagina bent. Voor

REFLECTIE

28

Ik heb veel geleerd tijdens de course. Ik heb geleerd dat vooronder-

geleerd dat ik niet altijd een ontwerp vol moet maken met objecten.

zoek echt belangrijk is en ook heel handig voor het maken van een

Het is ook handig om wat rust en witte ruimtes te creëeren in mijn

uiteindelijk ontwerp. Ik kom hierdoor achter wat voor mogelijkheden

ontwerpen. Hiervoor had ik namelijk het idee dat alles zo vol mogelijk

er zijn en blijf dan ook niet bij het oude en vertrouwde styl hangen. Ik

moet zijn, anders is het niet af en compleet. De lessen over de Grid

ben hierdoor uitdagender gaan werken en ik ben hierdoor ook meer

heeft mij het tegendeel bewezen. Dit zal ik zeker meenemen naar het

gaan proberen. Dit zal ik zeker meenemen naar het Projectfase. Wat

project. Zo zijn er ook andere lessen die hetzelfde verandering in mij

betreft het onderzoek naar doelgroepen en merkwaarden etc. was

hebben gebracht. Het was ook fijn om de tijd te kunnen gebruiken

een heel ander wereld voor mij geopend. Hierdoor wist ik namelijk

voor je ontwerp. Veel van de lessen waren feedback lessen en op deze

wat meer over de doelstellingen van de site dan eerst. Ik kon mijn

momenten was het fijn dat ik thuis in alle rust aan de opdracht kom

ideeën ook beperken door mijn onderzoek. Ik heb namelijk altijd de

werken. Ik werk namelijk altijd beter thuis in mijn werk omgeving dan

neiging om te groot te denken en extra dingen in mijn ontwerp toe

op school. Ik heb namelijk thuis alles wat ik nodig heb en op school

te voegen dat helemaal niet nodig is. Door het Research & Analyse

niet. Dit was wel een fijn optie om te hebben. Dit zal ik zeker ook

gedeelte ben ik hierover anders gaan denken. Het heeft mij meer

gaan doen tijdens het project als er de kans is om het zo te doen.

rust gegeven en meer inzicht over het ontwerp. Ik kan namelijk precies weten wat voor ontwerpen er moeten komen en wat belangrijk is

In het algemeen heb ik veel geleerd over het ontwerpen. Dingen waar

moet dan ook als eerst gebeuren.

ik normaal nooit bij stil heb gestaan heb ik nu uitgevoerd en hierdoor is mijn wereld over ontwerpen ook wat breder geworden. Niet alleen

De lessen over bepaalde onderwerpen vond ik wel handig om te krij-

voor het oude en vertrouwde gaan, maar ook durven om risico’s te

gen. Zoals bijvoorbeeld een les over de Grid. Ik heb hierdoor namelijk

nemen.


Travellu Design Document (Website)