A Journey for Everyone: A case study on Thalys’ mobile app redesign that ensures accessibility and inclusion

Apr 30, 2023

See the UI case study here.


Thalys is a high-speed train service that connects major cities in France, Belgium, Germany, and the Netherlands. The service started in 1996 and is operated by Thalys International, a subsidiary of SNCF, the French national railway company.

The company connects Paris, Brussels, Amsterdam, Cologne, and several other cities in the region. The trains have different classes of service, including Standard, Comfort, Premium, and Business, each offering different levels of amenities and seating options. Thalys has a strong commitment to sustainability and has implemented several initiatives to reduce its carbon footprint, including using renewable energy sources, reducing waste, and promoting eco-friendly practices.

The new app design aims to provide a seamless and personalized experience to its users while making travel more inclusive for everyone while keeping the exciting sense of traveling alive. This case study examines the various aspects of Thalys’ mobile app redesign, including its innovative features, design elements, and accessibility enhancements.

1. Challenge scope and the team

For this project, the challenge was only focusing on the UI part of the design. Our task was to redesign a well-known native mobile application without conducting user research. We were challenging the actual information architecture of the content and redesigning it to improve our UI skills and think out of the box.

I am very pleased to work with lovely Louise.

on this project. She was a total team player and she played a very nice role while we were trying to give life to one of our brand attributes “accessibility” which I will be explaining in the following sections of this article.

Here is the list of tools used during this exciting UI challenge:

  • Main design tool: Figma

  • Team communication: Zoom and Discord

  • Graphic Design: Adobe Photoshop

  • Illustrations and Mock-ups: Freepick

2. Research steps

a. Heuristic analysis

Before diving into an exciting design adventure we made a heuristics analysis to define and understand the existing design decisions and even problems. We followed Nielsen Heuristics steps for analysis by Nielsen Norman Group.

Our goal was to define “undesirable” design decisions out of our sight and create the most delightful experience for all. You can see some of the screens explained with analysis notes.

b. Competitive analysis

After the heuristic was done, we wanted to understand other existing railway travel applications. They were mainly national railway applications of Europe countries, however, analyzed the famous aggregator apps as well. Such as;

  • NS National Dutch Railways

  • Renfe Spanish Railways

  • UK National Railway

  • SNCF France Transportation

  • Trenord Italy

  • Trenitalia Italian National Railway

  • Eurostar (part of Thalys group as well)

  • Trainline

  • OMIO

After a small talk, we decided to dive deeper into OMIO, Eurostar, and Trenitalia mobile apps to understand the experience they were offering.

We were surprised to see that few existing applications reflected the inspiration hidden beneath the traveling. Both Louise and I were focused even without talking making an inspiring design to make users come back, and want to come back to use our application.

As much as we liked the colors and design in OMIO and Eurostar, we were curious if everyone receives the same information as we do. For example, every color chart has logical hierarchy order for the actions ongoing in the app. But are they really giving the same message to all users?

The second issue was when users wanted to add a wheelchair to the tickets, most of the time they were either redirected to the company website or they need to call customer services. Why people can not add wheelchair space when they can for bikes?

3. Redesign Decisions

a. “How might we” statement

After market research, our main goal was already defined. We definitely want to make traveling inspiring and equal for everyone as much. as we can. When we put it into words, our questions to ourselves was:

How might we redesign the Thalys app in an inspiring way for users while creating digital accessibility for passengers with disabilities too?

b. Brand attributes and mood board

Our mood board reflects our all ideas, we imagine our users feeling inspired while using the new Thalys app, their time is important for us and they know they can rely on us. We welcome all users and are making innovations with the wheelchair space booking option and also the beautiful color blind mode to create digital accessibility. We knew from now on we will be giving an efficient service to people with visual disabilities too.

c. Color-typography charts and style tile

Let’s have a look at our inspiring color and typography chart:

This is how people with Deuteranomaly (red-green color weakness) see our color chart;

As you see above colors are pale, they seem like they have a grayish overlay. This causes our action buttons, functional and primary colors to be lost.

There are lots of different color blindness or weakness issues in the world but Deuteranomaly is the most common one. It is green-red color weakness causes them to see greens slightly reddish. Especially close tones are easily mixed and cause confusion.

The alternative color chart for people with Deuteranomaly:

How the people with Deuteranomaly see the color blindness color chart of the design:

There are still some changes like the tone of the yellow turning into orange but you will see with the accent color and the functional colors, they are still popping out. Even the alternative primary color yellow does.

We used Nunito as our design font. Nunito is a rigid yet still friendly font to welcome users to the inspiring Thalys world.

Redesign style tile:

Above you can see our project style tile. We used free illustrations from Freepick to enrich our design and they perfectly fitted with our color chart. Our action buttons are all in optimal height, so they make the experience easier to navigate.

4. Comparison of the wireframes

I would like to explain our design decisions by comparing old and new screens as side-by-side wireframes.

5. The Prototype

Here is the video of our inspiring, joyful, and innovative app in terms of accessibility.

6. Future steps and conclusions

Since we had limited time and scope we designed only the four pages and their interaction between each other. If we had more time we would like to work on real time journey scheduling and booking steps.

At first, I was thinking that we have to stick with the original colors of the current application and was not feeling very free to develop my UI skills. But with the push of the lovely Louise we took our design not only one but many steps ahead.

The UI part is aside, still thinking the company benefit was also another challenge. I was thinking myself as a part of the Thalys family and tried to design everything for the common interest for both us and the users.




See the UI case study here.