De 99 verhalen van de Nederlandse Spoorwegen
--
GitHub repository
Digitaal prototype
English translation coming soon
Inleiding
NS wilde niet langer meer alleen bekend staan als vervoerder en wil zijn reizigers een nieuwe ervaring aanbieden. NS wil zijn merkbeleving versterken in de periode voor en tijdens de reis. Daarom heeft NS de opdracht gegeven om een unieke website te maken die gebruikers een bijzondere leeservaring aanbiedt naast hun treinreis. De 99 verhalen zijn allen dezelfde verhalen maar in een andere creatieve schrijfstijl geschreven.
Het concept
In deze opdracht was het aan mij om deze website te ontwerpen en te prototypen. Het was hier belangrijk dat de gebruikers snel en makkelijk een verhaal konden vinden voor, na en tijdens een reis op hun smartphone, tablet of desktop in het overzicht .
Het ging dus om een multi-device ervaring waardoor het belangrijk is dat gebruikers een taak kunnen starten en afmaken op verschillende devices, maar ook dezelfde ervaring hebben over de verschillende devices.
Daarnaast zijn de 99 verhalen allemaal uniek vormgegeven in een eigen stijl. Deze kunnen worden gezien als kleine schilderijtjes van het verhaal. Van de 99 verhalen moest ik één verhaal vormgeven.
Usergoals
1. De gebruiker wil een leuk verhaal kunnen vinden.
2. De gebruiker wil aanbevolen en/of verrassende resultaten aangeboden krijgen.
3. De gebruiker wil tijdens de reis verhalen kunnen lezen.
4. De gebruiker wil zijn input geven zodat andere gebruikers betere en leuke verhalen kunnen lezen.
5. Ondersteuning van verschillende gebruikers en gebruikers contexten
Business goals
1. De merkbeleving van NS versterken in de periode voor en tijdens de reis.
2. NS wil niet langer als een vervoerder bekend staan maar als een distributeur van ervaringen.
Designing for a multidevice world!
Continuous design
Wanneer de gebruiker een verhaal start op een ander device als degene waarop hij/zij het verhaal wil afmaken, kan er worden gedrukt op de verder lezen knop om gemakkelijk verder te lezen. Deze vorm van continuous design helpt gebruikers die verhalen willen starten op een ander device waarop ze het af lezen.
Consistency design
In het kader van consistency design heb ik de overzichtpagina ontworpen op zo’n manier dat de gebruiker overal dezelfde ervaring krijgt. Hierdoor wordt voldaan aan de volgende goal:
“Ondersteuning van verschillende gebruikers en gebruikers contexten”.
Zie hieronder de breakpoints voor de overzichtspagina:
Overzichtspagina
- Breakpoint 1 (Mobile viewport)
Bij de eerste breakpoint wordt alles weer gegeven in een one column lay-out. De filters worden hierin opgeroepen door middel van een filter knop. Bij de activatie van deze knop verschijnt er een filter menu waarop de gebruiker kan filteren. - Breakpoint 2 (Tablet viewport)
Bij de tweede breakpoint veranderd het overzicht in een two column layout. Omdat het filteren een belangrijke functie is in de app heb ik deze meteen naar voren gebracht en neemt deze de volledige eerste column in beslag. - Breakpoint 3 (Desktop viewport)
In de derde breakpoint wordt er een derde column toegevoegd in de layout. Hierdoor worden er twee verhalen per regel getoond naast de filterbalk in de eerste column.
Verhaal pagina
In het verhaal zijn de breakpoints in verhouding met die van de overzichtpagina; op de optimale leesregel lengte met breedte tussen 20 en 40em.
Organisatie van de verhalen
Op de overzichtpagina heeft de gebruiker toegang tot alle 99 verhalen op elke device. In de banner worden er aanbevolen verhalen getoond aan de gebruiker zodat hij/zij verrassende verhalen kan ontdekken. Daarnaast kan er ook worden gefilterd in het overzicht met alle verhalen zodat de gebruiker relevante verhalen kan inzien.
De gebruiker kan verder filteren op verhalen op basis van de leesduur, aanbevelingen en op de schrijfstijl van het verhaal. Het filteren van verhalen voldoet aan de volgende usergoal:
“De gebruiker wil een leuk verhaal kunnen vinden”.
Schrijfstijl
Bij het kiezen van een organisatieschema van de verhalen ben ik door de 99 verhalen heen gegaan en heb ik deze gecategoriseerd in een tabel. Dit is de fundering van hoe ik deze manier van filteren heb toegepast. Op deze manier kan de gebruiker filteren op de kern van elk verhaal; de schrijfstijl.
Leesduur
De gebruiker kan filteren op de leesduur omdat je tijdens het reizen te maken heb met meerdere context factoren die invloed hebben op de leeservaring. Hiervoor heb ik verschillende job stories bedacht. Tijd context is een belangrijke factor hier in geweest. Er is bijvoorbeeld een groot verschil tussen het zoeken van verhalen tussen de volgende twee job stories:
“Wanneer ik een korte overstap heb, wil ik een leuk verhaal zoeken zodat ik me kan vermaken in de tijd dat ik moet wachten”.
“Wanneer ik een lange overstap heb bij een vertraging, wil ik een leuk verhaal zoeken zodat ik me kan vermaken in de tijd dat ik moet wachten”.
Aanbevelingen
Aanbevolen verhalen zijn gebaseerd op de eerder gekozen verhalen van de gebruiker. Op basis van de volgende user goal heb ik gekozen om de gebruiker te laten filteren op relevante aanbevolen verhalen.
“De gebruiker wil aanbevolen en/of verrassende resultaten aangeboden krijgen”.
Op deze manier kan de specifieke gebruiker filteren op verhalen die aansluiten op zijn/haar interesses.
Werking van het filteren
Filteren werkt op een mobile viewport iets anders dan op die van een tablet en desktop. Dat komt omdat in de eerste breakpoint het filter menu niet direct zichtbaar is. Deze kan worden benaderd via de filterknop. Hierbij schuift er een filter menu uit waarop de gebruiker kan filteren. Na breakpoint 2 wordt de vergrote margin opgevuld met een extra filter column. Op een desktop en tablet kan er daardoor met directe toegang worden gefilterd op alle verhalen.
Filteren op een mobile viewport
Filteren werkt op een mobile viewport iets anders dan op die van een tablet en desktop. Dat komt omdat in de eerste breakpoint het filter menu niet direct zichtbaar is. Deze kan worden benaderd via de filterknop. Hierbij schuift er een filter menu uit waarop de gebruiker kan filteren. Met deze schermen wordt aan de volgende user goal voldaan:
“De gebruiker wil tijdens de reis verhalen kunnen lezen”.
Filteren op een desktop viewport
Na breakpoint 2 wordt de vergrote margin opgevuld met een extra filter column. Op een desktop en tablet kan er daardoor met directe toegang worden gefilterd op alle verhalen.
Micro interacties
Micro interactie 1: Filteren
Animatie:
In de happy flow hierboven komt de gebruiker meerdere states tegen. Het filter menu is standaard leeg. In de empty state staat er daarom in de button “alle verhalen tonen”. Wanneer er een filter wordt geselecteerd komt de gebruiker de eerste loading state tegen. Hierin berekent de button hoeveel verhalen er worden getoond. Vervolgens wordt bij het bevestigen van de filters een tweede loading state getoond; de skeleton-layout. Wanneer de data is geladen is de ideal state te zien. In deze state kan de gebruiker vanaf de overzichtpagina zien dat er filters zijn toegepast en welke filters er zijn toegepast.
Error states
De error states kunnen plaatsvinden als de gebruiker verbinding verliest met de webserver van NS tijdens het laden van de filters als de gebruiker het filter menu een filter wilt selecteren zonder verbinding.
Wanneer de download manual wordt geactiveerd zijn er twee verschillende loading states die worden getoond. Een voor het voorbereiden van een verbinding om te kunnen downloaden. Hierbij loopt er een stippellijn in de vorm van het wolk. Dit representeert het idee van het initialiseren van een verbinding naar de NS opslag (database). Daarna wordt de wolk langzaam opgevuld tot de download compleet is.
Vervolgens wordt er een checkmark geplaatst. Dat is een icoon die laat weten dat de download goed is verlopen. Daarnaast wordt er een notificatie in de navigatie getoond op de download link. Deze verdwijnt nadat de gebruiker de pagina heeft geopend. Hierdoor hoeft de gebruiker niet te wachten tijdens het downloaden aangezien de interactie ook te zien is in de fixed navigatie header overal op de pagina.
Micro interactie 2: Verhaal downloaden
Animatie:
Naast de context factor tijd is de device context cruciaal voor een optimale ervaring. Wanneer de device geen of geen stabiele verbinding met de NS webserver kan creëren, houdt het lezen van verhalen op tenzij de gebruiker een verhaal download.
Error states
Deze error state vindt plaats als de gebruiker verbinding verliest met de webserver van NS tijdens het downloaden van een verhaal.
Input plaatsen
Onder elk verhaal kan een gebruiker input plaatsen door het verhaal een aantal sterren te geven en/of een reactie te plaatsen. Op deze manier kan de gebruiker andere gebruikers helpen met het vinden van een verhaal. Deze functionaliteit voldoet aan de volgende usergoal:
“De gebruiker wil zijn input geven zodat anderen betere en leuke verhalen kunnen lezen”.
Form states en accessibility
In de opdracht is het ook de bedoeling dat de website accessible is voor iedereen. Tijdens het ontwikkelen heb ik bij de website altijd de correcte layout tags gebruikt zodat iedereen de site kan benaderen en gebruiken.
:invalid en :valid
Wanneer er een input wordt geselecteerd wordt er gecheckt of de input valid of invalid is waarop de gebruiker vervolgens feedback krijgt. Ik heb er zelf een focus element aan toe gevoegd omdat by default de inputs allemaal fout zijn. Nu krijgt de gebruiker dus alleen feedback van de states wanneer ze geselecteerd zijn. Wanneer een bepaalde input focus heeft, wordt de input ook vergroot en krijgt het een licht geel tintje.
Toepassing van de vormgeving
Huisstijl onderzoek
Voor het ontwerpen van de web app heb ik een oriëntatie gedaan op de huisstijl die NS hanteert op hun officiële website. Dit omdat ik de web app volledig wilde laten aansluiten aan de huidige stijl van NS.
Van wireframes naar hifi
Na het huisstijl onderzoek, bepalen van de breakpoints en het maken van de wireframes heb ik de huisstijl van NS toegepast op mijn ontwerpen.
Verhaal vormgeving
Visual research
Voordat ik begon met het ontwerp van de pagina begon ik met een mindmap van het verhaal. Hierop schreef ik alle sfeerwoorden die bij me opkwamen bij het lezen van het verhaal. Met het uiteindelijke gekozen sfeerwoord “zweverig” begon ik met een visual research. Hierbij maakte ik 20 cliché foto’s waarin het woord zweverig letterlijk wordt vertaald, 20 kleur en beeld foto’s en 20 typografische beeld foto’s.
Visueel concept
Eerst heb ik het logo gemaakt. Hierbij heb ik ronde letters gezocht die overeenkwamen met mijn typografisch beeldonderzoek (visual research). Deze heb ik dubbel achter elkaar geplaatst met een blur effect. Dit heb ik gedaan omdat dit veel voorkwam in mijn onderzoek en dit te associëren met mijn sfeerwoord: zweverig.
Tijdens het ontwikkelen van een woordspin van mijn sfeerwoord heb ik ook altijd een sterke associatie met “zweven” en “ruimtes” gehad. Dit heb ik eerst toegepast met een lichte gradiënt in de achtergrond. Dit gaf bij mij een gevoel van een open ruimte. Vervolgens heb ik hier sterren in geplaatst om een gevoel van gewichtloosheid te creëren. De bijhorende planeten en vallende sterren zijn een toevoeging op dit gevoel. Deze heb ik een blur gegeven om een wazige visie te geven aan de gebruiker.
Interactie met het verhaal
In mijn verhaal vinden zeven interacties plaats. Ik heb er expres veel in gedaan omdat je als lezer in het verhaal niet zo goed weet wat er aan de hand is. Dit gevoel wilde ik versterken door veel beweging op het scherm te plaatsen.
Take aways
Dit project heeft mij geleerd om te gaan met producten en diensten die worden benaderd vanuit meerdere devices. In deze tijd denk ik dat het goed is om te beseffen dat een gebruiker op meerdere manieren een interactie heeft met een product. Als een product hier op een goede manier op weet in te spelen maakt het een product veel sterker.
Daarom vond ik het ook een leuke uitdaging om na te denken over hoe een site in al deze verschillende contexten van een reis moet kunnen functioneren. Met deze leerpunten denk ik dat ik in de toekomst een sterker product kan maken dat veel content bevat en dat voor een groter publiek is bedoeld dan alleen een specifieke doelgroep.
