UX/UI Challenge #1: CITYMAPPER goes all in(…eventually)

Magdalena Steinlein
6 min readMar 8, 2021

--

“Excuse me, could you help me for a sec?” /© Markus Spiske

Introduction

Imagine being at a City-trip abroad -let's say Paris- and it is your first day. You just had a delicious breakfast at your accommodation and you are now eager to explore the city of love and all its charming and not-so-charming areas. You most likely will take the public transportation, right? It is so much more fun exploring the city using the subway and observing people. At least it's for me. Standing in front of a ticket machine or even using an app in a foreign country is always..well.. kind of confusing.

Me standing in front of a ticket machine in Tokio

That's what my first challenge for the UX/UI Ironhack bootcamp Pre-work is about: Analyzing and improving the payment methods of the public transportation app called Citymapper.

According to Wikipedia

“Citymapper is a public transit app and mapping service which displays transport options, usually with live timing, between any two locations in a supported city. It integrates data for all urban modes of transport, including walking, cycling and driving, in addition to public transport. It is free of charge to users, and is supported by a mobile app on devices such as mobile phones, and by an Internet website.”

What is the main problem that I try to solve?

When I first used the app, I was surprised how well it worked and how similar it is compared to GoogleMaps. However the pain point is, that the user can't purchase the ticket he needs, directly in the app. To purchase the ticket, the user always has to leave the app and use a different one. The only alternative he has, is to buy a ticket from a vending machine or counter, which can be an annoying and time consuming process. Especially when your abroad, understanding the transportation system and knowing which ticket to purchase can be complicated.
The challenge is to solve the pain of having to buy tickets through different channels by creating a feature for this app.

Empathize

In order to understand the users and their needs, I conducted five interviews with people from the age of 30 to 40 years, who use public transportation in Berlin every day. To get from A to B, everyone I interviewed used the Berlin public transportation app called BVG. Surprisingly, they were pretty happy with its features and found their experience intuitive and understandable. Two of them were provided by their employer with an annual ticket. They even would pay for the ticket themselves, as they felt that the prices were fair. All the interviewees said, that they usually wouldn't change their means of transportation. They either travel from A to B by using the public transportation system, use a car sharing provider or simply drive by bike.

When asked which means of transportation they use in a city abroad, they all mentioned, that most of them preferred to use the public transportation to explore a city, even if it is easy to get lost. To solve this problem, they would book tickets online beforehand or ask locals to help them. Some of them, also would watch youtube tutorials to get prepared. Three of them tried to download an app, but had even bigger problems finding and selecting the correct ticket.

Define

All of my interviewees felt comfortable using the app of the BVG for the public transportation system in Berlin. The problem was using and orientating themselves in a new and unknown public transportation system abroad.

Ideate

“Is the airport in zone B or C?”

I found two solutions for the problem:

First of all, Citymapper should start collaborating with other public transportation system such as BVG (Berliner Verkehrsbetriebe). This would facilitate the process of purchasing a ticket within the Citymapper app. It would save time because the customer would not need to download a specific app, which sometimes does not have the language the user speaks.
Also there should be tourist-friendly ticket-options, like a 7-days- ticket, group-tickets or 24-hour-tickets. All those tickets and even the single ticket shouldn't be limited to certain zones within the city.

In addition to that I asked myself why do we actually need separate tickets? Why just have this app and pay a fare for the amount of time you stay at this city. There you go! You would have a single QR-Code on your app and you could use every public transportation day and night, you hop on and off. The map feature of the app would show you the way and you are good to go.

Prototype

For my prototype I decided to go along with my first idea, which would give the user the flexibility to decide wether to purchase a ticket for only one day or for a longer period of time.

I kind of altered the homescreen, because frankly, I found the original homescreen somewhat of too distracting. I decided to go with three options:

1.Fast Route: The user might have to change several times during his journey , but will reach his destination earlier.

2.Easy Route: The user reaches his destination without changing, even if this means a slightly longer trip.

3.Cheap Route: Shows the user how to reach his destination at little cost as possible: by taking the bike, subway or even even by walking.

In my user flow the user decides to take the fastest route. This leads him to several routes and here he would also go with the first choice. The entire route and possible changes and other informations are now displayed. He is now able to press either the Go!-button to start the navigation (in case he already has a ticket or does not need one) or press the button next to it to purchase a ticket. The following step is all about choosing a ticket-option. I tried to keep it simple in this first step. In my user flow the user selects the single ticket for 2.90 €. The amount or a reduced fare can be customized in the next pop-up window. The last step is all about the payment which, in my opinion, needs to provide a range of payment methods like Paypal, Applepay, Visa or even else.

This could be us!

What I learned from this challenge

All of the people I did interviewed didn't found it awkward or annoying at all switching to different apps when using public transportation, taxi, car-sharing providers or even when looking for a scooter. They were used to ask locals when purchasing a ticket abroad or even watched youtube tutorials. They got used to the fact, that there is no such thing as one app fits all. That reminded me of Marty Cagan, founder of the Silicon Valley Product Group who said in a keynote:

“People think they can learn what to build from our customers, but of course, you can’t, in technology especially. Number one, because customers don’t know what’s possible because technology moves so fast. Our job is to know what’s possible. Customers don’t — they think they do but they don’t. They define the world based on what they already understand we can do. Number two, and this is more profound, because it applies to all of us: none of us know what we want until after we see it

Wouldn't it be a better world if Citymapper would find a way to collaborate with the local transportation systems in order to make exploring the city much easier, environmental- friendly and approachable even from people who have a hard time using their smartphones like my grandmother.

--

--

Magdalena Steinlein

I'm currently studying UX/UI Design at Ironhack Campus Berlin