Optimizing citymapper app

Ironhack’s Prework: Garance_Berliet_Challenge1

As part of a UX/UI program at Ironhack, one of my challenges was to upgrade the Citymapper app using the Design Thinking process.

Source: Vulog.com

What is Citymapper ?

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. It is free of charge to users, and is supported by a mobile app on devices such as mobile phones, and by an Internet website (source: Wikipedia.org).

The objective

The objective of this challenge is to create a feature for Citymapper that solves the pain of having to purchase different public transport tickets by different channels.

The tool

In order to do so, the idea is to rigorously follow the Design Thinking methodology that includes 5 steps: Empathize, Define, Ideate, Prototype & Test.

Source: Medium.com

Let’s do this !

Step 1: Empathize

The very first step of the methodology is to understand the users needs simply because we are not the user. Our opinion is not enough. And to do so, I have interviewed 5 people from my environment asking them the following questions:

• What kind of transportation do you use in your own city ? And when travelling abroad ?
• How do you usually proceed to go from point A to B ?
• How do you purchase different public transport tickets for a multimodal itinerary ?
• If relevant, describe a situation where you struggled with purchasing several tickets for a multimodal itinerary.
• In an ideal world, what would be the most perfect experience when buying your transport tickets for a multimodal itinerary ?

Step 2: Define

During the interviews, several interesting insights and friction points have been pointed out:

• The most mentioned pain point was the fact to have to queue to purchase a ticket or recharge a pass.
• The London system has been mentioned very positively. The users don’t have to purchase any ticket. In fact, they just need to put their credit card or e-card from their wallet app on the sensor when entering and leaving the tube, and the exact amount of the travel is directly debited from their bank account.
• One of the interviewees comes back to a classic paper map (often available from a guide) if the app can’t be use offline.
• However, they usually prepare the itinerary beforehand at home, so they have the opportunity to save it for an offline use.
• The payment options need to give as much flexibility as possible. As an example, buying a ticket in a bus can be sometimes complicated when you don’t have change and they don’t accept credit cards.
• There is no information about where to buy your ticket. In fact, for some type of transportation, such as the bus, you don’t know if you have to purchase your ticket in an outside vending machine or directly from the bus driver, or if both are possible.
• There are some confusion over the validity of a ticket. Does it cover the whole itinerary if it is a multimodal one (ex: tram + metro from the same transportation network) ?
• The offer is sometimes super wide (book of 10 tickets, Navigo pass, Imagine R, reduced fees, airport ticket…) and quite confusing for the user who doesn’t know what deal would be the cheapest and the most appropriate.
• There is no information about the need of stamping your ticket or not.
• A multimodal itinerary among different cities is not available on Citymapper. As an example, an interviewee wanted to go from La Spezia to Genova but Citymapper was not able to provide the service, forcing her to switch to Google Map. It is an interesting insight but it doesn’t really enter into the problem scope.

Step 3: Ideate

Following this interview and a brainstorming session, 3 solutions came into my mind to upgrade Citymapper’s experience on the basis of the postulate that there is no limitations or constraints for all channels to read the QR code technology.

1. Precise very clearly, for multimodal itineraries, the ticket & price required for each channel.
2. Enable the users to link to Citymapper the transportation cards/passes they may already have. This functionality has a double objective: enable the app to adjust the information pushed to the users about the additional tickets they have to buy or not based on the selected multimodal itinerary ; and enable the users to recharge their pass directly via the app to avoid them queuing.
3. Enable the users to purchase different public transport tickets directly via the app, right after generating an itinerary. This will particularly upgrade the user experience for multimodal itineraries but will be useful for direct travels as well.

Additionally, if I could, I would have included the London system on top of the list as it seems to be the best solution to smoothen the whole user experience. However, the initial brief said that we needed to add a feature to the app specifically.

Step 4: Prototype

I strongly believe that all the solutions above go hand in hand. For example, a prototype for the solution n°3 can’t be properly developed without the solution n°2 nor n°1. The app needs to know if the users already have a pass to adjust and push the right information about the price and what they have to buy or not. However, I’ll stick to the solution n°3 for the prototyping exercise considering 1 & 2 are prerequisites.

1. The app optimization happens right after choosing a specific itinerary. The detailed price per transportation has been added so the user has an overview of the number of different tickets required.
2. A “Buy tickets” button has been added above the detailed itinerary. I’ve chosen this particular place because the user is supposed to get used to it as he previously clicked on Go.
3. When clicking on Buy tickets a pop-in appears enabling the users to buy in a scroll. All the different tickets to buy are ticked by default but you can manage it manually if needed.
4. When you Scroll to buy, a confirmation notification appears.
5. When clicking on the cross or outside of the screen you go back to the almost same screen as the n°2. The only difference is that the Buy tickets CTA, has been replaced by Access tickets.
6. You can access tickets through this Access tickets button. A pop-in appears showing the QR code with the possibility to add it to your wallet app if wanted. I voluntarily added this feature here and not on the confirmation notification to avoid as much as possible that the user leave from the app.

Key learnings

It was hard to drive the interview to gather insights about the very specific initial problem without influencing the discussions. The questions had to be open-ended but the problem to solve was already identified and very specific which was quite disturbing for me at the beginning. However, the process became progressively more fluid and I gained confidence to provide a relevant solution.

Thank you for reading this !