Redesigning the
NS Reisplanner

Introduction

In my quest to become a better user experience designer and during a few free weeks at school, I decided to join forces with fellow UX designer Saskia Rouwette and come up with a personal project to see how far we could push our design skills and develop them even further. In order to do this, we went through a list of apps and analyzed them to see what they did well, what their shortcomings were and what we could improve upon.
After a thorough analysis we decided the NS Reisplanner (Dutch Railways Journey Planner) would be the perfect fit for this project.
For this redesign, we chose the Android version of the app.

We also agreed on the fact that not having any kind of template and briefing, like our school projects usually do, could help us better frame and understand the issues people might have with an application or service.

The audience for this redesign are people between 18 and 26 years old who commute every day by train and also use the train for a day out every now and then.
We chose this target audience because it was the one we could more easily interview and test with, and because of time constraints.

About Nederlandse Spoorwegen

Nederlandse Spoorwegen, also known as Dutch Railways in English, is a public transport company in The Netherlands. Whether it comes to daily commute or just a day out, NS wants to make sure people have the best possible travel experience.

The NS Journey Planner has been made with the goal of giving travelers the most up-to-date timetables on their smartphones and on the web. The application can be used not only to go from place to place but also to check for delays and disruptions, giving people the chance to plan their journey accordingly.

Travelers are NS' top priority and so their whole journey, from preparations to arrival, needs to be made as comfortable as possible.

Project goals

After this brief introduction, let's break down the list of goals for this project.

For the redesign:

• Streamline the process of planning the perfect journey

• Improve screen readability in order to lessen cognitive load

• Improve the user experience by removing clutter and adding delightful micro-interactions

• Give the app an updated Material Design look by using the latest guidelines while staying close to NS' current design
  
  

Our personal goals:

• Be able to frame issues, understand them and come up with a solution through empathic design and multiple iterations

• Refine our UI design skills and improve our understanding of Adobe XD

• Be able to apply a coherent visual theme and implement design language-specific guidelines
  
  

In order to do all of the above while keeping the project manageable for a team of two,
we targeted a very specific flow of the application, namely the planning part, which consists of three main screens:

1. Plan your journey

2. Search results

3. Journey details
   
   

During our time working together, Saskia and I shared the following roles:

• User researcher

• UX designer

• UI designer

• Motion and interaction designer
  
  

Also, during the testing phases, Saskia would ask a few introductory questions, observe and take notes, whereas I would be explaining the tasks to perform to our test participants, observe them and take mental notes.

With this premise in place, let's begin the journey of this redesign.

The current state of the NS Journey Planner

I already knew the application because I use it from time to time but I wouldn't call myself a power user. This is mainly because the train I take for my daily commute always departs at the same platform every 6 minutes.

To get a better understanding of the application and discover possible hiccups in the user experience, Saskia and I explored the app thoroughly and used its various features.

Below are the main issues we encountered early on.

Survey

After having done our own research, we wanted to get to know better who we were designing for. We set up a Google Forms survey and asked students all over the Amsterdam University of Applied Sciences to fill it out.

The survey was filled by 85 travelers between 16 and 33 years old, 53 of which use the NS app. You can have a look at the data on this page.

The following are some of the questions we wanted to ask survey participants:

• What do they use the NS Journey Planner for?

• How do they use it?

• What are the most important features for them?

About halfway through we added a few questions to the survey because we felt we needed some extra information. This had the side effect of skewing some of the answer percentages, something we didn't take into account. Lesson learned though, this is a mistake we won't repeat next time!

Here are the main results we gathered from the survey.

In general

• Travelers use the app mainly to plan a journey or to check for disruptions

• The ‘my journeys’ and ‘more’ tabs are rarely used

Plan your journey (main screen)

• People plan their journey primarily based on arrival time

• The ‘now’ button is used by 81% of the respondents

• The widgets on the lower part of the screen are rarely used with the exception of ‘home address’

Search results screen

• The deciding factors for planning a journey are departure and arrival time, travel time, how many times people have to transfer and the type of train they have to take

Detail screen

• Functions such as ‘save journey’, ‘share’ and ‘calendar’ are rarely used

• Travelers prefer sharing their journey details by sending a screenshot

• Extra functions like buying a ticket, checking the local weather or others get little usage

With the above issues in mind, we decided to focus our redesign on the planning part of the application, which consists of three screens:

1. Plan your journey

2. Search results

3. Journey details

Going from lo-fi to hi-fi

Below I'll illustrate the main screens of our redesign next to their current version.
As you'll see, there's a whole host of visual changes as well. This is because when we started designing hi-fi wireframes, we decided we also wanted to freshen up the app visually by using the latest Material Design guidelines provided by Google.

The changes you see already take into account the testing rounds and iterations which you can read about in the next section.

User testing

After having designed all the screens in high fidelity and having wired them up, we did three testing rounds in order to look for usability problems and to validate our design decisions. For each round, we tested with six people chosen at random from the redesign's target audience, collected feedback and improved the design accordingly before proceeding to the next testing round. Testing was done on an Android smartphone.

Besides collecting general feedback on the redesign, we wrote a test protocol which consisted in giving people an introduction to the app, asking a few interviewing questions and performing a few specific tasks, namely:

1. Plan a journey from Haarlem to Amsterdam Centraal based on arrival time (location information was prefilled)

2. Plan a journey from Leiden Centraal to Eindhoven based on departure time and with 10 minutes extra transfer time (location information and transfer time had to be set)

3. Change overview settings

The following were our gatherings from the test rounds we performed. Changes were made and implemented immediately after each completed test round based on received feedback. You're welcome to view the complete document here.

Test round #1

• The ‘accessibility’ feature is unclear and needs extra explanation

• The ‘extra transfer time’ feature is unclear because there's only a slider with no minute counter or time indicator

• The ‘favorites’ tab can't be accessed (we didn't make anything for this because of time constraints)

• Write out the text for ‘platform’ instead of using an icon. Not everyone understands the icon

• When setting ‘extra journey options’, people want to see their settings on the results screen

• People sometimes don't understand they can pull down the journey detail card
  
  

Test round #2

• The journey detail card handle needs some extra room to be tapped on. People have trouble pulling it down

• Platform icon is still not understood by everyone

• ‘Extra transfer time’ needs to be tappable instead of moving the slider via swiping only

• Departure and arrival times need to be made clearer when highlighting added delay time
  
  

Test round #3

• ‘Extra transfer time’ needs extra emphasis on the search results screen

• Write out departure and arrival platform instead of using the icon because too many people find it confusing

Microinteractions and animation

The designs and tests come together in the following videos where you can see how the different parts of the app work and how they animate into each other seamlessly. We've tried to add as much personality as possible to every single frame in order to delight travelers with every microinteraction they engage in.

Final prototype

You've read about our work, but you can also try out the prototype in Adobe XD. Just a few disclaimers before you start, though:

The prototype is made with specific task flows in mind, so you can't access every destination from every screen. Please keep this in mind when you use the prototype.
However, we encourage you to press every button and use every feature, as you'll surely find something that we didn't write about here!

The only plannable journeys are from Haarlem to Amsterdam Centraal with arrival time at 15:30 and from Leiden Centraal to Eindhoven with departure time at 11:15 (you can search for these destinations with the keyboard, just like on your phone).

The animations and layout are best viewed on a computer screen because, as we found out, Adobe XD doesn't play nicely with Android phones.

With that said, try out our prototype here and have fun!

What have we learned from this project?

We initially set our working time for this redesign at two weeks, but this changed rapidly as we started implementing and following Material Design guidelines. Needless to say, we were overwhelmed with the amount of work we had to take on and didn't see this coming. That's a planning lesson learnt!

What we were able to achieve in a small amount of time and with limited data at our disposal has surpassed the expectations we put on ourselves. However, there is no doubt that NS has spent countless hours making the Journey Planner as it is right now. They also have access to a huge amount of data which tells them how people travel, what features of the app they use and why. So we don't want to claim that every single decision we have taken in this redesign is better than what NS is offering right now and we're confident that with a lot more research, usability testing and iterations, we could improve the Journey Planner even more. After all, design is a continuous process!

We learned what works and what doesn’t. We changed plans multiple times throughout the design process. We learned how work faster, better and more efficiently in Adobe XD. We also learned a lot of various other things along the way while working towards our goal.

Saskia and I complemented each other nicely during our working together. Personally, I consider myself more of a visually oriented UX designer, so collaborating with her helped me sharpen my user research skills and learn how to conduct interviews and testing in a better way. In turn, I helped her better understand some visual design principles.

Has this case study got you interested in working together? Then feel free to drop me a line via my contact form.