UX/UI Bootcamp Prework — Challenge 1: Improving Citymapper

This first challenge consists of the development of a new feature for Citymapper, and its main goal is getting me comfortable and familiar around user centered design. It is an excellent opportunity to implement recently acquired concepts regarding the design thinking process, user research and rapid prototyping.

Citymapper

Citymapper’s Interface

Created in 2011 in London, and currently present in 58 metropolitan areas around the world, Citymapper is a free public transport and mapping app, available for Android and iOS, which provides the user with real-time transport options between any two given points in a supported city. It offers different route options, and allows the user to choose the one that is best tailored to their specific needs, making an otherwise frustrating and tiring commute much more effortless and simple. Also, the app informs users about ticket prices, traffic situation in the selected route and duration of the trip. Citymapper integrates in a single platform information for several modes of transport within a city, not only related to public transit, but also with walking, cycling and driving.

The problem and scope of the project

Although the current product of Citymapper already solves some of the main problems of urban mobility, there is one pain point for many users: the different amount of public transport tickets the user has to purchase through different channels during a single commute. Besides, public transport tickets come in paper or plastic cards, which is not very eco-friendly, and most of the time buying multiple tickets is necessary to go from point A to B. Not to mention that the process of buying these tickets can be very annoying and stressful (e.g. queues, vending machines that don’t work, unavailability of translation, no clear information), even more if we are using the app in a foregin country.

The goal of this project is to create a feature for Citymapper that tackles the pain of having to purchase different public transport tickets by different channels.

The Design Thinking approach

Five phases of the Design Thinking Method

To reach this goal, I relied on the basis of the Design Thinking Method in order to build an effective and desirable solution, through a user centered creative process.

Design thinking suggests that, for creating innovative and valuable products, you need to follow 5 steps: Empathize, Define, Ideate, Prototype and Test. Four of these steps were put into practice to reach the goal of this challenge.

Although the Design Thinking Process is a linear process, I should mention that it is also an iterative cycle, meaning that it is a cyclic process of prototyping, analyzing, testing and refining a product. Based on the results obtained upon testing, the design of the product is changed and refined, allowing, in this way, a continuous improvement on functionality and quality of the design.

Empathize

In this phase the goal is to understand the users I’m designing for. This can be achieved by observing potential users, noticing how they behave, putting myself in their shoes and talking to them through surveys or interviews.

Who is my user? What matters to this person? What are the main issues they face? How can I improve their interaction with this app? What are their specific needs?

To get an idea on how to tackle the problem, I conducted a simple interview with 5 different people, ranging from 28–63 years old who are public transport users, from different backgrounds, mainly familiar to apps similar to Citymapper.

How often do you use public transports? Why?

How do you purchase your tickets? Do you have a monthly pass?

When traveling using multiple public transports, how do you purchase the multiple tickets?

How often do you use mobility apps when using public transportation? What are the main problems you face when using such apps? What do you think could be improved in this kind of app to better respond to your needs?

How often do you use public transports when travelling abroad? What are the main challenges that you encounter in this situation?

How often do you use mobility apps for public transportation when you are abroad? Why?

Would you be more keen on using public transportation if you could buy multiple tickets through a single platform?

Define

So, what are users having the most trouble with? What is their main problem?

The information retrieved from analyzing the interviews allows me to answer these questions and to create a point of view based on user insights, showing me what is the main problem that I should focus on solving:

  • some of the interviewed don’t have monthly transport subscriptions for lack of necessity;
  • not finding appealing the prospect of having multiple paper and plastic tickets that are easily lost or forgotten and of single use;
  • frustration and annoyance for having to make different stops and queuing to buy multiple tickets for different transports, which are aggravated even when they are abroad or in unfamiliar places with little information regarding what kind of ticket to buy;
  • reporting confusing and unclear processes to buy tickets, broken or inoperable machines, cash only machines, etc;
  • all agreed that having an additional feature on the mobility app that allowed them to buy, and gather, all the tickets for a certain trip would be welcome;

Given this scenario, I concluded that the main problem that I want to, and need to solve, is the lack of an option to buy all tickets needed for a multi modular commute in a single task and through a single channel.

Ideate

After brainstorming based on the information I’ve retrieved, I’ve come up with two different solutions to overcome this challenge based on my findings:

  1. To create an intuitive, effective, effortless and user-friendly way to purchase all tickets necessary to a trip through a single online platform, the one the user is already using for public transport mobility, and in a short amount of clicks. This feature would allow different forms of payment and be completed with a wallet where the user can access all bought tickets.
  2. To generate a QR Code that would be read at a specific machine in the public transport terminal, allowing the user to pay for the multimodal ticket once there, and printing the paper ticket after payment is complete or sending it to the user’s email.

Prototype

I’ve chosen the first option mentioned above to create a Lo-Fi paper prototype of a possible solution to be hopefully tested among users to receive some feedback.

1) Opening screen; 2) Selecting desired multimodular commute; 3) Chosen commute interface
4) Selecting payment method; 5) Buying the ticket; 6) Digital generated ticket
7) Account interface; 8) Selecting the ticket bought moments ago, the ticket window pops-up; 9) After cliking the button “USE NOW” pop-up window takes entire screen.

Conclusion

By facilitating the purchase of tickets during a commute, the user will have a much more positive and enjoyable experience, hopefully creating a bigger engagement with the app. If such a thing happens, the UX designer has reached the sweet spot where user needs and business goals overlap.

It was a very interesting first approach to UX centered design, which allowed me to better understand and practice the Design Thinking Process and rapid prototyping, and also to create a Lo-fi wireframe to come in contact with my creativity.

Through this first project, I’ve realised the true importance of ideation and iteration. Even though this prototype will not be shared with users, I anticipate the intense iteration of design that would ensue if it was confronted with yet unpredictable and unaccounted user needs.

UX/UI enthusiast