Ironhack UI/UX Bootcamp Berlin March 2021 — Challenge 1 Citymapper

Introduction

Citymapper is a free mobile application and website, that allows users to search and compare various available urban transport modes, ranging from public transport to walking, cycling, ride-sharing or calling a taxi. Released in 2011 with London as their initial location, Citymapper has grown to feature 58 cities worldwide.

The aim is to provide users with the ability to contrast and compare routes, times and pricing and pick the most convenient for their individual needs. Traffic and route data is gathered from various sources and provides users with real-time updates on the duration of their commute.

The Process

The structure of this project is based on Design Thinking methodologies, which provide an ideation process in order to create user-centric solutions to problems through a five-step method.

A. Empathize — who are we designing for? What pains and needs do they have? The idea is to gain the best possible understanding of the user’s pain that we are trying to solve. Information is gathered through open-questioned interviews with various users.

B. Define — these interview findings are then consolidated and structured to identify the most crucial pain points and define a clear problem statement.

C. Ideate — brainstorm to find as many ideas as possible, in order to drive innovation.

D. Prototype — create a quick model that allows users to interact and provide feedback.

E. Test — What works? What does not? What can we adapt on the spot?

EMPATHIZE

In this stage, the idea is to connect directly with the audience and understand their habits, constraints, cares, pains and needs, in order to more accuretly define the problem.

Initially, I outlined a set of questions, which would set a rough framework for the interviews, whilst keeping in mind that the questions need to be formulated in an open manner. The aim is to gather facts from the audiences experience, instead of projecting own opinions by talking about the idea or possible futures and rather focussing on facts from the audiences experiences.

  • Which modes of transportation do you use when travelling or commuting?
  • What is your preferred mode of transportation, if any?
  • How often do you travel or commute?
  • Do you use public transportation? If yes, how many times per week?
  • What do you see as the benefits and downsides of mass urban transport?
  • What would you like to see improved about public transportation infrastructures?
  • Has the COVID-19 pandemic changed the way you utilize public transportation?
  • How do you gather the information on your travel routes?
  • Where do you buy your tickets if you use public transport?
  • How do you move around a city when you are travelling abroad?
  • Do you have any experience with digital mapping tools?
  • If yes, which and what do you like about them?
  • What do you think could be improved?

The audience consisted of five participants, aged 27–40 from my direct personal environment. All interviewees live within range of a major city, commuted to work on a daily basis prior to the pandemic and tend to travel to new a new city at least once a year.

After conducting the interviews and consolidating the data, the key takeaways, audience needs and pains can be outlined as follows:

  • Lack of clear information on which ticket option or type is the right one
  • Too many applications that have limiting features e.g. no interconnectivity with local transport providers and such no ticketing options and real-time updates
  • Barrier of switching between systems
  • Corona on-site issues: e.g. do not want to touch surfaces or be too close to other commuters
  • Frustrated over bad or entire lack of infrastructure at stations: broken ticket machines, no card payment options, long queues and unhelpful staff.
  • Difficult to compare pricing, plan and pay for multi-method trips (e.g. Metro > Bike > Metro).

DEFINE

Based on the interview results and the gathered data, one can define the problem and pains of public transport users more clearly and thus create a problem statement, which will aid finding one or multiple solutions.

Utilising the aforementioned key pain points one can create six key statements creating a clearer definition of the problem:

  1. Too many ticket types and lack of information on what destinguishes them.
  2. Bad Infrastructure — enhanced through the pandemic. Too many queues, broken ticket machines, unhelpful staff.
  3. Flood of transport applications with various features and subsequently barriers of entry/switching.
  4. Tourists: language and culture barriers.
  5. Prejudice driven by conisstent negative user experiences in the past.
  6. Multi-stop trips or multi-method trips bring additional complications.

How can Citymapper provide public transport users with an intuitive and convenient process of purchasing the correct transportation ticket for a given journey in the city of choice?

Ideate

Based on the gathered information and results from user interviews and the defined problem statement, one can utilise various techniques to develop a list of solutions.

Initially, I created a mind map, which allowed me to visualise the key pain points and thus the elements that the solution needed to address, in order to effectively tacckle the user pain points.

This allows for a more effective brainstorming session focussed on prioritaziation, which lead to a list of solutions, viable as well as not. The initial list contained a range of 20 solutions, that ranged from more obvious options, such as in-app purchases, click-and-collect functionality or digital account wallets to utilising near-field-technology (NFT) or third party iframe widget integrations.

I picked three solutions to sketch out mock-ups, which would aid the assessment of a viable, feasible and desirable option for the users pain points:

  1. In-app purchases through payment provider integration
  2. Third Party iFrame Integration
  3. Pre-paid fungible token wallets

This option provides, next to the choice of transport and the comparison of routes, an integrated ticket button, which would lead the user to a payment processor, allowing a smooth payment of the correct ticket type for their given journey.

This allows the user to view and acquire the right ticket type by adding a desired payment method to an account or entering new details on the checkout page. Tickets will be displayed after checkout and can be loaded into a mobile wallet for easy access and display.

A third party booking tool or widget integration is integrated into the route display via a “call-to-action” ticket buy button. An in-application iFrame widget appears which leads the user to the local transport providers checkout page. Payment details can be automatically filled via the user account, if details were provided — alternatively, the user can choose from a range of payment options. Tickets are then integrated into the Citymapper and mobile wallets.

The final option that was explored in more detail can be compared to a prepaid top-up system, which issues a fungible token that can be redeemed for transport tickets in the city of choice.

Documentation is stored on a public ledger, which can accessed remotely in case of a bug in the mobile app, loss or deletion through the user or a dead battery. It provides users with a convenient way of storing credit, in order to swiftly acquire the right ticket without having to store any form of credit card details. Additionally, this addresses the user pain point when booking multi-method trips, as payments can be conveniently split between different providers.

The ticketing information will be displayed along the route information, which incudes a “call-to-action” ticket button and leads to a payment gateway, through which Citymapper tokens can be redeemed instantly. Tickets are then added to user, as well as mobile wallets.

Prototype

Although Option A initially appeared to be the obvious choice, the overall assessment considering the various user pains and needs, points towards the use of a fungible token based mobile wallet.

Upon opening the application on his or her device, the user has the option to either (1) purchase the Citymapper token or (2) search for transport routes and tickets:

(1)

a. User opens the app and sees the landing page, which outlines current location, transport options and preferred routes.

b. User clicks on the three stripes in the top left corner symbolising a pull-out menu bar.

c. User chooses ‘Account’ and moves into his user account

d. User chooses ‘Buy Credit’ and is prompted to choose preferential payment method.

e. After entering the relevant details and confirming payment the credits are added to the account.

(2)

a. User has either previously acquired tokens or has just entered the app however, is searching for a trip.

b. User clicks Search and is prompted to enter a destination or choose a saved address from a list provided below.

c. New details are entered and the transportation mode is chosen.

d. User is now shown the fastest, cheapest and most efficient routes and can freely choose the most suitable.

e. After choosing a ticket type, the user is displayed the details of the ticket and is asked to pay or top-up credit.

Conclusion

This task allowed me to dive into the creative process of developing concepts that lie at the intersection of desirability for the user, feasibility in terms of current infrastructure, technological trends and viability for the business.

Although I initially struggled conceptualizing solutions that addressed the issues, breaking down the task into the individual design thinking elements enhanced the experience, as I was consistently developing, testing, failing and repeating, which really drove the creative process, while stepping into and understanding the users experience. Being able to visualise and test the solutions, then just theories, allowed me to go through different user experiences. This wider scope helped prioritise the theories that addressed the largest number of paint points, finally and confidently leading to our main prototype.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Annoying notifications: Are they still relevant?

My Top Takeaways from Museums and the Web 2018

My experience using a taxi app abroad

I tried to redesign the new MTA app

Every book I had to read in my UX master’s program

A blue and white coffee mug sits atop a stack of 5 books, on the floor, against a wall. Next to them are the legs of a lamp.

Can you really differentiate between a Good or a Bad Design?

Good and bad design cover

Elysium Live AMA Summary in May

I AM WEIRD – going beyond WEIRD

Text — WEIRD

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
Maximilian Stoll

Maximilian Stoll

More from Medium

BEHAVIOUR OF THE OBJECT,

ProNoBot — Gender Identity Conversation ChatBot

My First Phase of Life Ended at an Emo Concert. Now The Second Phase Starts.