Redesigning the French train ticket platform — a case study
The first UX study case of our UX Bootcamp
This article is co-written by Andasha Wardhana, Karina Chasijeva, and me Amélie Perdriaud.
It was only the second day of our UI/UX Bootcamp at Ironhack and we had already received a first project brief to complete. We started right away, a bit excited and nervous to start our Bootcamp adventure.
The brief was quite simple :
You are asked to redesign the interface of your National Train Service or similar National Transport Service in your country. (…) Your solution must include a feature that helps a user group achieve a task. Focus on a specific and discreet problem in user interaction with the web. Build a solution that can be integrated into a larger system and that solves that problem.
We chose to work on the French National Train Service, Oui.sncf, as we noticed from the website that there might be room for improvement.
We worked as a team and we were all involved in all the steps of the project.
Methods
- Timeline: 9 days (part-time)
- Team: 4 students from the Ironhack Bootcamp
- Materials: Miro, Invision, Notebook, pen, paper
- UX Techniques: Survey, User interviews, Usability test, Affinity diagram, Value vs Complexity Matrix, Paper prototype
Step 1 — Empathize with users
Before we begin to iterate the solutions that may be necessary for this app, we wanted to know who generally our main users are, and what is their general behavior in regards to purchasing a train ticket online.
Conduct a survey to identify the users
We brainstormed and worked together to decide which are the things that we would like to learn. We put down some of our main ideas into the Lean Survey Canvas. Based on this, that, we compiled a Google form and distributed it through Slack channels and Facebook groups. Some of the information that we would like to know from the respondents were:
- Their past experience on the most recent travels;
- Their past experience when buying a train ticket, be it online or offline;
- Certain likes and dislikes about ticket purchase experience on certain train ticket websites;
- Important features and filters to have when buying online tickets.
What did we find out?
- Our main respondents are 30% French nationals and 17% are Dutch;
- 95% of total respondents have bought a train ticket for holidays in the past year;
- Most of the respondents (96%) belonged to the 25–45 age group;
- 41% of that age group preferred to buy a train ticket through a laptop/desktop website: they can see more results due to bigger and better screen, they don’t like to enter their card details on their mobile device, they feel that web platform gives the sense of trustworthy and security to them compared to a mobile app/website;
- For respondents who mentioned their good experience with a certain website when buying a ticket, they were attracted by how fast and easy it was to do a transaction. They were also satisfied with the information provided on amenities and a variety of pricing and liked that they did not have to create an account to make a purchase;
- They also felt that some features are important to be available when buying a ticket online, such as easy payment, easy filtering, easy ticket retrieving in the app, clear itinerary, price comparison, complete info on the whole journey, and map availability to see the location of the train stations.
Conduct user interviews to understand the pain points
With those results in mind, we did another discussion together to decide what are the things that we wanted to deep dive more into the user interviews. Aiming to a more in-depth explanation of what we’ve asked in the survey, we invited 5 respondents in total and did each 1–2 respondents on our own. Due to quarantine restrictions, most of these interviews were held via video call. These were the topic guidelines that we probed further during these interviews:
- Past travel experience and behavior, including the last experience when traveling by train;
- Walkthrough process of the last time buying an online train ticket through a website or an app;
- An in-depth explanation on which features and/or filters are important to be available in the last activity of buying a ticket online;
- Overall feelings and thoughts process when purchasing a train ticket online.
What did we find out?
- They feel like the pricing is the most important element/feature on the website
- They prefer to buy a ticket online in advance to get a cheaper price;
- They would like to see a better look at price comparisons;
- They would like to be able to choose seats freely in advance;
- They want to see a clear overview of the overall journey with clear routes, maps, stops, and changes;
- They want to be able to do an easy online transaction with any payment method they want;
- They feel it would be useful if the website provides a good advanced search and filters;
- They feel the need to be able to obtain the e-ticket they have just bought easily and smoothly.
Conduct a usability test of the current website
Using the same respondents we just talked with during the user interview, we proceeded by instructing them to test the usability of the current Oui.sncf website. In accordance with this test, we have formed a controlled scenario where our users were assigned to accomplish the main goal — purchasing a ticket:
“You planned your holidays in France this summer, and you want to book a train ticket to go from Paris to Marseille on the 14th of July at 10 AM, for you and your partner.”
The goal of our usability test was to gather as much information and feedback to understand how our real users are currently interacting and behaving with the product. To improve our observation we have created some of the main focus areas;
- How did they feel during the experience with this website?
- Which features were felt the most important?
- Which features were deemed as the most useless?
- Was there anything that was missing on this website that the user wants to see?
What did we find out?
- They weren’t able to choose a seat
- They felt overwhelmed by the quantity of information
- They want to be able to notice some of the important features immediately, such as selecting the dates
- They did not understand right away if the price is per person or total
- They missed seeing the date option right next to the destination
- The user expects for information about the refund to be more clear and informative, especially in the current coronavirus situation
- They wished for more information on what the different train types mean
Step 2 — Define the problems
After a whole lot of empathizing, it was time to proceed with defining the real problems by gathering a lot of information about the pain points. We put all of them on our virtual wall on Miro and clustered them by topic. We went through all the points together and decided which problems were the most important to tackle, according to their frequency and their importance regarding the task. We still had a quite long list of pain points so we decided to prioritize them in order to focus on what we considered was the most valuable.
Step 3 — Ideate to find some possible solutions
Value vs Complexity Matrix and Brainstorming
We brainstormed by putting those main problems in a matrix according to the value they could bring to the user according to us, versus the complexity to implement them in our paper prototype, considering the time constraint (at this point we only had a few hours to complete our paper prototype and test it on users).
We decided to tackle only problems with high value and low complexity. We then defined what will be the solution to tackle those points:
- Enable date selection to be more prominent and mandatory
- Minimizing features not related to the task such as finding a car to rent, finding a hotel. People found those features useless and distractive, they wanted to focus on the main task.
- Making common amenities more prominent (Wifi), now they have to click on a ticket to open the details
- Make the distinction of the price per person more prominent as people complained about seeing an expensive price and they thought it was the price per person
- Clarify and simplify the refund conditions as people were spending a lot of time reading those conditions and described them as confusing
- Adjust the seat selection function to be more granular
- Provide a full map or diagram of a complete train journey (route)
- Allow wallet app to download/obtain e-tickets
- Make ‘Print Ticket’ option more visible and more straightforward
Step 4— Prototype our ideas
We all wanted to practice our drawing skills so we decided to split the work in 4 and tackle a step of the process individually. The idea was to make a first draft of the paper prototype individually and then iterate on it together until reaching a suitable prototype for testing. Unfortunately, we did not have enough time to brainstorm and our first draft was the one we used for testing.
Step 5— Test our prototype
We imported our prototype in Invision and tested in on two users in order to gather their feedback. You can find the prototype here.
During the Saturday in-class session, we had the opportunity to do the test live in-person. The task to complete for the user was the same as the first usability test: “You planned your holidays in France this summer, and you want to book a train ticket to go from Paris to Marseille on the 14th of July at 10 AM, for you and your partner.”
We found the test really interesting as we gathered a lot of feedback from our users, even with a quick draw of our ideas. We had enough material to adjust our prototype and test it again. That’s something we could work on in a coming sprint.
What did we learn from this project?
Our first real project as an official student of Ironhack had definitely taught us a lot of valuable things:
- Creating a good survey takes more time than we expected — we needed to find some alternative/indirective questions. It is also difficult to find the proper channels to distribute your survey: the survey results could be biased if you share it in a Facebook group of French expats females for example;
- We gathered a lot of data even with a first prototype draft — we will allocate more time for testing the next time;
- We should have iterated on the design as a team to challenge our design solutions — we did not have time to brainstorm properly before doing our paper prototype, and we missed the chance of generating more good ideas thanks to the group emulation;
- Content data and consistency are really important in prototypes — we had 4 different styles of a paper prototype that were not using the same data and it obviously brought a lot of useless confusion to users;
- Users were confused by the prefilled data during testing — we should first provide empty fields and fill them after a click in the field, or give them the choice of the data when possible.
I hope you enjoyed reading this use case. Want more? No worries, I still have 5 months of Bootcamp, and a lot of interesting projects are coming!
- Provide a full map or diagram of a complete train journey (route)
- Allow wallet app to download/obtain e-tickets
- Make ‘Print Ticket’ option more visible and more straightforward
