Citymapper and Design Thinking

Design Thinking first Ironhack’s challenge: to create a feature for Citymapper that solves the pain of purchasing different public transport tickets by other channels.

The Introduction

Citymapper is a public transit app and mapping service that displays transport options, usually with live timing, between two locations in a supported city. It integrates data for all urban modes of transport, including walking, cycling and driving, in addition to public transportation.

Citymapper started in 2011 in London, which it calls “the world’s most historic and iconic public transport city”.

The Design Thinking Process

nngroup.com

1. EMPATHISE

Although the current product of Citymapper already solves many of the main problems of urban mobility, one glaring pain point remains 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 separate public transport tickets is necessary to go from point A to B. Buying tickets can be cumbersome (queues, vending machines that do not work). Moreover, fundamental hurdles, like pricing and purchasing, are amplified when abroad or using an unfamiliar transport system.

To better understand and empathise with the user’s point of view when purchasing tickets while travelling, we needed to research the app itself and interview some people with the same characteristics as our audience.

  1. Whom are we solving for? Our user: any person is travelling to anywhere, between 18 and 70 years old. Here we need to consider how younger people are more familiar with tech than older people. Also, younger people are more concerned about eco-friendly transportation and ticketing, meaning electric vehicles and online ticketing.
  2. Our client’s competition. Google Maps, Moovit, and leading public transport companies in Barcelona: RENFE, FGC, within many others.
  3. What are the tone and feeling? Overwhelming and confusing.
  • Many options to choose from. Instead of only showing the best and cheapest options.
  • In the first screen of the transportation options, the approximate price is not appearing.
  • The language barrier, the app is not translated into other languages.
  • There is not a possibility to buy tickets from the app.
  • This “more or less” symbol of the approximate time it is a bit confusing.
  • The app does not show the time left for the next transport to arrive.

After I answered these primary questions, I conducted five interviews with people of diverse backgrounds who lived in different cities (more prosperous and variated knowledge from them) and have utilised various transport methods for other functionalities. Main vital points about what they find when looking for transport tickets I extract from those interviews:

  1. Machine not working.
  2. Cash or card payments. The currency exchange always can be trouble.
  3. Need to buy a card first to be able to travel. Each city has different transport tickets. (Ex. Oyster in London, MetroCard in New York and MykiCard in Melbourne.)
  4. Long lines to purchase a ticket in the vending machine.
  5. Can be delays in the public transport service.
  6. Users prefer to use only one transportation with no layovers, even if it is slower than another. It is sometimes so complicated to connect between transports.
  7. They want to have all tickets in the same app, downloaded.
  8. Young users prefer eco-friendly transportation and ticketing — no waste of paper for tickets and electric transport.

2. DEFINE

To solve the problem, we should define it. What are the primary user’s needs? There were some shared needs between all the interviewees that made me put the focus on:

  1. A feature to be able to purchase at one time multiple online tickets through the same app. An easy option to buy all tickets combined in one step.
  2. The creation of a ticket wallet to allow users to have all the tickets in the same storage.

3. IDEATE

Here is when the creativity takes place, and the ideation stage starts with the creation of a new feature in the app that solves the two needs we talk about previously:

  • The purchasing of multiple online tickets at one time, having an agreement between public and private transport companies to sell their tickets through this app.
  • The existence of a ticket wallet that keeps all purchased tickets at the same place within the app. The ticket wallet will show the ticket with a QR code to simplify the station’s process and avoid the necessity of print it at the ticket machines.

Additional creation: showing the eco-friendly, electric, discounted or the faster option tag when offering the transportation options.

4. PROTOTYPE

After all the previous work is done, here is the prototype! I have created some sketches of the wireframes to purchase the tickets and check them in the ticket wallet. While choosing the best option to purchase, we get to see tags depending on whether the ticket is eco-friendly or electric, including a discount or the fastest option.

Once we have out ticket purchased and check it at the ticket wallet, we can have the QR code of itself, share it, or download it if we want to have it in our phones. From there, we are more than ready to GO!

5. TEST

Even though we will not touch this stage in this project, I found this excellent article worth read more about it.

The Learning

Research is vital in understanding the main problems of the users and needs. Following the design thinking method, interviews have unlocked insights and increased the effectiveness of my designs. Interviews provided me with exciting information that I could not anticipate, which made the solution more straightforward and effective. Also, how important it is to depict the information quickly and logically. How much we can discover if we focus on the user, and how most of the times: less is more.

“Tell me, and I forget, teach me, and I may remember, involve me, and I learn.” — Benjamin Franklin.

Eco traveller, consciously living. Passion for design, innovation & sustainability. Vegan. UX designer in process!