Best Mobile User Experience Design Practices for Public Transportation Apps
Travel and local apps are the fourth most popular category in Google Play Store, beating even social, music, and photography app categories. This category covers maps, navigation, flight and hotel booking services, along with schedules, rides, and virtual tickets. To get to the top of the popularity list, you have to make your public transportation app competitive – meaning more feature-packed and simply relevant to the end-user. And if it’s a local app, created for a certain group in a certain region, it should consistently solve a particular problem. This is a solution provided by user-experience design experts. By developing a public transportation app for Niftie, we at AltexSoft have accumulated the best tips and tricks on designing with users in mind. Further in the article we’ll share our knowledge with you and illustrate it with best industry examples.
Based on citizens’ needs, we can break an app’s functionality down into several categories, starting from the user’s first encounter with the app.
After downloading a new app, a person needs guidance on how to use it. Engage a user right from a home screen, displaying and explaining the options. We talked more about different stages of user interaction with an app in our general list of best mobile UX practices. There are several ways to design a transportation app’s home page.
Add guidance by offering to create a test route. One of the ways to help first-timers is to walk them through an app by showing the main functions. Help them get started and suggest building the first route from their current location. While this action requires a user’s permission to use their location, direct them to settings via a pop-up message. Citymapper offers a sample place, helping a user to build a test route using the app.
Display current navigation on a map screen. If your app’s homepage is a city map, locate users on the map, and display places and transportation stations. People will likely download an app right when they need it most, so support their need immediately. Check how this option looks in Transit App on the screen below with bike renting stations around a user’s location.
Transit App navigation
Tailor UI and the color palette to the city guide. The look of an app is as vital as the functionality. An app’s UI includes all aspects related to visual appearance, such as logo, color palette, and the icon style, with examples and available use cases collected in a style guide. If the look of an app resembles a city’s spirit, it reminds a user of it, making the overall experience more pleasant. Let’s look at the redesign case of TMB app, a Barcelona public transportation app. A designer takes inspiration from the city’s hallmarks: icons and colors inspired by Barcelona’s architecture and its distinctive tiles.
A redesigned logo of TMB
Source: Pavithra Krishnan
2. Maps and schedules
When you’re designing an app for people who will actively use the map, pay close attention to how your mapping function performs.
Show information on disruptions. A traffic jam or a road closed for repair can disrupt a trip and lead to unwanted delays. Both people behind the wheel and passengers can use up-to-date info to correct the route plan.
RATP map with road situation
Allow users to contribute information. Transportation agencies usually generate and distribute General Transit Feed Specification (GTFS), allowing apps to update information on schedules and disruptions in real time. But not all transportation agencies have this feature, especially when it serves small cities. In this case, you can allow for crowd-sourced data to provide more info about city traffic and disruptions. Give the users an opportunity to share information about traffic jams, road lighting, and disruptions by integrating GPS and public transportation APIs. They allow your users to report problematic situations by pressing a button in an application. For example, in Waze users can choose a type of disruption, specify it, and add a photo with a description.
Waze disruption report
Display several versions of a map. Your user might want to see the satellite version of a map to search for familiar locations or important sights. EasyWay app uses Google Maps API and shows the map in two versions with live traffic.
EasyWay satellite map
Suggest the fastest routes. Google Maps shows how long it takes to reach a location using different means of transportation. Apply this feature to let a user find the shortest way to a destination. Paris transportation app RATP allows users to choose the route options in advance and find the best among those suggested.
Route options in RATP : Subway Paris
Allow offline access. Offline maps are necessary for users who don’t always have access to the internet, especially tourists. Add offline maps that can be downloaded while online. For example, the Berlin public transportation app BVG FahrInfo Plus has several maps of various transportation means of transportation that can be used offline. This separation ensures that people download just the right amount of data without cluttering their phones.
Offline maps in BVG FahrInfo Plus
Add arrival/departure information to means of transport. With this feature, users can see the estimated time of arrival to a destination point. Some apps, like the Berlin public transportation app, show the scheduling information next to the stations on the route, including types of transport. In the picture you can see how the app displays multiple connections and the schedule. Real-time information on schedules can be taken from GTFS Realtime feeds, via APIs provided by transportation operators or aggregators (like WhereIsMyTransport, Transitland Datastore API, MTA API).
Departure and arrival information in BVG FahrInfo Plus
Tourists usually don’t have much time (and honestly – the desire) to learn about all transportation options in the city. So, it makes sense to direct them to sights, museums, hotels, or cafes.
Suggest the places nearby. Apps for tourists, or any transportation apps that are supposed to be used by tourists, must display local attractions or any other places of importance (like malls, hotels, etc.) In case you’re designing a tourist app, tourist attractions must be highlighted among the other texts. Take a look at the London Travel Guide and the way they display local attractions near underground stops.
List the lines of public transportation. Big cities have a number of different ways of getting around with multiple lines. To help users find a necessary line and see the schedule, add types of transport and list them. Look how Moovit lists the types of public transport with their routes and schedule. Data about lines, stops, routes, and even fares can be sourced in GTFS from location-specific agencies.
Moovit list of public transportation lines in Vienna
Add emergency and services information. This information can be divided into two classes: city emergency and transportation services. But it is not always limited to them. For example, RATP has a more advanced feature: You can report unclean areas in public transport by uploading a photo and mentioning the station so that a service can deal with them.
4. Trip planning and routes
Building complex routes is the main reason why people want to use a city-focused app. Either way, they would just save the metro map or simply use a Google Maps app. These routes should be simple, informational, and filtered by time, accessibility, or personal preference.
Include connections of different means of transportation. Often, travelers would have to use a few different modes of transportation, i.e. change buses or reach a subway station by bike. Add an opportunity to see possible connections, as Rejseplanen, a Danish trip planner. Here, you can set a starting point and the destination, receive a list of all means of transportation, including transfers with schedules. This information is integrated via the Google Transit API or the Public Transit API.
Rejseplanen trip planning feature
Enumerate modes of transportation available for tracking. Give users freedom of choice by offering them filters with available transportation types. This feature enables users to eliminate the cognitive load and show more relevant information on the map. For example, Transit App allows choosing from many kinds of conveyance around the city, so a user can decide which are relevant.
Transportation modes in Transit App
Provide accessibility information. Disabled people need some extra information while planning a trip: subway stations equipped with elevators, ramps, accessible restrooms, notifications on problematic areas in a city, like roads being repaired. Route4U is an app, designed for people with disabilities. The map displays the level of accessibility for every street, difficult places to get around, and stations. Also, you can get the information about restroom accessibility. Route4U collects information through crowdsourcing. Local businesses and brands are encouraged to share information on the accessibility of their buildings and places around them. Volunteers and users can report it as well, earning points and badges in the app. Crowdsourcing is not the only way to integrate it – Google provides Maps SDK with accessibility information.
Enable saved locations and routes. Most of the locals use the same routes day-to-day. So, it’s convenient to allow for saving a route from home to work, for example. Also, a saved location saves the time required to type an address while building a route.
Saved locations in Rejseplanen
Allow for switching between imperial and metric systems. Measurement systems in countries and regions can differ, so some tourists might not know how to translate yards to meters and vice versa. To adapt them, add a unit-system-switch feature. In the same vein, provide an opportunity to toggle between different time formats.
Settings of Transit App
Feature route sharing. For safety reasons, many car-sharing and taxi apps allow passengers to share information about a vehicle, like registration plate, and a GPS location, with family and friends. But also you can plan your itinerary and share it as a reminder to yourself or another person. Look how Rejseplanen applies this option. As soon as you have built your route, you can share it via SMS, email, or add the trip to the calendar if you’re planning in advance.
Share connection in Rejseplanen
People are rightfully concerned about their privacy when they connect a card to another app to make an online payment. That’s why this process should be simple, flexible, and solve the problem your app is trying to deal with.
Feature a ticketing option. If a city has an integrated system of public transport with a single ticket and it’s possible to buy a ticket online, an app should offer this option. First, add all the available information on ticket costs, like fees for different age groups (adults, children, young people). Stockholm Lokaltrafik has three types of city tickets and allows travelers to purchase them in-app. All purchased tickets are saved in the app and can be restored in case the device was lost or stolen. Also, in the app, you can track how much time is left for a ticket to be valid.
Ticket purchase in Stockholm Lokaltrafik app
Enable various payment methods. Travelers have their payment preferences. The more of them you offer, the more people will keep using it. Give users all possible payment methods. Add an international banking payment feature, like Visa or MasterCard, as well as card scanning in Apple Pay and Google Pay.
Save time providing card scanning. Typing all card details manually is a tiresome process, especially when traveling on public transportation. Card scanning is the option that allows a user to skip that. Opal Travel, an Australian transportation app, provides a card scanning option and saves the information in the app. While you can build it from scratch, Card.io, for instance, integrates this feature into apps through Android and iOS SDKs.
Opal Travel scan card
6. Vehicle tracking
Let’s imagine a situation when you hurry to the airport or need to get to a meeting on time. You’re worried and want to know whether your bus or ride-share is approaching. Applying this feature in a transportation app, you will be able to see how far away the vehicle is and determine your ETA.
Enable live vehicle tracking. It’s a useful feature for passengers who are waiting for their car or are worried about missing a ride. However, it can also be applied within a public transportation app, where passengers want to track buses or trains.
Add a filter for different types of vehicles. If a transportation app can offer a number of transportation modes, the map can become a confusing mess of moving dots and vehicle icons. Allow users to exclude trams or subways if they don’t use them. EasyWay has a large variety of vehicles to track. There are settings that enable users to choose which of them to display on a map.
EasyWay transport filter
Notify users when it’s time to board their transportation and alert them by sending a message or an alert sound. It’s best to make this feature optional and allow users to customize it in settings. According to Infographic by Invesp Landing page Optimization Company, over 30 percent of users who get 6-10 notifications from an app per day stop using the app. The main notifications are related to schedule and road situation and appear as pop-up messages or sounds.
Provide timing notifications. This feature allows user notifications when their transportation is approaching so that they can hurry to the station. It appears in advance, alerting a person that the desired vehicle will arrive in a certain period of time.
Alert notification in Rejseplanen
Notify during the trip. Another type of notification is related to routes. It shows users their current location en route to the destination and displays how much time is left to the end of the trip. Such notifications allow users to track the itinerary. It also informs them when they are approaching the station, like Google Maps does.
Google Maps allow users to stay on track while reading or scrolling
Provide disruption and safety notifications. These notifications alert users to unsafe areas that can appear en route, weather alerts, or traffic jams in a city. Having this information, users can change the itinerary to avoid delays.
8. Customer retention
If your app is convenient to use and has some specific features that distinguish it from the rest of products with similar features, then you have done a great job. However, you still need to retain the users. Here are some tips on how to do it.
Apply gamification strategies to attract people to use your app more. If you turn a common transfer or a trip planning activity into an exciting quest, awarded with points, your users will be more engaged. Look at the Moovit example: They have a ranking system for the users who travel more.
Ranking system in Moovit
Boost engagement by adding loyalty program elements. You can increase customer loyalty in transportation apps that offer purchases or in-app payments by offering cumulative discounts, free rides/tickets, or coupons.
Create widgets to display information on the screen. Plenty of transportation apps have widgets that display schedules or nearby options instead of pop-up notifications. For example, Transit app’s widget displays nearby transportation and allows a user to change directions.
Transit app widgets for iOS and Android
What makes a transportation app different from the rest types of applications is the context in which it’s used. Consequently, you should take into account the fact that it assists people in exploring unknown cities and find new ways to navigate places on the go. A mobile app UX must take into account that different user groups will be putting the app to use. Local users need notifications and saved places in their everyday commute. Tourists need to find the locations they want to visit, as well as the fastest ways to reach them. In designing the app, pay special attention to maps and schedules, payment modes, and notifications.