Citymapper case study: designing a feature to solve the number of tickets you need to purchase when traveling in metropolitan cities

Urban mobility app

As a UX/UI Iron Hack’s Bootcamp student, I was challenged to design a feature for the urban mobility app City Mapper. This app helps you move from one place to another by showing you different multi-modal routes so you can select the one that works better for you depending on time or types of transport.

The main problem users face when traveling to metropolitan cities, is the different amount of public transport tickets they have to purchase to move from one point to another. Next, you will read the process I followed to find a solution for this.

Understanding the user

To understand the user experience when moving in metropolitan cities, I interviewed 5 Mexicans between the ages of 26 and 55 who traveled to New York City in December 2021 with a partner.

Based on learnings from The mom test book, I designed the following questions as a guide to gathering relevant information:

• What public transport did you use? (Including Uber/Didi)
• How did you choose what public transport to use? Did you use an app?
• How was your billing process? Did you use online methods or cash? Did you use an app, website o vendor machines?
• What was the best part of your experience using public transport in the city?
• What was the worst part of the experience using public transport in the city?

After hearing, taking notes, and analyzing the answers and stories, I got these insights:

Common pain points

• Not taking the correct transport because of lack of clarity in the instructions
• Not taking transport in time because the billing process didn’t work on time.
• Buy the wrong tickets because of lack of clarity in the vendor machines
• Not finding an available transport because of lack of scheduling information available

More insights

• I found what users value the most is security, certainty and time. They will pay if they feel they are receiving this.
• Most of the users bought a multi-journey ticket to avoid multiple payment moments and to save some money.
• Some of them told when they talked to locals found valuable information (hacks) about transport

The problem

We want to reduce the times a person takes the wrong transport or doesn’t take it at the right time when traveling abroad.

Solving the problem

It’s important to mention that as this is an exercise I opt for solutions without worrying about limitations of any type. Of course, this makes this exercise more agile :D

To solve the problem I brainstormed ideas to come up with different solutions:

Brainstorming

The Feature

After evaluating them, I decided to design a feature that helps people save time by paying from the app for all the tickets at once for a specific route. With this, they will avoid leading with different payment methods.

The main component of this feature is a “Buy all tickets” button that appears after you select a route. Then you pay and automatically you have access to all the QR codes that work as digital tickets.

This solution will work if the city implements a QR reader system in every station that lets City Mapper app connect to it.

Wireframing

Below is the paper prototype of this new feature (it’s based on the components and current design of City Mapper).

This is the user flow:

1. I select the mode in which I want the routes to be showed
2. I define my origin and destination
3. I select the route that fits better for me
4. I see the details of that route and decided to pay for the tickets I will need
5. I put my credit card information and in case I want to pay for my partner’s tickets I add a traveler and make the payment
6. Now I access my and my partner’s tickets beside specific station instructions (step)
7. When I need to use the ticket I just click on the ticket button. When I need to share my partner’s ticket, I click the share button. I didn’t go deeper in details, but when you click the share tickets button, you see an option to share all the tickets at once with your partner, instead of sharing them one by one.

Wireframing screens

Wireframing screens

Wireframing screens

Key Learnings throughout this process

During the process, I learned that talking to users in an open way leads you to go deeper and gather detailed information about how they felt when interacting with products and services in real life. In this exercise, I discovered that in the cases of traveling with a partner or family, usually there is one person that is in charge of the payments. This discovery let me add an option in the payment process where you can pay for others tickets, easily.

I saw the effect of brainstorming on paper. It gave me more freedom to think and diverge. It was very useful for me to come up with different ideas, see them on paper and evaluate and compare them with each other.