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.
Cheers.
C.
—-