The journey detail screen has a lot of information on the same hierarchic level.
How we made planning a train journey a better experience
Introduction, goals and sections
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.
We went through a list of apps and analyzed them to see what they did well, what their shortcomings were and 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 would be 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 have chosen this target audience because it was the one we could more easily interview and test with, and because of time constraints.
About the Nederlandse Spoorwegen
The Nederlandse Spoorwegen, also known as Dutch Railways in English, is a public transport company. 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 travellers 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.
Travellers are NS' top priority and so their whole journey, from preparations to arrival, needs to be made as comfortable as possible.
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 update 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:
- Plan your journey
- Search results
- Journey details
During our time working together, Saskia and I shared these 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.
and user survey
The current 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 problems we encountered early on.
Issues with ‘Plan your journey’
- The ‘recently chosen stations’ section list items are missing a history icon to separate them from the rest of the list.
- The journey detail screen is missing a clear hierarchy and has too much information asking for people's attention.
- In the ‘extra journey options’ screen, there's a slider to set the time in minutes which does not show the precise minute amount.
- The back button's behaviour is confusing, often closing the app.
- The ‘more’ button on the bottom bar has hidden options that are not shown on the screen.
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 travellers 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:
- For what do they use the NS Journey Planner?
- How do they use it?
- What are the most important functions for them?
About halfway through we added a few questions to the survey because we felt we needed some extra information. This has 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 surely won't repeat next time!
Here are the main results we gathered from the survey.
- Travellers use the app mainly to plan a journey or to check for disruptions
- The ‘my journeys’ and ‘more’ tabs are rarely used
- People plan their journey primarily based on arrival time
- The ‘now’ button is used by 81% of the respondants
- The widgets on the lower part of the screen are rarely used with the exception of ‘home address’
- 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
- Functions such as ‘save journey’, ‘share’ and ‘calendar’ are rarely used
- Travellers 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:
- Plan your journey
- Search results
- Journey details
UI and visual design
At the beginning of our redesign process we made a few variations of the current screens in the form of lo-fi wireframes.
We started doing this the traditional way but quickly transitioned to Adobe XD since that would also be our program of choice for the final redesign and wanted to get to know it better.
The lo-fi wireframes consist of 2-3 variations we made to get a grasp of how information is organized on the screen and how we could present it in a way that's easier for people to scan.
Feel free to check out the lo-fi wireframes here.
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.
The first hi-fi wireframes we made used the current NS Journey Planner color palette. However, with the exception of the primary yellow, we felt the colors were a bit dull and decided to ramp up the vibrancy in order to give the UI more visual pop.
The primary color is yellow whereas the secondary blue is used for buttons and interaction elements. The darker shade of blue is used for plain text.
Surfaces and elevation
As per the official Material Design guidelines, we have implemented different layers of elevation for Material surfaces.
Shadows are used to express elevation and the degree of overlap elements have between each other.
They also help convey a sense of hierarchy to the user.
Grid and layout
For this redesign we set our target resolution at 1440x2960, which in Android talk means we're in xxxhdpi territory.
The app's elements are aligned to a 4 column, 8dp grid with some smaller components, such as text, aligning to a 4dp grid.
Distance between elements follow the Material Design guidelines except for some instances where we felt elements needed some tweaking to give them better visual balance.
About the bottom bar
The bottom bar currently contains four journey-related items and a tab for more settings. This destination has nothing to do with planning a journey, so we decided to move the tab and convert it to a navigation drawer.
Furthermore, the Material Design guidelines clearly state bottom navigation should not be used for settings or preferences, reinforcing our decision.
Plan your journey
This is the first screen people see when they open the app and throughout our redesign, it has remained largely the same.
We added a few polishing touches in terms of visual consistency: the ‘now’ and ‘extra options’ buttons had the same shape and color, implying they were part of the same group or function. We separated them and gave the 'extra options' button its own place on the screen.
Travellers are now able to set extra journey options right on the same screen by expanding the menu. You can read more about why we did this in the next section.
Under the planner there's a widget where users can set their favourite locations and see their journey history. Information from our survey suggested people don't use these features as much and also confuse ‘history’ with the recently searched items they see when they look up a location in the planner.
The widget has been replaced in favor of a list with recently chosen destinations, so people can set their frequent journeys more easily.
Extra journey options
Rather than sending users to a different screen like the current app does, we chose to integrate the extra options directly into the main screen. This helps people to keep context and having all information on one screen also lowers cognitive load.
The ‘extra transfer time’ feature has been tweaked to show the precise amount of minutes when moving the slider. However, because of time constraints we could not implement an exact counter in our prototype.
Also, the ‘accessible journey’ information has been moved to an overlay to create visual rest.
As soon as travellers press the ‘plan’ button, a list with journeys comes into view.
With this being an information-dense screen, we wanted to make it easier for people to scan and give it some extra whitespace.
Compared to the current version, the planner has been shrinked and placed in the top bar. Travellers can still tap on it to expand it and change their journey options.
In the app's current state, there's a small line on the left side which seems to suggest a recommended journey.
Users reported this was hard to see or that they didn't know what it was for, so we cleared things up by coloring the list item and placing an all-caps ‘recommended’ text on it. People reacted positively to this change during our tests.
The recommended journey is selected based on the departure or arrival time set by the user, the lenght of the journey and how many times a transfer has to be made, since these are the most important pieces of information travellers base their choice on.
We omitted the departure platform from the screen to add some visual rest, since it's second stage information people only need after having chosen their journey.
Another change to the user experience has been made by removing the ‘earlier’ and ‘later’ buttons for loading corresponding journeys. Users can now scroll up and down freely and the system automatically takes care of the loading.
Going back to the planner can be done by tapping the journey details in the top bar or the ‘planner’ button on the bottom bar. Going back with the regular back button is also possible, of course.
When travellers tap on a journey, a card shows up displaying their journey details. The card overlays the results screen, again communicating to people where they are in the app and giving it a modern aesthetic.
The card can be closed by swiping down on it or by tapping the handle in the upper part.
The main issue with the current screen is that it's very busy and missing a clear hierarchy. All elements are screaming for the viewer's attention.
Once again, departure and arrival times, the lenght of the journey and transfer are the most important information travellers want to keep an eye on, so we brought these elements forward in a bold and visible manner while also establishing hierarchy.
Departure and arrival platforms and how busy it is on the train can be seen at a glance.
Features like ‘weather’, ‘9292’, ‘shops’ and the bar where travellers can share or save their journey have been removed in favor of more white space as almost no one reported to use these features and people are more inclined to share their journey with a screenshot instead. The options to buy a ticket and see the OV fiets availability have been kept because people reported using these. In the case of buying a ticket, it also has obvious business reasons to remain included.
Because of time constraints, we haven't touched upon extra features that go a bit deeper, like how many wagons the train has and what its intermediate stops are.
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 our redesign's target audience, collected feedback and improved our 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:
- Plan a journey from Haarlem to Amsterdam Centraal based on arrival time (location information was prefilled)
- 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)
- 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 ‘favourites’ 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
All our designing and testing comes 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 travellers with every microinteraction they engage in.
Switching departure and arrival
Users can tap on the double arrows to reverse their chosen stations with ease. The arrows rotate to communicate a switch is taking place.
Planning a journey
This video shows the steps and microinteractions to planning a journey, along with how the different screens are layered.
Setting extra options...
Travellers can personalise their journey with extra options. This video shows how they work.
...and cancelling them!
Extra options set by the user appear in the top bar on the results screen. They can be cancelled easily by tapping the cross icon on the chip.
Pulling away a card
The journey details card can be pulled away to go back to the search results screen.
Going back to the main screen
Users can go back to the main screen by tapping on the top bar where their journey information resides or by pressing on the ‘plan’ tab. It's also possible to go back by pressing Android's back button or with the corresponding swipe gesture.
Opening the navigation drawer
The ‘more’ tab has been moved to the upper left corner in the form of a navigation drawer where all pertintent user information and settings reside.
It can be opened with a simple tap.
Our final prototype
So you've read about our work, but you can of course try out our 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.
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 this said, you can try out our prototype here and have fun!
What have we learned from this project?
We initially set our goal 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 the app is better than what what NS offers 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 to do things faster, better and more efficiently. We also learned a lot of other random stuff 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.
Well then, that concludes it. Thank you so much for reading!