Case study :Add payment feature to Citymapper App

Meera Prakash
3 min readMar 17, 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 problem

Citymapper is a great app which solves many problems of urban mobility, except that user has no option to pay or book 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. And the process of buying these tickets can be very annoying (queues, vending machines that don’t work, etc).

Finally, things like pricing or purchasing the correct ticket can become a real pain when you are abroad.

Empathize

  • Observe. Identify how the current system works and where the pain points are. Visit competitor apps to understand possibilities.
  • Analyze. Brainstorm solutions that could generate and document.
  • Interview. Talk with user who are facing this issue in daily life. This has a massive impact, when a user is a regular traveler, they would have more insights than the designer.

Observation

Citymapper started in 2011 in London, which in 58 cities and metropolitan areas was covered. Since it is covering geometrically different areas there are technical bottlenecks of integrating app with local public transport facility. Assumption is most of the urban areas are now covered by online ticketing app.

Analysis

In order to make the ticketing system paper free, Citymapper has to have an integration with local public transport system. Another approach would be having city representatives who can manage ticketing in their area.

Interview

Now comes the fun part. Identify the users and ask for their preferences. Typically interviewing around 5 users gets us enough insights to better solutions.

The questions included here were:

  1. How often they use public transport?
  2. Difficulties faced to get tickets?
  3. Their insights on how digitalization can help ticketing system
  4. How comfortable they are using a wallet on mobile apps or even to use credit cards
  5. Which modes of travel they prefer?
  6. Their service charge affordability?
  7. Difficulties they face with current payment apps

Define

  1. 70% of the users are comfortable with digital payment options.
  2. Vending machine in a new city is confusing, many of them doesn’t accept cards.
  3. There is a need to know the ticket price in home currency to quickly check affordability.
  4. User would like to know from where they can purchase physical tickets without much chaos.
  5. User would like to have flexible ticket options such as pay for only one ticket, day ticket or valid for certain time/date range.
  6. Only cash wallet option is not welcomed.
  7. User would like to have an active customer service facility.
  8. While pricing , user would like to know cheap and fastest options separately.

Ideate

The solution to come up should include most of the user needs. And this has to come close to technical and economical feasibility of the business. Digital payment is inevitable in the solution and most of the users has a mind map on how payment system works. The goal is to ease the flow.

  1. User should be able to see best, cheap and fast pricing options
  2. User should be able to change currency.
  3. User should be able to book more than 1 ticket.
  4. Design should include cases where online booking is not available.
  5. User could use the App wallet feature with preloaded money, which makes the payment lighting fast (minimizing the need to pull out cards for information like CVV, etc.. )
  6. Support for all mainstream payment mechanisms based on location.
  7. User will be having a ticket wallet which shows booked ticket details.
  8. User would have cancel and edit options.

Prototype

The prototyping phase assumes that user already selected A and B. The following screen designs shows how they can pay for it.

Personal Takeaways

This project helped me appreciate how much work goes behind the stunning UIs I have experienced. I enjoyed mostly the Empathy part of the work, which has the most impact on design thinking. I realized that the assumptions designers has in building a product is the weakest point in successful product.

--

--

Meera Prakash

Software Engineer, Startup enthusiast , Product Designer