Verhalen van de NS
De verhalen van de NS
Een reisorganisatie wil een verhalenwebsite aanbieden aan zijn klanten. Voor-, tijdens- en na de reis kunnen klanten online verhalen lezen op een device naar keuze. Dit doen ze tijdens het wachten, even tussendoor in de rij of tijdens een lange vlucht, vaart of rit. Via een overzichtspagina moeten reizigers 99 verhalen kunnen
opzoeken en lezen. Aan jou de opdracht deze website te ontwerpen. Het moet een seamless multi-device experience worden…
“Hoe kan de gebruiker nieuwe verhalen ontdekken, zodat ze die kunnen opslaan om later te lezen, zonder dat ze problemen hebben bij het wisselen van device en locatie.”
Datum
2018
Rol
Front end en design
Categorie
Development
Oplossing
Het product dat het beste past bij de bovengenoemde design challenge is de ‘NS story matchmaker’. Het doel van de story matchmaker is om de reiziger te helpen bij het vinden van een verhaal die hij of zij graag wil lezen voor-, tijdens- of na de reis. De reiziger kan verhalen vinden door gebruik te maken van de zoek tags of door zelf een zoek criterium in te voeren. Nadat er op ‘Match!’ is geklikt kan de reiziger door de verhalen scrollen en deze toevoegen aan ‘mijn verhalen’, zodat hij of zij het verhaal makkelijk kan terugvinden.
De ‘NS story matchmaker’ is een website waarbij ik de front-end (HTML, CSS en Javascript) zelf heb geschreven. De bestanden zijn door middel van GitHub gepubliceerd op het web.
Mijn rol
Het project ‘de verhalen van NS’ heb ik individueel uitgevoerd. Dit betekent dat ik zelf de kaders van het project heb vastgesteld, rekening houdende met de user goals en business objectives. Waarna ik een stijlonderzoek heb gedaan naar de NS, heb gebrainstormd over het product. Ik heb het product verder uitgewerkt in schetsen, wireflows en HiFi schermen. Toen het concept en design was afgerond heb ik de designs vertaalt naar een echt front-end product waarbij ik de HTML, CSS en Javascript bestanden heb geschreven. De bestanden zijn door middel van GitHub gepubliceerd waardoor het als een echte website kon functioneren.
Gebruikte methodieken
Om tot het eindproduct en de oplossing te komen heb ik verschillende onderzoeksmethodieken en verschillende tools gebruikt.
- User goals vaststellen
- Business goals vaststellen
- Visual research
- Design pattern research
- Visual design
- Wireframes maken
- Wire flows maken
- HTML schrijven
- CSS schrijven
- Javascript schrijven
Klik op onderstaande afbeelding om het eindproduct te bekijken. Het product werkt het beste in Google Chrome
