I’m Catharina and I’m a UX/UI design student in Berlin. I am happy to share with you this challenge which is part of the pre-work required for Ironhacks Bootcamp. The app I worked with is the navigation and mapping app Citymapper. I was going through my first Design Thinking Journey and I want to share my process with you.
Facts
- navigation and mapping app
- launched in London in 2011
- provides an overview of private and public transport options between two locations in a supported city
- has covered 80 cities and metropolitan areas worldwide by now (2023)
- available on web, iOS, Apple watch and Android
- can be downloaded for free
User
- I assume the average user of the app can be anybody who is using public and private transport in a big city and prefer to use an app that displays all important information. Competitors: Google Maps, Transit, Mappy, e.g..
How to Use
- The user adds a start and destination point and can choose a convenient, quick and cheap way to get from A to B. The user can select between private transport options like car-sharing, scooter, kick scooter and cabs or public transport options like buses, trains, metros and trams. Citymapper is also providing walking and cycling routes. Within the accurate and real-time navigation feature the user gets instant information about any delays or changes on their trip.
The challenge was to create a feature for this app that solves the pain of having to purchase different public transport tickets by different channels.
The Design Thinking Process consists 5 steps: Empathize, Define, Ideate, Prototype and Test. For this challenge I applied the first four phases of the process:
Empathize: Since I never used Citymapper before and also had no data on the user group, I researched the internet and clicked my way through the reviews in the app store. At the same time I asked friends if they have experiences with Citymapper. To get more insights about people’s behaviour when buying tickets for public transport I conducted 5 user interviews. The group of people I interviewed have a wide age range (20–50) and live in either small or big cities. I have structured my questions in a way that the interview partner can share freely their experience. Here you can find my Interview Guide.
Define: The Interview has shown that public transport tickets were mostly purchased in ticket vending machines often with helpful local volunteers, because the purchase itself was perceived as difficult by all respondents. The interview partners reported that they were often very unsure whether they had bought the right ticket. Especially when the connections or circumstances were more complicated (changing trains, destination outside of the city, traveling at night).
“When I was in Paris, I was very relieved that there were many volunteers at the ticket counters to help me buy tickets. On the other hand, I wouldn’t have known which ticket I needed.” — Pia, 32, Kiel
| “On my last holiday I bought many single tickets, only later I found out that there was a cheaper ticket that was valid for a week. I wished I knew that before” — Kimberly, 26, Berlin
It was not the biggest hurdle for the respondents to save time in this process. It has rather shown that there was a great insecurity due to unprovided or unclear informations, especially when the type of transport had to be changed. The act of purchasing a ticket for a trip with a change of transport was scaled by the interview partner as more stressful than purchasing a ticket for just one transport. According to my interview partner it would have been helpful if more short necessary information of the local transport system and the different tickets would have been provided. In my interview, I asked the interview partners what functions in an app they would consider to be supportive in such situations? Here are some answers:
“A code with which you only have to go to the ticket counter would be nice. There you can get all the tickets you need for your journey, even for different means of transport.” — Pia, 32, Kiel
“I would find it useful if I could buy the tickets right in the app. Then I wouldn’t have to worry about whether there is a ticket vending machine at the interchange station or whether I have enough cash on me” — Paul, 55, London
I would like some information on how the public transport system works in the city I am in. For example, if I would know before that tickets can also be bought on the train, I would be a bit more relaxed on my journey. — Suzan, 34, Berlin
User Story
Jana, 23 years old from a small town nearby Hamburg is with a friend on holiday in Italy. The two have already spent a few days in Milan and now want to explore the small towns around. They follow a tip for a great restaurant in a little town outside of Milan. Jana decided to open the Citymapper App on her phone, enter their current location as the Start-Point and the address of the restaurant as the End-Point. The App provides a few different options. They have decided to take the bus which leaves near the hostel and go further with a small train that drives to the town where the restaurant is. They arrive at the bus stop and ask themselves which ticket they need for that trip. The two wonder if there is a ticket that is valid for all means of transport? And if not, where they can get the ticket for the train. The two consider to find a self-explanatory ticket vending machine nearby and hope for a helpful volunteers or to start browsing the internet for a solution.
Problem Statement:
What feature can Citymapper provide in the App to simplify the purchase of tickets for more than one type of transport, so that the user knows in advance which tickets are needed.
Ideate: To visualize the results of the interviews I created a hand-sketched Mindmap:
The sketch guided me to three possible solutions: 1) A generated QR code for the selected journey. The user receives a QR code on his or her mobile phone. This code can be used to go to a ticket office, have the code scanned and get the required tickets for the journey. 2) In-App purchase function. This feature allows the user to select their journey within the app, purchase the ticket, if necessary also for two different means of transport and save it in a wallet within the app. 3) Another consideration was to add a feature that provides the user some information about the local ticket systems and introduce where they can buy the tickets for the trip. This tool shares with the user information on how the local transport system works, what different tickets are available in the locality and how to buy them.
Prototype: When I had to decide which option to prototype, I looked at which feature would cover the most user needs. At the same time, I wanted to make sure that the feature would also be an advantage for Citymapper if the user used the app as much as possible for this process. After some deliberation, I therefore opted for the In-App-Purchase option:
The User Flow
In the first step, the user enters their starting and end point in the app as usual. The app now offers various transport options. By clicking on the selected journey, the user is forwarded to the next page. The direction is displayed as usual and in addition there is now the function “Buy tickets for your trip”. By clicking on the button, the user is taken to the next page. Here the user can select the means of transport for which a ticket is to be purchased. After this selection, the user chooses his or her method of payment. By clicking on the button “Pay now”, the user purchases the desired tickets. The ticket is automatically sent to the e-mail address stored in the app. In addition, the user can also add the ticket to their Citymapper wallet.
In my first challenge I learned many things about the Design Thinking Process. But what kept coming up was the fact that all the steps in the Design Thinking process are repeated over and over again. If I lacked information or needed another input, I always went back to the previous steps. I think he Interaction Design Foundation have put it in a nutshell by saying on their website:
“It is important to note the five stages of design thinking are not always sequential. They do not have to follow a specific order, and they can often occur in parallel or be repeated iteratively. The stages should be understood as different modes which contribute to the entire design project, rather than sequential steps.”
Read the full article here