Hop On, Hop Off seamlessly with Citymapper

Rocío Albertos Casas
3 min readJan 7, 2021

Ironhack’s Prework: Citymapper Challenge 1

This document is only being used for educational purposes to discover and create a UX/UI feature for Citymapper that solves the pain of having to purchase different public transport tickets by different channels.

Background and scope of the company

Citymapper‘s goal is to solve the problems of urban mobility by offering the quickest, cheapest and different multimodal public and private transport routes to their users.

It compares travel options in real-time across all transport networks globally and easily navigates your city with turn-by-turn directions for all your public transportation, walking, cycling and scooter trips.

Common pain-points according to 5 Citymapper users (based on research interviews) when travelling locally and abroad

  • Public transport tickets, are environmentally unfriendly and they clutter too much a person’s wallet.
  • Process of buying these tickets are often annoying and difficult to purchase due to vendor machine’s non-intuitive interface, missing languages and / or understanding which ticket to buy (especially abroad). Machine Findability, out of order situations or huge queues are also very common.
  • Check-In / Check-Out within local city transports are not intuitive and sometimes confusing as a user sometimes doesn’t know when to scan / show, etc.
  • Payment possibilities / integrations are not yet available fully, digitally within transportation networks. Some cities still require cash as a payment when checking-in checking-out, credit / debit cards differ from country to country, ATM’s are not nearby, etc.
  • Realtime schedules within public transports is not yet achieved in the best way, nowadays. Some people detect that provided schedule / times are not always updated instantly as they should be.

Problem Focus

All pain-points are relevant and somewhat urgent to solve. However this document will only focus on the 2 most acknowledged among users.

GOAL: Simplify the process around buying a ticket and create a smooth checking-in / out experience seamlessly within any public transport without hassle for the traveller.


1 — First understand current ticket scanning capabilities that public transports networks have currently incorporated within their transportation vehicles or local stations (trains, metros, buses, stations, …).
QR codes scanning is a very common and adopted technology (commonly used in airports) and is fairly easy to read / process within any common mobile device of a user.
Let’s assume transports have QR Code technology incorporated.

2 — Adapt and develop Citymapper’s app to be able to process these QR codes and understand the data provided by those.

3 — Introduce missing price estimations from transports within the selection screen.

4 — Create a new, easy and simple check-in / check-out contactless user experience within Citymapper’s app to hop on and hop off any transport within any city.

5— Pay as you finish the journey by scanning your QR Code.

6 — The prototype mockups below show the intended UX Flow for the new feature:

  • Search Destination (start / end).
  • Select your most convenient option based on price and time.
  • Get an overview on the route and click GO to help you go to the selected transport.
  • Before hopping on the transport, click CHECK-IN. That will show you a popup with a generated QR Code and a clear message saying “Scan this QR Code when CHECKING-OUT
  • Once arrived at destination, click CHECK-OUT. That shows up the QR Code again.
  • Scan the QR Code on the transport scanning machine. Information on final price, duration of travel, etc. will be shown.
  • Pay with your preferred payment provider.
  • Done.

Prototype Mockups

Key takeaways

  • First time doing subjective surveys with real people turned out to be a great experience.
  • Through the interviewing process, most people rely on their mobile device to do anything nowadays. Paying and using Public Transports shouldn’t be any different than buying something online, eg. amazon. People demand instant experiences as they go, anywhere, anytime.
  • Most people I reached out to are conscious with environment, hence the reason to use local transportation more often. Specially for commuting.



Rocío Albertos Casas

I’m Rocio. A UX | UI Interaction Designer with a user centric approach to solve problems. https://www.rocioalbertos.com/