Project omschrijving

Responsive Verhalen Website

Transavia wil een bijzondere verhalenwebsite aanbieden aan zijn klanten. Voor, tijdens en na de reis kunnen klanten verhalen lezen en bekijken op een device naar keuze. Dit doen ze tijdens het wachten, even tussendoor in de rij en tijdens een lange vlucht, vaart of rit. Via een overzichtspagina moeten reizigers 99 verhalen kunnen opzoeken en lezen. De verhalen worden uniek vormgegeven. Het worden kleine schilderijtjes waar je je tijdens de reis mee kan vermaken en in weg kan dromen. De verhalen worden uniek vormgegeven in een stijl die aansluit bij de tone-of-voice van het verhaal. Uiteindelijk wordt het een seamless multi-device experience waardoor de gebruiker de verhalen op elk moment van de reis kan lezen.

Bekijk hier mijn website: Transavia 99 Verhalen Website
Volledig ontwerpproces: Behance

User Goals

• De gebruiker wil verhalen tijdens de reis kunnen lezen.
• De gebruiker wil een leuk verhaal vinden.
• De gebruiker wil aanbevolen en/of verrassende resultaten aangeboden krijgen.
• De gebruiker wil input geven zodat anderen beter leuke verhalen kunnen vinden.
• Ondersteun verschillende gebruikers en verschillende gebruikerscontexten.

Business Goals

De merkbeleving van de opdrachtgever versterken in de periode vóór de reis, en deze ook tijdens de reis. De reisorganisatie wil niet langer als een vervoerder bekend staan, maar als een distributeur van ervaringen.

Customer Journey Mapping

We hebben alle 99 verhalen opgehangen en gekeken wat voor overeenkomsten ze met elkaar hadden. Er zijn aantal dingen die mij opvielen waaronder de sfeer waarin de verhalen geschreven zijn. De emotie die overgebracht wordt en hoe het ontwerp eruit kwam te zijn van het verhaal (kleur- gebruik of zwart-wit). Later viel het mij ook op dat de het ene verhaal langer was dan de ander.

Wireflow

Op de overzichtspagina staan verschillende elementen waarbij de gebruiker zich kan laten verrassen of op zoek kan gaan naar specifieke verhalen die gebaseerd op zijn interesses.

Populaire verhalen: De gebruiker ziet een lijst met Top 10 aan populaire verhalen. Deze kan hij swipen naar links (1) om meer verhalen te ontdekken. Door te klikken op ‘zie meer verhalen’ (2) krijgt hij alle 99 verhalen te zien op een nieuwe pagina. Dit is gesorteerd op basis van populairiteit. Deze kun je later nog aanpassen door middel van de filter en sorteer functie.

Bundel samenstellen: Je kunt een eigen bundel samenstellen door verschillende categorieën aan te vinken. Vervolgens klik je op ‘Stel bundel samen’ (3). Onder het formulier krijg je resultaten te zien van je eigen gepersonaliseerde bundel.

Voorgestelde bundels: Als de gebruiker zich nog meer wilt laten verrassen kan hij op voorgestelde bundels klikken. Hij krijgt willekeurig diverse verhalen te lezen.

Van lofi schetsen naar hifi design

Na het schetsen van lofi wireframes heb ik deze ontwerpen digitaal uitgewerkt in Sketch om te spelen met kleur, plaatsing van verschillende elementen en de breakpoints.

Werkproces

1. Schetsen, wireframes maken
2. Deze digitaal uitwerken (visueel beeld)
3. Op basis hiervan de code uittekenen
4. Code uitwerken

Visual Inventory

Inspiratie
“Levendig”

Ik heb eerst een woordweb gemaakt en alles wat ik met het sfeerwoord ‘levendig’ associeerde schreef ik op. In plaats van afbeeldingen te zoeken op het internet, heb ik zelf een stuk of 30 foto’s genomen dat te maken had met het sfeerwoord. Boven zie je een selectie van 6 gekozen afbeeldingen waar ik verder op ging borduren.

Vorm, kleur en typografie

Hieronder zie je beelden die ik wel op internet heb gevonden. Ik werd voornamelijk geinspireerd door de Vifit flesjes en de piñata uit de Hema. Allereerst ging ik divergeren en pas later convergeren met de afbeeldingen. Het concept begon steeds duidelijker te worden en gaf mij ook een richting om naar toe te werken.

Experimenteren Visual Research

Ik begon allereerst te ontwerpen vanuit de titel van het verhaal ‘Onomatopee’. Op basis van de gevonden afbeeldingen en associaties met mijn sfeerwoord heb ik diverse opzetjes gemaakt om te gebruiken voor mijn verhaal. Ik heb gespeeld met typografie en compositie. Ik probeerde aan een kleurenpalet te houden en werd geïnspireerd door het Vifit flesje en de blauwe piñata vanwege de felle kleuren. De kleurcontrast zorgde voor een goede balans en het gaf mij ook het gevoel van levendigheid als ik het flesje en de piñata zie.

Eindrealisatie

Microinteraction Download

Microinteraction Bundel Samenstellen

Bekijk hier mijn website: Transavia 99 Verhalen Website
Volledig ontwerpproces: Behance