TRAVELLU Design Document CRIA VSD
Hogeschool Arnhem & Nijmegen Informatica & Communicatie Academie Semester | CRIA 2014 Tom Pijnappel CRIA (Create a Rich Internet Application) VSD Elise van Tuijl
VOORWOORD Travellu In dit document worden de uiteindelijke ontwerpen van de Travellu website besproken en behandeld. Alle schermen worden hier in voor tot het laatste ontwerp waarin ze zijn gemaakt. Voor Travellu is er gekozen voor de volgende navigatie koppen: Home, Our App, Discover, Plan the Trip, Community en tot slotte contact. De website van Travellu is een lange pagina waar je alleen maar naar beneden hoeft te scrollen. De navigatie zal meescrollen. De ontworpen pagina’s zijn allemaal naarr aanleiding van een Design Study gemaakt, waar onderzocht wat goede en slechte keuzes zijn en zo dus je definitieve ontwerp kan maken.
Concept Travellu is een reis webiste die zich richt op reizigers die echt geinteresseert zijn in een wat kostbaardere reis. Een reis die ze hun leven niet zullen vergeten. Daar hangt dan ook een prijskaartje aan uiteraard. Het concept van Travellu is professioneel en toch ook weer gericht op een relatief jonge doelgroep.
DESIGN DOCUMENT TRAVELLU
2
INHOUDSOPGAVE Voorpagina
1
Voorwoord
2
Design
4
Home
4
Navigation
5
6
Our application
Discover Discover #1
7
Discover #2
8
Discover #3
9
7
Plan the Trip
10
Community
11
Contact
12
Reflectie
13
3
DESIGN DOCUMENT TRAVELLU
HOME
Home Wanneer je op Travellu terrecht komt krijg je uiteraard de hoofdpagina in beeld. Op deze pagina is het belangrijk dat je direct op het eerste gezicht geinteresseert bent. Daarbij kan ontwerp een hele belangrijke rol spelen. De bedoeling is dan ook dat het ontwerp mensen aantrekt om verder te kijken. Zoals je ziet is de vormgeving clean en heel erg zacht. Door de wat abstractere font te gebruiken bij titels krijgen we het “Adventure� gevoel terug. Op de voorpagina wordt uitgelegt wat Travellu is en wat er ze te bieden hebben. Daarnaast staat er ook een post van het community gedeelte op. Dit wil zeggen dat een reiziger die via Travellu reist Travellu en andere reizigers upto-date houdt van zijn of haar vakantie. Zo zie je bijvoorbeeld in bovenstaande afbeelding dat Marilyn Beau heerlijk aan het genieten is aan de kust in Zuid-Afrika! Daarnaast krijgen de bezoekers de optie om een een account te registreren en in te loggen. Hiermee kunnen ze zich in het community gedeelte van Travellu verdiepen.
DESIGN DOCUMENT TRAVELLU
4
NAVIGATION
Navigation Het is belangrijk dat de navigatie duidelijk is. Travellu heeft een zogenoemt “Vertical Expanded Navigation”. Dit wil zeggen dat de items verticaal staan en ook nog eens uitklapbaar zijn. Dit zie je in de rechter bovenstaande afbeelding. Dit geldt natuurlijk alleen voor de items waar een pijltje bij staat. Wanneer je op dat pijltje klikt draait deze 90 graden naar beneden. Zodat de gebruiker snapt dat hij dat op dezelfde manier weer in kan klappen. Aangezien de Travellu website één gehele pagina is en je alleen maar naar beneden hoeft te scrollen, blijft het navigatie deel netjes op zijn plek staan. Ook de achtergrond blijft staan zoals dat is. Dat is belangrijk aangezien je pas vanaf waar de bergen zijn echt goed kunt lezen. Wat boven de bergen zit zit aan de top van je scherm dus daar hoef je niet naar te kijken.
5
DESIGN DOCUMENT TRAVELLU
OUR APPLICATION
Our Application Travellu biedt op de website hun applicatie aan die beschikbaar is voor Android, Windows en tot slotte IOS van Apple. Deze applicatie zal gebruikelijk zijn voor de reizigers die via Travellu ergens in de wereld beland zijn. Hierop kunnen ze bloggen en foto’s uploaden voor Travellu en toekomstige klanten. De applicatie dient gratis te zijn.
DESIGN DOCUMENT TRAVELLU
6
DISCOVER #1
Discover #1 Bij Travellu is het belangrijk dat je eerst zorgvuldig kunt ontdekken waar je graag heen wilt. Daarom begin je bij Travellu eerst met een gemakkelijke infographic waar je je continent kan kiezen. Je hebt de optie om via de knop rechts “Selected” handmatig het continent te kiezen. Ook kun je de pointer droppen waar je wilt. (Dit werkt alleen op continenten, niet op specifieke landen). In het voorbeeld boven zeggen we dat we Australië kiezen. Wanneer je hier op gedrukt hebt klapt er onder een nieuw venster open met nieuwe informatie In dit geval gaat de extra informatie over Australië. Zie de volgende bladzijde voor meer informatie.
7
DESIGN DOCUMENT TRAVELLU
DISCOVER #2
Discover #2 Bij dit uitgeklapte deel van het ontdekken van je reis zie je Australië in beeld aangezien we dat zojuist geselecteerd hebben. Nu krijg je informatie te zien over dit land. Op de infographic rechts zie je staan dat we 3 basis locaties aan te bieden hebben. Daaronder staat de gemiddelde prijs en reistijd van de beschikbare reisopties: Boot of Vliegtuig. Een stukje informatie over Australië is hier meegegeven. Hier kun je handmatig selecteren welke bestemming je wilt in Australië die wij te bieden hebben. Je kunt uiteraard ook klikken op de pointers. Nu krijgen we het zelfde effect als op het eerste deel van de discover pagina. Weer klapt een nieuw venster uit met de informatie over de geselecteerde bestemming. Zie de volgende pagina hoe dit loopt.
DESIGN DOCUMENT TRAVELLU
8
DISCOVER #3
Discover #3 Weer hebben we dus een uitgeklapt deel. Uiteraard krijg je hier specifieke informatie over de bestemming die je zojuist geselecteerd hebt. Hier wordt duidelijk gemaakt wat de meest algemene activiteiten zijn in dit gebied. In dit geval backpacken, duiken en camperen in de natuur. Rechts onder kun je naar de volgende navigatie kop gaan door te kijken wat de beschikbare data is of direct al de rijd te boeken. (Plan the Trip). Op de volgende pagina wordt uitgelegt wat dit inhoudt.
9
DESIGN DOCUMENT TRAVELLU
PLAN THE TRIP
Plan the Trip Bij plan the trip gaat het echt gebeuren. Je gaat je reis boeken. Met behulp van de inforgraphic links kun je de pointeers A en B droppen waar je wilt. Ook kun je uiteraard rechts handmatig de vertrek en bestemming locatie instellen. Vervolgens vul je de data in en kun je kijken of het beschikbaar is door op Search! te drukken.
DESIGN DOCUMENT TRAVELLU
10
COMMUNITY
Community De community bij Travellu is een belangrijk deel. Hier komen reizigers en toekomstige “klanten” bij elkaar. Via het linker deel kun je kun je korte ‘blogs’ met of zonder foto bekijken van reizigers die zich ergens bevinden. Je ziet hier bijstaan waar ze zich momenteel bevinden en je kunt als je ingelogt bent hierop reageren (linker icoon) of met die persoon chatten (rechter icoon). Bij het rechter deel staan de reviews van allerlei bestemmingen van Travellu waar mensen zijn geweest via Travellu. Dat laatste is belangrijk, want het moet natuurlijk wel gaan om de reis via Trravellu, hoe die ervaring is. Zo zie je bijvoorbeeld aan de hoeveelheid ingekleurde sterren hoe de vakantie in het totaal plaatje was.
11
DESIGN DOCUMENT TRAVELLU
CONTACT
Contact Bij contact is het belangrijk dat de bezoeker snel vragen kan stellen. Ze kunnen dit doen door te mailen of te bellen, maar gebruikelijker is dat ze het via het rechts stuk doen. Het rechtse gedeelte is overzichtelijk en makkelijk te gebruiken. Daarnaast wordt uitegelegt dat Travellu zich bescihkbaar stelt op social media als LinkedIn, Facebook en Twitter.
DESIGN DOCUMENT TRAVELLU
12
REFLECTIE Reflectie Ik heb echt veel geleerd door gebruik te maken van een Design Study. Het ontwerpproces van de website voor Travellu. Bij de Design Study ga je echt onderzoeken wat goede keuzes zijn. Ook kun je feedback krijgen door andere mensen te vragen die anders naar een ontwerp kijken als ikzelf. Voor het vorige semester (GAME) had ik altijd dat ik feedback absoluut niet kon waarderen. Dit klinkt heel overdreven maar ik zag het altijd echt iets negatiefs. Maar tijdens dat semester en nu vooral met CRIA het ontwerpen van een website merk ik dat ik toch wel ontzettend veel aan feedback heb. Niet alleen omdat ik nu meer tijd had om te beslissen als met de pressure cooker maar ook dat ik logischer over bepaalde onderwerpen denk waardoor ik beter snap hoe iets inelkaar zit en waarom het beter kan. Daarnaast vind ik het ook gaaf om eerst van alles uit te proberen en vervolgens niet zozeer kiezen, maar een misschien een gecombineerd ontwerp maken waar meerdere probeersels in terug komen. Ik heb dus erg veel geleerd tijdens deze course. Ook ben ik vaak van het uitstellen, waardoor ik dus geen feedback kan vragen bij de lerares. Ik heb dan bepaalde ontwerpen nog niet af waardoor ik dus niet terecht kan voor feedback. Maar gelukkig hadden we tijdens de course een kleine deadline (Presentatie) waar je bepaalde onderwerpen gaat presenteren en dus feedback op kunt krijgen.
13
DESIGN DOCUMENT TRAVELLU