NS is more than trains
NS Stories is made for travelers traveling with a train from NS (Nederlandse Spoorwegen) to read stories before, during, or after their journey. NS Stories makes your commute an experience.
The design challenge
NS wants to offer its customers a new experience when they are traveling by train. NS wanted to create a website containing stories travelers can read when taking a train. My challenge was to design and develop a platform to let these stories come to life.
About this project
Seamless multi-device experience
The final HTML/CSS prototype had to be a seamless multi-device experience. That means that the website had to work on mobile devices, tablets and desktop computers. The keyword of this project was ‘responsive design’. Responsive design is one of the keys to a seamless multi-device experience.
During this project, I was graded in three subjects. Visual Design, User Experience Design Patterns, and Front-end Development.
For the visual design part of the website, I made a style guide of the corporate identity of NS. The final website is designed using this style guide so visitors can immediately see that this website belongs to NS. The website was not the only thing that I visually designed and developed during this project. I also made three visual designed stories as content for the website. The idea behind this was that a story in plain text doesn’t give the reader an experience. Visual designed stories can convey the atmosphere of a story and give the reader a better feeling of what the story is about.
User Experience Design Patterns
Another part of the project was User Experience Design. For this part of the project, I designed lo-fi and hi-fi wireframes before I jumped into the visual design part of the website. I also designed four micro-interactions for the website so users could really interact with the prototype. The four micro-interactions I designed are:
• A like button so users can like the stories they enjoyed.
• A save button so users can save stories they want to read later.
• A saved stories page so users can manage their saved stories and delete them from the save list if they don’t want to save the story anymore.
• A download button so users can download stories and be able to read them when they don’t have an internet connection.