RATP redesign — a UX case study on mobility
I started working on this case study a few months ago. RATP has released a new update of its product since. My work is based on its original version 4.0.8.2.
RATP is the public transport operator in Paris, France. Its official app enables Parisians to search for the best itinerary using public commutes and displays daily updates about transportation’s traffic. As a Product Designer at Goodpatch, the future of mobility is a theme that we particularly believe in. I had a closer look into RATP app’s UX architecture and have a few suggested design solutions to improve its accessibility and success within the Parisian community.
Project duration: 4 days
Individual work
Roles: user research, wireframing, usability testing and prototyping
A mobility app that needs to be highlighted
I am a UX designer based in Paris and commute to work everyday using public transportation. I check mobility apps daily in order to find the best itinerary possible. Among them I use Citymapper as well as GoogleMaps and AppleMaps but RATP’s app isn’t on my top navigation app list. Therefore, I made my own research through mini surveys, interviews and online documentation in order to evaluate its popularity among Parisians. The results are pretty interesting as I discovered that most Parisians are not familiar with using the official RATP product either.
Studies show that RATP’s app is ranked #5 on the top Apple Store’s mobility apps downloaded in France in 2020 — after GoogleMaps #1 and Citymapper #3.
UX Analysis
I first started analysing their product and focused my work on the main user flow: the user opens the app and aims to access the itinerary map in order to get to its destination. There are 4 main steps before reaching the itinerary screen:
User Interviews
Through quick user tests and interviews, I have gathered enough information to make a list of gain and pain points regarding the current app. I interviewed 3 users — mostly all UX designers — and asked them:
What are the pros and cons of the RATP app’s itinerary search flow ?
I highlighted the key words from all the interviews (cf. pictures) and I came up with 3 main insights:
- Simplicity: UX/UI should be simplified, less busy and should adapt to today’s UI trends.
- Technology: Add new technologies to improve the user experience (AR, contactless card…).
- Usability: Improve the product’s ergonomics so that users can use their phone while walking.
Prototypes
Interviews and brainstorming sessions have helped me figure out which parts of the product should be improved. I came up with 3 areas of opportunities and I worked on achieving these design challenges through user journeys, sitemaps, wireframes and prototypes.
Low-Fidelity Prototypes
Sketching is an essential stage of my design process as it helps me building UX architecture. It enables me to experiment a lot of workflow ideas on a piece of paper and to think about potential features that could be added and/or removed to my low-fidelity prototypes.
I finally worked on the core structure of the app — the sitemap. It displays all the screens that the home screen can lead to. It also defines the main features of the product:
- Hamburger menu (menu overlays the screen)
- Contactless metro card screen (Navigo)
- Commutes around me
- Favorites places/ itinerary (itinerary screen opens)
- Search an itinerary (search an itinerary workflow)
Mid-Fidelity Prototype
I collected all my sketches and digitalised them to build more detailed wireframes. This was my first prototype of the RATP search flow:
Home screen -> Itinerary list -> Chosen itinerary details -> Start Itinerary
High-Fidelity Prototype
Once I built the product’s UX and search flows, I had to set up a design system — library for UI components — focusing on RATP’s branding.
Home Screen
- User’s main interaction is to tap on « search a destination »
- Horizontal scroll will enable the user to go to their favorite addresses (home/ office)
- Easy and direct access to Metro Card(s) (Navigo)
- The user can instantly check the closest commutes around them (swipe up)
- Hamburger menu contains all settings
Metro Cards
- User can easily access their digital Metro Card(s) through the home screen
- Possibility to have several cards on one app
- Renew/ top up the card when the balance is negative
- Contactless
- Easy access to journey history
- Eco-friendly: reduce paper/plastic waste
Itinerary Screen
- User swipes to the left to access the different suggested itineraries
- Horizontal scroll: journey information box takes the whole screen, display more details about the journey
- User has a quick and full checkup of each of the itineraries
- Possibility to start the itinerary 2 ways: map or AR
Augmented Reality
- User can start a chosen itinerary using 2 displays: map and AR
- AR is the trendiest innovation in tech
- User Experience is more enjoyable
Motion Prototypes
Using Principle, I animated my prototypes in order to better understand the UX and to give a more realistic look to my design.
I implemented both horizontal and vertical scrolls in order to use the screen in its entirety and fully take advantage of the “empty space”. It also brings more dynamics to user’s interactions.
You can try my prototype here.
Conclusion
This study case was a real challenge as I aimed to improve this very common mobility product in a modern way. My product answers the “What’s the future of mobility?” question as it includes a simplified UX design as well as the newest technology: Augmented Reality.
What if AR was the solution to all means of mobility? It would directly give users route directions within its field of view. Users wouldn’t need complex maps to navigate but would instead use their eyes to observe the world.
This high-tech improvement is currently being developed by a California-based startup named Mojo Vision. It has recently released smart contact lenses which use AR to place information inside the wearer’s eyes — such as statistics and other geolocation data. This futuristic piece of tech could help people struggling with low visions through enhanced image overlays and could one day implement mobility services into its system.
In a near future, RATP could import its data into these lenses so that commuters instantly find their way in the city streets or métros while keeping their body upright and facing forward.
