Ironhack’s Prework Challenge 1: Design thinking Citymapper

This article is part of Ironhack‘s Prework “challenge“ for the UX/UI bootcamp which I will start soon.

Citymapper

Founded in 2011, Citymapper is a public transit and mapping app with its HQ based in London. With a mission of “making cities usable”, Citymapper has been offering the users the quickest way of how to get from A to B by comparing different travel options in real-time. It covers metro, train, bus, ferry, taxi, car share, bike share, walking and more. The app is now available in around 90 cities around the world and is expanding even further.

“Cities are complicated. We’re using the power of mobile and data to help humans survive and master them.”

While Citymapper already solves some of the main problems of the urban mobility and especially abroad, its users still run into the pain of having to purchase different public transport tickets by different channels. The main purpose of this task is to add a new feature to Citymapper which would allow the user to purchase the tickets all in one place, assuring a stress-free travel.

The premises

· Users already have all their information on the app, they will neither need to login nor enter any data when paying/checking-out.

· For now, we will forget about security issues and other limitations and focus on finding a quick and user-friendly solution.

To solve this task, I will be using the “Design Thinking” method.

Photo by Avel Chuklanov on Unsplash

1. Empathize

The first step of the design thinking methodology is to acquire an empathetic understanding of the problem. Empathy is especially crucial to a human-centred design process as it allows designers to step into the user’s shoes and experience their day-to-day lives.

Apart from observing the behaviour of the users, one of the best ways to empathize is to engage into conversations with the target audience to find out what their actual experiences are.

Before conducting the interviews, I have defined a few points. My target audience are people who use public transportation abroad and expect to have a smooth and hassle-free experience. Differently from the locals who tend to use public transportation cards, travellers often find it especially irritating having to purchase different public transportation tickets from different channels.

Several international public transportation apps such as Google Maps as well as local apps which differ by country (9292 in the Netherlands, RMV in Germany etc.) are widely used to get around the cities. However, most of these apps share the same limitation — they do not have an option to purchase tickets. Despite its variety of features, Citymapper seems to be one of the easiest to navigate. With its intuitive and user-centric design the app creates an easy-going, welcoming feeling. If the feature to purchase public transportation tickets via the app could be incorporated into its interface the same way, Citymapper would instantly get ahead of the competition.

2. Define

In order to create a more objective image in my head about the problem, I have interviewed 5 people (aged 29–32) most of whom live in different countries and have a lot of experience in using public transportation abroad. Some of the interview questions included:

  • Can you recall a situation about using public transportation abroad? What problems did you run into?
  • How do you manage buying tickets?
  • When buying tickets what would be your preferred way to do it and why?
  • Could you describe the ideal product or its features that would make your life easier when using public transportation abroad?

Some of the common pain points I identified:

  • Having to research or buy tickets in advance.
  • Language barrier when trying to navigate numerous apps and websites to purchase tickets as well as anxiety caused by not being able to ask information in the foreign language.
  • Having to use both google maps & local navigation apps.
  • Unclear station labelling or ticket purchasing information.
  • Struggling to understand ticket prices and identifying what are the cheapest options.
  • Having to stand in line to buy a physical card/ticket in a machine or a ticket booth.
  • Not knowing the exact locations of bus stops/direction of travel or the actual ticket machines.
  • Desire to be able to easily buy tickets regardless of what country they travel in — preferably online without the need to have a printed/physical ticket.

Additional points noted:

  • Importance of human interaction and friendly customer support to make sure that you make no mistakes in route/ticket purchasing
  • A user-friendly machine/app could offer a video guide in the specific language about how to get tickets and give more tips about the city

After considering all the pain points, I came up with the following problem statement:

“People who travel abroad need a quick and easy way to buy public transportation tickets within one app because they get confused when navigating different platforms in foreign languages and often need to do time-consuming research in advance.

Photo by Clem Onojeghuo on Unsplash

3. Ideate

During this phase the goal is to let your imagination go wild in order to generate ideas which are not as obvious in the beginning. I drew a simple mind map to brainstorm as many solutions as possible to solve the problem. I decided to use colour codes to help me focus on advantages and disadvantages of the different ticket buying options.

Here are some of the ways to solve the problem:

Option 1. The app redirects you to the local website to purchase the tickets.

Option 2. Pay for a 1-day ticket (minimum). Receive a digital ticket without an option to scan.

Option 3. Digital Citymapper Pass (Wallet) with a QR code— top up in advance but pay as you get on/off the public transportation.

Option 4. After selecting the best option pay for the whole journey in advance (including the transfers) each time by credit card, PayPal, etc.

4. Prototype

After considering all the pros and cons I decided to choose the option 3 to prototype because I felt it would meet the most requirements of the users. Here are some of the reasons:

  • The feature works just like a local transportation pass — automatically applies the local tariffs when transferring and offers additional options to buy subscriptions. This would save money.
  • Quick to top up in advance — saves time.
  • Shows different price options for the whole journey in advance and allows to pick the preferable time/price combination.
  • Human-centric approach — offers the most popular destinations; a pop-up notifying when to get off etc.
  • Can use in any country regardless of the currency/language

Prototype design of a Digital Citymapper Pass (Wallet) with a QR code— top up in advance but pay as you get on/off the public transportation.

Citymapper Pass Top Up

Journey Selection & City pass top up User Flow

#1 Once Citymapper is opened, it detects that the user is abroad and prompts them to update the location: “Hi! Your location seems to have changed to Paris.Update location. There is a Cancel option as well. #2 The user clicks on Update Location and is now able to input their desired destination into Get Me Somewhere field. (There is an additional Explore option if the user would like to find more popular destinations in the city). #3 When the user clicks the destination field, it triggers the keyboard to pop up. #4 The user enters destination “Central Station” and is then taken to the screen with Suggested Journeys with estimated time and price for each. After choosing the preferred option the user clicks on GET TICKETS button at the end of it. #5 Since the balance on the Citymapper pass is €0.00 (as seen at the top-right corner), it prompts a pop up: “It looks like you have insufficient balance on your Citymapper Pass to start the journey =(.“ The balance is shown as €0.00. The user then clicks on a TOP UP option. #6 A new screen opens up with Top Up Balance field (where the minimum amount to top up is noted as €5) and the options to ADD Subscriptions. The user inputs €5 and presses TOP UP button. #7 The new screen opens up showing the payment options. The user selects iDEAL payment option and clicks NEXT. #8 An external iDEAL payment processing platform opens up where the user is prompted to enter the security code (which differs by payment platform). Upon completion the user clicks on CONFIRM button. #9 A pop up follows: “Congrats! Your Citymapper pass has been topped up. New Balance: €5.00”. The new balance is also updated at the top-right corner of the screen. The user then presses CLOSE button to end the action.

Ticket Validation

Ticket Validation & Transfer User Flow
Ticket Validation & Transfer User flow

#1The user is taken back to the Selected Journey Screen containing the destination (Central Station), transportation modes (tram 7, Bus 239), the time required and the price. The user presses START JOURNEY TO VALIDATE YOUR TICKET button. There is a Back button as well in case the user changes their mind. #2 The new screen opens up with a unique QR code which the user can scan to get on the transportation/present to a ticket inspector (if required). At the top of the screen the actual transportation mode is shown (presumably the app connects with the location services to track which public transportation mode is used). There is Time Remaining information shown and which transportation mode to take next. Also, there is an End Journey button in case the user changes their mind mid-way #3 Upon approaching the transfer point, a new pop up is triggered: “TIME TO TRANFSER TO BUS 239.” The user clicks TRANSFER. #4 The transportation mode is updated from Tram 7 to BUS 239 at the top of the QR code. #5 Once the bus reaches the final stop a new pop pup is triggered “You have arrived at your destination — Central Station.” The user clicks END JOURNEY button. #6 A pop up is triggered: “The journey is complete =). Duration — 35min; Cost — €1.8; Remaining Balance — €3.20”. The new balance is also updated at the top-right corner of the screen. User then clicks CLOSE button to complete the action.

My insights

This project was my first experience with UX design and despite it being rather challenging I enjoyed the process. Since I have been always curious about human psychology and behaviour, the ability to empathize with the user was especially interesting. I learned that interviewing users when designing a product not only allows you to better define the problem but also gives solutions which you may not have otherwise considered.

During the process of brainstorming solutions, I realised that there is no one right answer. Now I can only imagine that working in a team during the ideation stage would bring even more ideas and inspiration. I very much look forward to meeting my bootcamp colleagues!

The hardest thing was probably to select the best idea for prototyping because I first wanted to weight all the pros and cons of the possible solutions.

Thank you for reading! Any feedback is welcome :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store