Citymapper, a design thinking story
By: Dido Kropholler
Tags: UX Design, Citymapper, Prototyping, Ironhack Prework, Uxui Design

It all started when I had to do pre-work for this cool Ironhack UX/UI Bootcamp in Amsterdam. For the second part of my first assignment, I had to start thinking creatively and come up with a feature for one of the most used public transport apps. Their tagline is “The Ultimate Transport App”, so naturally, I was instantly intrigued. ‘What do you have to offer that our Dutch public transport apps don’t?’ And that’s when it took off..

A little more about Citymapper

Citymapper was launched in 2011 by a young fellow named Azmat Yusuf in London AKA “The world’s most historic and iconic public transport city” according to Wikipedia. The app makes sure you get from point A to point B with a handy map, navigational add ons, the fastest route and when you need to depart. It even tells you how many calories you would be burning if you take a walk or go for a bike ride. Citymapper already mapped 39 cities where you can pinpoint your departure and arrival location and it searches for the best way to get there. Sometimes that means you have to take a walk, a bus, a tram, another walk and then a bus again. But luckily, Citymapper softens that blow with its quirky and lightweight graphic design and content. It also gives you the accuracy you want as an urban traveler. The overall travel time, cost, and means of transport. All you need to do is download the app and launch it.

Empathize, Define, Ideate, Prototype, and Overcome!

When you start a project like this you first have to find out why and where to begin, so you ask yourself these predefined questions like, what is the problem? Who is affected by this problem? Who could beat Citymapper because of this problem and what is the general feeling of this “Ultimate Transport App”? With these questions in mind, I started the process.

Empathize

Let’s begin with the users. I prepared various questions like ‘How has the need to get a physical ticket ever ruined your well planned out trip?’ or ‘How has the change in currency when traveling abroad affected your stress level when you just wanted to go somewhere?’. When you’re on holiday you don’t want this kind of nonsense, and especially not when you have to commute using three different transfers, and thus three different tickets, to and from work on the daily. So this had to be fixed.

I sought out 5 users in my surroundings and tried to interview people with similar daily public transport routines but a different experience level and people who rarely use public transport, but when they do, they notice e-v-e-r-y-t-h-i-n-g. And that made these two groups important for this exercise.

Define

So when conducting these interviews a lot became clear. Most people depend on Google to show them their way if they don’t already know it. But Google doesn’t show them if, where, and how to buy a ticket for the journey, which can be confusing and time-consuming. So after you find out from your surroundings how to get the right ticket, you’ll be left sometimes with multiple tickets for multiple ways of transport, which can be confusing as well.

I started mapping their experiences in my head, to get a clearer picture. And the problem seemed to be confusion and (un)necessary sub-trips to vending machines and then onwards to find your way through maze-like train stations or bus platforms. Not a very user-friendly experience, I must say.

So how to help people enjoy their trip or make a daily commute less stressful and wasteful?

Ideate

Two kinds of Citymapper users and one solution: The overall recognized and broadly used QR code.

I wanted to integrate the QR code in two ways:

1. A quickly accessible personal QR code linked to your already preferred payment details.

2. Quickly accessible personal QR codes for a pre-planned trip to replace the loose tickets required for different types of transport.

Next to the QR code, I wanted to take our users by the hand and show them real-time locations, walking routes when transferring and what the next step of the journey is.

Prototype

Here we go.

The Frequent Commuter, Rosanne.

This user wants to be flexible and not held back by vending machine lines when in a rush. So when you open Citymapper you instantly find your personal QR code for quick scanning. When you have opened your personal QR code and checked in, this code will be easily accessible in your Wallet on your lock screen for easy checking out. This code is linked to your preferred payment details and thus you can use this QR code whenever you’d like. Checking in and out has never been this easy.

The Other Traveler, Joachim.

So this is a traveler that takes leisurely trips. A city hopper if you will. Here the user wants to be able to plan out a one-time trip beforehand and have everything ready to go. So that left me no choice but to put a ‘Buy an E-Ticket’ flow in the mix. Plus, this user who is a visitor, a tourist, needs to know where to walk to when they have to transfer trains or busses. So I put in a real-time roadmap of when to walk where and how, and when and where to show your QR code AKA purchased E-Ticket. Amongst other ideas a ‘Download receipt’ option for business travelers and a push notification when your stop or transfer is coming up.

I also found that there need to be surrounding options, must shows, and push notifications to add to the customer experience. By self-learning algorithms the app finds out what kind of commuter you are and what kind of information you would like to receive.

Learnings

I have learned a lot in this process, like how important the human part in “human-centered design” actually is. Users have so many different needs and motives for using software or doing anything, really. I'm curious and excited to learn more in this Bootcamp!

Thank you for taking the time to read my short-ish story about Design Thinking and the Ticket Problem.

Let’s get started!