Citymapper — New feature

Ironhack Prework : Challenge 1

Piotr Toszew
5 min readOct 30, 2021

This post is part of my prework requirement for the upcoming course in UX/UI Design

citymapper.com

Citymapper is a transportation and navigation app, available in more than 100 cities around the world. It allows you to instantly compare your travel options in real-time across all transport modes : public transport, walking, cycling, scooter trips, and driving. It’s free of charge to users, and available to Android and iOS phones, as well as on the Internet.

The problem

Although the app currently solves many of the problems of urban mobility, there is still one pain point for many users : the different number of tickets users often have to purchase in order to complete their journey. Besides inconvenience, the process of buying these tickets can be annoying and stressful. There are issues of finding vending machines, waiting in long queues, choosing the right ticket(s), problems with payment, and of course, possible language barriers. All these can easily create an unpleasant city experience.

My task is to create a feature for this app that will solve the above stated problem using a Design Thinking Process.

Note : for this challenge, the last stage of the process [Test] was omitted.

Step 1 : Empathize

Personal Introspection

  • What problem am I solving ?

How to incorporate a new feature into the citymapper app that will help users save time, reduce annoyance and stress, eliminate guess work from purchasing a correct ticket(s), and generally, make their lives easier.

  • Who is my audience ?

Travelers/tourists who regularly rely on their mobile devices when traveling abroad. More precisely, individuals (females/males), ages 18–50 who regularly use credit cards and/or mobile payments when making purchases abroad.

  • Who is my client’s competition ?

Main competitors are : Google Maps, Uber, and for the locals in Paris is Bonjour RATP

  • What’s the tone/feeling ?

Easy to navigate, simple and convinient. Minimalist aesthetic.

Interviews

To have a better understanding of users’ pain points, five people were interviewed that fit the target audience and regularly (at least once a year) travel abroad.

The first step in the design thinking process was to create an interview guide, which is a semistructured interview. It has a predefined structure but unlike a script interview, it allows the interviewer the flexibility to follow up on significant statements made by participants. The interviewer can ask questions in any order they see fit, omit questions or even ask questions that were not in the guide. This type of interview makes it possible to have a deep, free-flowing conversation and includes open-ended questions to encourage participants to tell their stories.

Here are some questions that were included in the guide : which navigation app(s) do you regularly use, how often do you use it, what do you like and dislike about it, tell me about your most frustrating experience, how do you normally pay for transport tickets when traveling abroad, etc.

Step 2: Define

After the information was collected, I organized the responses into groups, and then created a list of the most common pain points shared among the participants :

  • Queuing to buy tickets and looking for ticket machines is a complete waste of a precious time;
  • Figuring out what tickets to buy (single pass, daily pass, weekly, week-ends) is frustrating;
  • Language barriers when buying tickets or communicating with people at the information counters is a problem;
  • Purchasing tickets with a credit card is not always possible.

Step 3: Ideate

In order to create more pleasant travel experience for users of Citymapper app, a new feature will be added that will reduce the annoyance of having to purchase paper tickets. Staying true to the tone/feeling of a simple and minimalistic solution, an option to purchase a single digital ticket for any given route will be added. If the new feature eventually passes a real-time user testing, an option to buy multiple tickets, or even bundle packs could be added in the future. By minimizing and limiting this new feature to a purchase of a single ticket will save time and money.

Step 4: Prototype

Challenge-related limitations :

  • Any potential security issues related to payments, as well as technical challenges with a Scan & Go ticket technology were not considered;
  • Purchase of a single digital ticket was limited to public transportation : metro, bus, trams, and trains.

Frames :

Frame-related Notes :

  • App users can purchase tickets in two different locations (1) directly from a list of suggested routes — Search Options (2) Route Selection Page;
  • After a “secured & verified” payment is made through the Payment Page, user is automatically redirected back to the Travel Route screen;
  • When user reaches an entrypoint (metro, bus, tram, train), digital ticket is accessed through [My ticket] button, scanned, and then the journey continues to the final destination;
  • New section : Ticket Payment History is added to Landing Page.

Conclusion

This was an interesting experience but at the same time, more difficult that I had imagined. It’s a time-consuming process, and if you don’t manage your time well, you can easily get lost in complexity of the challenge.

The process of prototyping was also very unique. In most situations, it’s better to use pen and paper to create these sketches but since I was creating a new add-on feature, I wanted to build on that while maintaining app’s original look and feel. Taking screenshots, and then adding new elements digitally, just seemed to work better here.

--

--