Ironhack Pre-course Work, challenge 1 | Design Thinking | Citymapper app

Annemijn Pikaar
5 min readApr 30, 2021

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.

The issue and the task

Although the current product of CityMapper already solves some of the main problems of the urban mobility, there is one pain point for many users: the impossibility to buy tickets when consulting a route on citymapper.

The task? To solve the problem! Of course ;-) Find a feature for the Citymapper app that will make it possible to directly buy the right tickets for the right price. To complete the task I was asked to use the human-centered approach, also known as “Design Thinking”.

Design thinking

But first, what is Design Thinking? Design thinking, at its core, is a protocol for solving complex problems and discovering new opportunities, by devising desirable solutions for clients/users.

Source: The Argonauts

The main objective of this 5 step methodology is to solve complex problems focusing on the user, understanding and attending to its needs, generating ideas, rapid prototyping a possible solution, and then testing it. This is an iterative process — meaning that it is a series of steps that you repeat, tweaking and improving your product with each cycle. In practical terms: practice makes perfect.

Step 1: Empathize

Initial questions

I started by focusing the following questions in order to better frame possible solutions.

  • What problem are you solving? For this specific case: the impossibility to buy tickets when consulting a route on Citymapper. In general: When someone is commuting, make sure they have all features easily and smoothly accessible within one app.
  • Who is your audience? Daily and occasional commuters as well as urban travelers, male and female, between 15 to 60 years old
  • Who is your client’s competition? Google Maps, Apple Maps (and NS App and 9292OV for the Dutch market specifically).
  • What’s the tone/feeling? For the current problem, users are irritated, stressed and scared (of getting lost or fare dodging).

Interviews

I then proceeded to interview 5 persons, who are either regularly commuting through public transport in Utrecht, Amsterdam or Rotterdam (the three biggest cities in the Netherlands) and usually use public transportation when they’re on a city trip in a foreign country. The three key questions were as follows:

  • What kind of apps do you use when you’re commuting?
  • What’s your overall experience with commuting and public transport?
  • How do you normally get your tickets (vending machine, online, any other way)?

Step 2 — Define

Findings

There were a few issues or pain points that where pointed out by all interviewees.

  1. Time: When you have to be in time for a specific train or bus, you don’t want to end up in an enormous queue waiting for a possibility to buy a ticket (let alone finding a vending machine in a station where you can stand in line).
  2. Ease: You have to know where you can buy a ticket, what it costs and what you’re options are in the same place (in one app, at one sign in the train hall way etc). Besides, e-tickets where preferred over loose printed tickets.

Problem statement

The main problem we need to solve is: make it possible to know where and how to buy tickets in a fast, cheap and easy way.

Step 3— Ideate

  • Directly pay in the app: If you look up a specific route, you are directly able to buy a ticket for that route with e.g. iDeal or Creditcard.
  • Option to buy a Citymapper card: You buy an online Citymapper card in the app, the user tops the credit before travelling and automatically takes the money from the balance when a ticket is bought and generated through the app.
  • (Overall) Simplicity: There are now so many options in the app, so many buttons, so many choices — it makes it impossible to know where to look and what to pick.

Step 4 — Prototype

Prototyping for option A: directly paying in the app

Option A: Directly pay in the app

  1. You look up a specific route from location A to destination B.
  2. You receive several options, and you see the duration and price for them.
  3. You select an option and you see the details per part of the trip (e.g. a bus part, a train part etc). You select the options you want to buy a ticket for.
  4. You see the total price and payment options, you select your payment method and you pay.
  5. You see an overview of what you bought and a QR code for the trip.
  6. In the menu, you can see a tickets button for an overview of your QR codes.
Prototyping for option B: using a Citymapper Wallet

Option B: Use a Citymapper Wallet

  1. Your log in screen. In order to use your wallet, you have to be logged in.
  2. You look up a specific route from location A to destination B.
  3. You receive several options, and you see the duration and price for them. You select an option!
  4. You see the total price and payment options for the option you choose. You choose to pay with your Citymapper Wallet.
  5. You see your current wallet balance, and you can choose to pay directly or top it up.
  6. Once you click on pay with your wallet, you succeed and you can click to see your QR code.
  7. The screen with the final QR code!

Conclusion

During this exercise I quickly realized: good things take time — and multiple people. I’ve made pages full of sketches — and I could have gone through with it for days, haha. Besides, I think it’s always good to have multiple views on a specific project, and work with people who are actually using a product already.

Now, I’m ready to head to the store to buy a bigger note book and better fineliners.

See you soon 👋🏼

--

--

Annemijn Pikaar

Creative digital marketeer, in the running towards becoming an UX/UI professional.