UX/UI Case Study — City Transportation App

The city-wide transport network of Nantes, France, known as Tan has an official application for both iOS and Android smartphone users, allowing residents to manage and plan their journeys around the city.

From this centralized app, users have access to information on arrival and departure times of 54 bus lines, 4 tram lines and various other transportation routes, including school transports, airport shuttles and even a small fleet
of ferries.

The Problem

Tan’s official application suffers from 3 core issues:

1. Slow & difficult usability
2. Outdated visual design
3. A lack of vital features to assist users in their travel around the city

The Goal

In response to these issues, a redesign of the entire in-app experience was required. Three main goals were defined:

1. Improve UX design, making use of more widely-known UX patterns to produce smoother user flow between core functions of the application in the order they’re most often utilised.
2. Redesign the visual appearance of the interface to bring it in-line with modern smartphone applications.
3. Implement additional features to provide the user with useful information to assist in planning their movements and keeping the user informed during them.

The Research

Question 1: How are people using the app?

Before being able to determine pain points within the application, it was necessary to first understand exactly how users interact with the app, and the situations & scenarios in which they use it.

By talking to users of the service, I was able to determine 2 main ways people use the app:

1. Checking arrival times at their nearest stop
2. Plotting a route to reach a new location

With this information, it becomes easier to focus on and analyse the most used features within the service.

Question 2: What specific issues frustrate users?

To understand the most prevalent issues users face when using the existing application, I consulted daily users of the service.

“It’s clunky. Getting information quickly is difficult, especially when in a rush.”

“Getting to a new, unknown location is difficult, you need to keep track of stops to not get lost.”

Comments left on the store page of the app proved to be an extremely valuable source of feedback on the application’s shortcomings.

Reviews translated from French

From these examples among others, a handful of recurring complaints came up. These included the lack of an interactive map, no functionality to save favourite stops, and unnecessary/invalid suggestions in search fields.

Previous Search, Map & Favourite features

The UX Analysis

With the feedback gained from the research, pain points throughout the application become evident.

The design of the existing application left a lot to be desired. The UI was a mix of multiple Android design systems, from a mix of Kit-Kat UI, through to Material Design inspired components. This interface was identical across both iOS and Android. Usability improvements aside, a coherent, modern visual style would have to be implemented.

Before the process of wireframing, it can be useful to map out the surface level pages of the application to get a global view of the navigation system throughout the app.

Before

Immediately this map provides valuable insight into the root of a number of usability weaknesses. Across the entire application, we see only 1 instance of a connection between one major section and another (Time Grid > New Journey). This proved to be the largest issue with regard to smooth user flow when completing a task.

Previous Process

For example, a user wishing to get to a new location and purchase a ticket for the journey would have to first open the journey planner page, enter the exact name of the stop they wish to get to, and the one from which they wish to leave. From there, they would have to retain the steps required to reach the location, then exit out of the journey to purchase the appropriate mTicket.

After

With this new approach, each major section is interconnected, providing a smoother user experience between sections for each step of the journey planning process. Now, the user is able to purchase an mTicket directly from the journey breakdown screen, without losing the details of the journey.

New Process

Having each page have a logical flow into another reduces the time it takes the user to complete basic tasks, a particularly important point due to many users relying on the app when in a rush, often with little time before the next bus or tram departure.

The Ideation

Now armed with user feedback and a better understanding of the underlying issues within the existing app, I began sketching wireframes to respond to the core problems.

From wireframe to final product, many screens underwent large modifications

Sketching rapidly on paper is useful to get every idea you have in mind laid out on paper, without committing to a single design produced in high-fidelity.

After sketching numerous low-fidelity wireframes, allowing to visualise multiple solutions to a given problem, I proceeded to draft a high-fidelity recreation in Sketch.

The Solutions

Pain Point #1: Landing Screen

While not a problem in itself, the landing screen presents an opportunity to improve fast access to most commonly used features, such as destination search & favourite journeys. The previous screen only increased time it took users to access vital functions.

Proposed Solutions:

1. Replace landing screen with a more familiar “Home” screen
2. Bring destination search & favourite journeys to home screen
3. Provide a live, interactive map displaying the user’s location and nearby transports.

Pain Point #2: Search

Search results previously listed destinations all around the country, while Tan services only the city of Nantes. Furthermore, these results are very difficult to press accurately, due to their extremely small line height. Destination should take priority over departure location, as often, the “Locate Me” feature can be used automatically. By reordering the text fields to destination before departure location, only users wishing to pick a location different to their nearest stop need complete the second field.

Proposed Solutions:

1. Remove unnecessary locations from search list
2. Improve readability of results with increased line height
3. Place destination entry field before departure location field
4. Place “back” button in top left corner, rather than relying on selecting a navigation menu element to return to previous screen

Pain Point #3: Journey Details

For travellers making a new journey for the first time, the journey details page must convey all necessary information clearly. The previous iteration featured a difficult to understand list of steps, using arrow icons to mean both “Go To” and “Arrives At”, leading to misunderstandings with users unfamiliar with the route. To aid this further, an interactive map was included to provide a visual representation of the journey.

Buttons to access the mTicket wallet/store and the new live journey feature were also added to allow users to access other core features without losing the results of their route search.

Proposed Solutions:

1. Implement interactive map
2. Rearrange journey information, improving information hierarchy
3. Include mTicket and Active Journey feature buttons
4. Place “back” button in top left corner, rather than relying on selecting a navigation menu element to return to previous screen

Pain Point #4: Stations

The station & stop list, while already quite readable, required a better method to view the user’s favourite stops, which they need to access regularly.

Proposed Solutions:

1. Bring favourite stops to foreground, removing the corner star icon
2. Include information for upcoming departures on favourite stop cards

Pain Point #5: Lack of Travel Companion

In the existing Tan app, once the user had checked an arrival time or searched the navigation information for their desired route, they were alone to complete the journey without the help of the application.

In response to this, I conceptualised additional features to aid the user in tracking their bus or tram along its path. This took two forms:

1. Line Tracker

Tram & Bus Tracker

From the Journey Details, Favourite Routes or Stations page, the user has access to a live tracker of the upcoming tram or bus on the selected line. This allows the user to better time their arrival at a given stop, and to increase the user’s trust of the displayed arrival and departure times.

2. Active Journey Companion

Active Journey

For first time travellers of a given route, it can be daunting to keep track of unfamiliar stops in an unfamiliar location. With the proposed journey companion feature, users are able to watch a live view of their position along the route on a map, with indications provided for remaining time and number of stops left on their journey.

This allows the user to feel more confident in their movement while travelling to new locations around the city by providing a sense of “hand-holding” in the form of live visual feedback along the length of the journey.

Conclusion

This project provided a learning experience in gathering user feedback through multiple channels to guide the design process of a user-centered product.

With a travel application of this kind, it’s important for the user to feel in control and informed at all times, even in unfamiliar locations. It is therefore the role of the product -and as such, the designer- to provide the necessary information to the user in such a way that they at no point feel overwhelmed throughout their journey, but also never unsure of their next step.

Thank you for reading! If you enjoyed this article, don’t forget to leave it a clap 👏🏻, it helps immensely! Also, be sure to leave your valuable feedback below, I’d love to chat!