NS Ninety Nine Stories

A website to make your commute an experience
UI Design
UX Design

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.

The solution

With the website I made, travelers can read interesting visually unique designed stories. In this way, the NS is no longer only known as that company with trains, but also as a company that can bring an experience to its customers. In this case with visually designed stories. I developed an HTML/CSS/JavaScript prototype for this project. Check it out!

Visit prototype

About this project

During the second year of my study Communication and Multimedia design, I followed Project: WEB were I individually designed and developed a website from scratch called NS Stories. NS Stories is made for travelers traveling with a train from NS (Nederlandse Spoorwegen / Dutch Railway Agency) to read stories before, during, or after their journey. During this project, all aspects of Communication and Multimedia Design were included: user experience design, visual design, front-end development, and concepting. As a deliverable, a working HTML/CSS/JavaScript prototype had to be delivered.

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.

Visual Design

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.

Front-end Development

The third part of this project was Front-end Development. As a final delivery, I developed an HTML/CSS/JavaScript prototype. This prototype had to be made of semantically correct code. I used CSS to make the website responsive and I used JavaScript to make the micro-interactions working.