Citymapper, design thinking

Michelly Pérez
11 min readAug 25, 2020

What is Citymapper?

Citymapper is a mobile application for web mapping and public transport. It integrates information on all means of urban transport, especially the public. Also adds options to go on foot, by bike, or in shared transport systems (motorcycles, car or even scooters). It works for free as a mobile application or as a website on computers.

(Wikipedia)

This app was born as an alternative for google maps. It started in London with an experimentally five-kilometer journey connecting the Southwark and Black Friars neighborhoods in the center for two days. Green minibusses (their own), with a capacity of 30 people, offered USB charging points, and showed passengers information on their journey and where they should get off on digital screens.

Citymapper tells you where to get on the platform to take less time, or which way to leave to get to your destination earlier, among many other things.

(eldiario.es)

The goal of the app: to solve the problems of urban mobility by offering the quickest and cheapest public and private transport routes to their users.

The problem: Although it solves some of the main problems of the urban mobility, there is one pain point for many users: the different amount of public transport tickets the users have to purchase. Public transport tickets come in paper or plastic cards. Very often buying different public transport tickets is necessary to go from point A to B. The process of buying them can be very annoying (queues, vending machines that don’t work, etc.). Things like pricing or purchasing the correct ticket can become a real pain when you are abroad.

My task: To create a feature for this app that solves the pain of having to purchase different public transport tickets by different channels.

I. Empathize

Who is my audience

The audience to study will be 5 people between the ages of 20 and 50, who practice travelling often, use mobile applications daily and take public transportation. Adolescents are discarded for going more commonly with family members and not being related to decision-making during the experience. Ages above 50 are also discarded for showing less energy to travel and/or adventures, in addition to having their own vehicles and a distancing relationship with new technologies.

Interviews

Five subjects were interviewed with the following questions:

In your city…

  • Do you use public transportation?
  • How often do you use it?
  • Which method of public transportation do you use the most?
  • How do you pay for it?
  • Have you ever used an app as a guide to go from point A to B?
  • Which one?

If you are abroad…

  • Which method of transportation do you use?
  • How do you purchase your tickets?
  • How do you know which one to buy?
  • What is your experience with this subject?
  • What do you do if get the wrong ticket?
  • Have you used any alternative method of transportation?
  • How do you find out about it?
  • How do you plan your trip?

  • Is there anything you would like to change/improve on these apps?

Subjects:

  1. Woman, 26 years old, psychologist from Ecuador, living in Barcelona. Has lived in Boston.
  2. Men, 25 years old, psychologist from Mexico, living in Barcelona. Has lived in New York.
  3. Men 21 years old, statistical from Holland, has lived in Barcelona.
  4. Woman, 28 years old, lawyer from Ecuador, living in Barcelona.
  5. Woman, 26 years old, gastronome from Ecuador, living in Barcelona.

Results:

From de 5 subjects interviewed all use public transportation frequently and navigation apps, being Google Maps the number one in terms of popularity. If they are visiting a small city prefer to walk as a way to soak up the place. The most used transport is the metro. The users like employing bikes and taxi (in their city and abroad), this last one is choice when moving in a group; since is safer, comfier and the price is the same.

“If a have a problem I go to Saint Google, is my savior”

The purchase of tickets is done 50/50 in the bending machines or online (on the transport website or app that they already have, most users do not download any new app on their trips).

The way to acquire tickets varies depending on the city that they are and how it works in it. 60% of the time they visit places where know someone and are guided by this person.

90% ask other people or transport workers if they do not understand which ticket to buy. In general, they comment that the number of papers they end up with at the end of the trip is unnecessary, uncomfortable, and negative to the environment.

Everyone finds it problematic to return tickets that they have bought by mistake, 75% do not make the effort to return a ticket in case the price is reasonable.

“It is a complicated process and you want to enjoy your trip, not to waste time returning a ticket.”

90% of the subjects do not plan their trip in advance, they know a few specific places they want to see, and the rest it is solved with a quick online search.

In Google Maps they find as problems:

  • The accuracy of the times to get to places,
  • The information is not updated in real-time,
  • When the navigation starts it is complicated to follow,
  • The presentation of alternative transport methods are perceived as advertising and are directly discarded,
  • It is difficult to save places,
  • It could present more variants of how to get to the same place and that they were more efficient.

In Omio :

  • They suggest to add a search filter with returnable tickets,
  • As positive see that makes a price comparison.

When traveling, users change between apps depending on their needs. They start with a google search: “Best places to visit in X place”, then they review this place on Instagram or TripAdvisor, the comments and later they decided where to go.

Who is my client’s competition?: As a result of the interviews, we can see that Google Maps and Omio are mentioned as applications with functionality admired by users. Applications such as Maps.me, Bicing (Barcelona), Waze (when having a car), and Skyscanner are also mentioned but less frequently.

We can find all of the problems that users have with Google Maps, solved in Citymapper. Adding the filters that people ask for and the comparison of prices will give a boost to the app. But mostly needs good advertising so users can try it and fall in love with it.

II. Define

The main problem to solve, according to the users, is the purchasing of several public transport tickets by different channels. It will be unified as a feature for the application.

III. Ideate

In this section, we use the brainstorming method to get as many ideas as possible, to evaluate them later, find the best one, and make it real.

First Idea

Buying an online ticket that gives you a QR code that the metro machine is going to read and allows you to enter. Nowadays it’s common the contactless technology and this will be just like that.

  • The contactless technology is not implemented in all transportation in some you have to insert a card, but sooner or later it’s going to be that way.
  • This will delete the use of plastic and paper from tickets.
  • In case you bought the wrong ticket you will have the chance to cancel it in the next 10 minutes to the purchase, in the case that this time has expired you will ask for your money back with a help option.

Second Idea

You buy an online ticket that gives a QR code and is reviewd by the plublic transportation workers.

  • It is not possible to check everyone’s ticket because of the time. A sign alerting people that can be fined if traveling without a ticket can be helpful.
  • This will delete the use of plastic and paper from tickets.
  • In case you bought the wrong ticket you will have the chance to cancel it in the next 10 minutes to the purchase, in the case that this time has expired you will ask for your money back with a help option.

Third Idea

When you buy an online ticket you get a number code to introduce in the machine and lets you in.

  • This idea has the problem of changing the machines (expansive and will stop some public transportation in the making).
  • Is a way to spread COVID-19 for using something that several people will touch.
  • In case you bought the wrong ticket you will have the chance to cancel it in the next 10 minutes to the purchase, in the case that this time has expired you will ask for your money back with a help option.

Fourth Idea

Create a card that unifies all transportation, this card won’t be disposable. In case you run out of travels you will recharge it directly on the app. It will work with euros (or any other currency) as a debit card. When you arrive to the metro bus or other This will give you the chance of having a summary of all the money that you spent on public transportation monthly. It will be made from a material compatible with the existing machines either contactless or the ones that you have to introduce it, only it will have to be a resistant material since it will be rechargeable.

  • This method eliminates the problem of returning a wrong ticket.
  • If you are going, for example, from Sants Station to Sitges it will charge you the minimum when you enter and the rest depending on your exit.
  • With the update to the machines form the insertion of cards to the contactless type, it will be also useful.
  • Citymapper can eliminate its competitors by being the app that together with the public transport system launches this rechargeable card. Let’s call it Citymapper Card (CMC).
  • You will set the Card thru the app and get the physical one in your mail. Is important to have a physical card in case you run out of battery in your phone or you don’t have an smart phone.

“the simplest solution is almost always the best”

IV. Prototype

I decide to go with the Fourth Idea for its novelty approach. I add to the existing citymapper app a new button on the right bottom of the screen, it contains all the related information about the CMC.

Screen 1: A notice will appear telling the user that he/she/they do not own a CMC, also a button to get one.

Screen 2: When you tap get one it will appear a form to fill with personal information (your name, last name, e-mail, phone, address) and your credit card information. In the end, you will have a “get it” button, when you tap on it you will go to screen 3.

Screen 3: “Congrats this is your card”, below that you will see your card with your credit, then a button to charge your card “charge card” and a foot info telling you to expect your physical card via mail. In this step, you will get an email letting you know that you have a CMC. If you click on “charge card” you will go to screen 4.

Screen 4: “How much money do you want on your CMC” you will have a blank space to fill, if you tap on it the keyboard appears. You type the amount you need in your card and press “recharge”, this takes you to screen 5.

Screen 5: It is a notification that your card has been recharged with 5$, you tap “ok”.

Screen 6: This is the main screen, it’s the same with screen 3 but you don’t have the “congrats” or the info about the physical card. You will use this screen to pay in the public transportation, it will work as the apple pay you will enter your fingerprint and allow the payment.

Screen 6.1: When you pay you will get this screen as a notification, after this, it will appear screen 6.2.

Screen 6.2: This screen appears after you pay and if you tap your card on screen 6. Here you have all your latest transactions (date, public transport, country, discount money) with the chance to go deeper into the information. You have settings, a button “recharge” button (it will take you to screen 4), and a “done” option to go to your main screen.

Screen 6.2.1: If you more info of your transaction you tap on the arrow and go here. You will know the amount, the hour, the status, with the card that you paid, and a “report an issue” link in case anything goes wrong that takes you to the Citymapper web page.

Settings Screen: You appear here when you tap on the settings on screen 6.2. You have data, recharges, monthly expenses, theft or lost.

Data Screen: Here appears all the info that you gave and the chance to edit.

Recharges Screen: This shows you the date, the amount, and the card that you use.

Data Screen 1: Here you choose if you want to get your verification code to change your info via “e-mail” or “phone” as button that you can tap. Also, have a link to get in contact with citymapper in case you don’t have access to any of the previous phone and e-mail.

Data Screen 2: You have to fill the blank spaces with the code you get and have an “ok” button.

Data Screen 3: It shows you all your info and gives you the chance to ok or cancel.

Monthly Expenses Screen: The amount that you have to consume appears and below all the transactions you can get the specifics by tapping in the arrow, this takes you to 6.2.1 screen.

Theft or Lost Screen: Gives you the chance to cancel the card and get in contact with Citymapper with a “call” and “cancel” buttons. When you tap on “call” you go to the Citymappar phone number. If you tap on “cancel” appears a pop-up tab “Are you sure?” with the option of “yes” or “no”. If you type “no” you go back; if you tap “yes” screen 1.1.

Screen 1.1: “Your card has been canceled”, “You don’t have a CMC” and a “get one” button.

What I learned

Through this challenge, I learned how important the user is for the making of functional applications. The process of interviewing and doing it correctly (at different times I found myself doing the bad interview examples) is critical to obtaining a real result and not one that is biased by our experience. I found it difficult to filter the information collected: at times I had doubts (which I hope to solve during the Bootcamp), about whether the user’s demands can / should all be satisfied in the same app or if some should be discarded and keep the most important ones, with the ideas raised, I had trouble deciding the most appropriate. I experimented with skills that I will improve with practice and guidance from teachers, but I loved learning about them and incorporating them into my thinking. I highly recommend talking to people around you, this gives you the chance of finding problems that you did not even consider, that is why I think that to make a quality app you need teams with various points of view.

Thanks for reading!

--

--

Michelly Pérez

Hello! I’m a Cuban-Spanish living in Barcelona. I study graphic design and currently learning UX/UI design in Ironhack’s bootcamp. Thanks for reading 😊.