Usebeautiful logo
Train illustration

news

Wanna be the first to know about new projects? Wanna be an early beta tester for our apps?

Fun Toons Stickers: we have a message for you!

usebeautiful.co  |  All rights reserved 2017 ©

Voyages SNCF

A completely new mobile experience.

Voyages SNCF is the biggest e-retailer in France

How to rethink their new mobile app?

A simple palette

The new design is based on the brand colors (white & cerulean) to which we added the “aquamarine” green (mainly used for floating action buttons) and a bright bleu that lights up the whole screen (through call to action and other links).

Color palette — Voyages SNCF

Meticulous design

Totally new but already familiar.

Voyages SNCF - Close up 1

UX that emboldens the brand

For a product like this one, the user experience needs to be top notch. Looking for a trip, finding and comparing prices on a phone screen can easily become a tedious task. Even if Voyages SNCF has millions of customers in Europe, each of them is served with a tailored experience.

 

The app follows and delights you before, during and after each visit; everything is designed to make you feel “a traveler” rather than a “user”. Your journey/trip/purchases are customized with pictures and practical info (like weather and traffic conditions, complementary services and so on).

Submitting Form...

The server encountered an error.

Awesome. See you soon!!!

Hero device
Hero Screen - Voyages SNCF

The new home screen — A giant background image is used to convey emotion and immediately dive the user into his journey/trip.

This is not just a train tickets retailer, but an established online travel agency that offers various services: train, flight and hotel reservations as well as taxi rides, car rentals and much more. Their mobile app is a key asset and we completely redesigned it from the ground up.

Each screen went for a total redesign. The new mobile app is based upon Google’s Material Design guidelines. This allowed us to build something completely new but that feels familiar to the average Android user.

Fresher than ever — Dense text based screens are kept “fresh” and easy to read thanks to white space and the use of bright colors.

native.app

mobile.commerce

android

Logo mobile app Voyages SNCF

Hierarchy and readability

The app is content-rich and primarily based on text: destinations, departure times, timetables, prices, train numbers, traveler information, etc. The challenge was to design a readable screen without compromising the readability or losing track of the hierarchy. We patiently iterated over time to find the best typographic layouts.

Voyages SNCF - Close up 2

Voyages SNCF has its own internal UX team (probably amongst the best in France) and for several months we worked hard, side by side, to come up with something new, with a product capable of renewing and reinforcing the user experience as well as the brand perceived value.

1 / 5

1 / 5

Usebeautiful logo
Color palette — Voyages SNCF
Voyages SNCF - Close up 1
Hero device
Hero Screen - Voyages SNCF
Voyages SNCF - Close up 2
Train illustration
Hero device
Hero Screen - Voyages SNCF
Logo mobile app Voyages SNCF
Voyages SNCF - Close up 1
Voyages SNCF - Close up 2

1 / 5

Train illustration
Train illustration
Voyages SNCF - Close up 1
Fun Toons Stickers: we have a message for you!
Hero device
Hero Screen - Voyages SNCF
Voyages SNCF - Close up 2
Color palette — Voyages SNCF
Train illustration
Voyages SNCF - Close up 1
Fun Toons Stickers: we have a message for you!
Hero device
Hero Screen - Voyages SNCF
Voyages SNCF - Close up 2
Train illustration
Voyages SNCF - Close up 1
Voyages SNCF - Close up 2
Train illustration
Voyages SNCF - Close up 1
Fun Toons Stickers: we have a message for you!
Hero device
Hero Screen - Voyages SNCF
Voyages SNCF - Close up 2
Color palette — Voyages SNCF