NS Railways: Redesign
Project Info: Sp22-ENP-0166-02-Computer Interface Design, Individual Class Project
Project Type: Paper Train Ticket Redesign, Hypothetical Consulting Project
Project Timeline: 1 week (April 2022)
Deliverables: Final train ticket design concept, a cover page, and a cover letter that includes a concise 1-paragraph of design rationale
Skills and Techniques: Visual Design, Figma
OVERVIEW
Brief: Creating a concept for a redesigned paper train ticket that includes the following at a minimum: Departing city, Arrival city, Departure time, Train number, Car and Seat number, Departing platform, Passenger name, Logo and other branding, Confirmation number, Ticket class (coach, business, first), A barcode for scanning (moved to scanning and do not need a tear-off portion)
Details: The new ticket design should be visually pleasing, be visually distinct, and reflect an understanding of what is most important to passengers. Simply put, it should be the most user-friendly and attractive ticket in the industry. The boarding pass should be 8 inches x 3.25 inches (square or rounded edges, and horizontal or vertical), and can be printed in color.
Background: Nederlandse Spoorwegen is a Dutch company, the principal passenger railway operator in the Netherlands. Founded in 1938, NS provides rail services on the Dutch main rail network. The Dutch rail network is the busiest in the European Union, and third busiest in the world after Switzerland and Japan.
PROCESS
Stage 1: Discover
Branding
Website Style Elements
In order to retain the branding of NS Railways, I first looked at the existing website of NS Railways and used the Chrome extension CSS Peeper to inspect different parts of the website. I further discovered this extensive website of NS which provides core elements to design an NS experience, from icons to colors and typography. This served as a helpful guide in understanding brand identity and maintaining it in the ticket redesign.
Other Interfaces and Tickets
I further searched online and looked at examples of other interfaces, including ticket purchasing kiosk UI interface, mobile application interface, and digital and print tickets of NS Railways to get inspiration and ideas about branding.
Stage 2: Define & Ideate
Key Findings: About the Brand
As a well-established Dutch company, and the largest public transport operator in the Netherlands, it is not surprising to observe that NS values providing the best user experience to its users/passengers. Various UI design examples above all share similar styles in a consistent way. NS has clean, simple and NS-branded aesthetic interfaces that help the users to locate information easily and take relevant actions. Just like it strives to provide “convenient, fast, safe and affordable travel and to ensure that people can reach their destination in a sustainable manner,” NS makes sure to reflect that established quality, practicality and convenience in its designs. NS places emphasis on the “Customer Journey” in both its transportation services and UI interfaces.
Simple, Aesthetic, and Minimalist Design
not text-heavy, avoids unnecessary information
slightly rounded UI elements (buttons and icons)
use of simple illustrations and icons
easy to read and easy to digest text and easy to navigate design
Quality, Practicality, and Convenience
Design Considerations
I further looked at train ticket examples of other companies that I found online as well as other design projects. I identified some common trends, what I think works best and what does not, and how to make the design most simple and appealing as possible. Below are some considerations I had when designing the paper train ticket for NS railways, from a user-centered design perspective.
Information and Visual Hierarchy
the most important info that the users need should be made more distinct
Order of importance: departure and arrival locations, date, time, train-related info
less important info should be made less distinct and placed accordingly
Simplicity and Consistency in Design, Maintaining Branding
clean, white background (middle area)
attention-grabbing brand colors at the top and bottom
logo at top left/right corner
Easy to read and Easy to process text
big enough font size and sans-serif font
Use of a QR Code over a Barcode
QR code is two-dimensional, can be read both vertically and horizontally, can contain more data, and is more modern
traditional line barcode is more limited and can only be read horizontally
Stage 3: Develop
Below is the train ticket design I created using Figma.
Click on the image for an enlarged view.
Design Rationale
The main brand colors for NS railways, yellow and blue are used at the top and the bottom to make the ticket discriminable, with the logo observed at the top left corner
The most important information that the users need is made distinct and organized in an ordered way
Departing and arrival city info is emphasized with larger font size at the top
A simple train illustration contains all the information that is relevant to the trip details and the train, grouping similar elements and making the ticket look more visually aesthetic. Inspired by the NS website that gives examples for preferred illustration styles
Following the essential details date and departure time, there are more specific details like the platform, train, car number, and seat information, in order of relevance and specificity
Most of the time the passengers will check the platform first, and then the train number (or vice versa), then the car, and finally the seat, once they are inside the train. In this way, the content is organized to follow natural eye movement patterns, left-to-right in this case, which applies to Western users
Other information like the ticket number and price is not included in the middle area, but rather in the top and bottom banners, since they are not as important and checked as often
European time format, 24-hour clock/military time is used since the company provides transport services in Europe
Other visual elements like the arrow that follows a path from the departing city (from) and the arrival city (to), as well as the train illustration, make the users follow a left-to-right path when processing information, in the direction of the high-speed train
It states “Check-in and out with every operator” at the bottom, which is borrowed from the original NS railways paper ticket found online
The edges of the ticket are rounded to maintain simplicity, and also the ticket fits into the pockets of the users more easily. The train illustration also has rounded corners for the sake of consistency
Overall, the redesign is simple and easy to read and process for passengers so that they can find their train easily and comfortably
Reflection
A paper ticket redesign assignment was new and unusual considering our typical projects and my previous experience being centered around digital UI design and screens. It was fun to think about the user experience of going to a train station and using a paper train ticket. I tried to design something different by including a simple train illustration that fits the theme, as if the information is scanned as the train moves from left to right. It was a challenge and a learning experience to think about and implement multiple factors from what information would be most important to the user and how to organize the information using visual design principles, and how to maintain branding and simplicity, especially for a Dutch company (since Dutch design is known to be minimalistic).