Payment method for the Citymapper app

As part oft the pre-work for a UX-/UI-Design remote Bootcamp at Ironhack I was asked to develop an idea for a payment system for Citymapper.

The special thing at Citymapper is, that they suggest not only bus and train as a trip route but rather offer more different options, like “easy to follow” or “mixed” (including bike etc.).

My survey revealed, a user often would like to spend not more than 15 minutes with planning a route within Berlin. Accordingly, payment should also take as little time as possible.

As an additional requirement, I put the variety of payment options — because in a big city like Berlin, a wide variety of people are from different social and national backgrounds and not every payment option is available to each of them. Additionally, what makes Citymapper unique is the diversity of option — so why stop short of the goal? ;)

Nevertheless for my quick draft I have limited myself to the following payment options:

  • Mobile pay (Phone)
  • Credit balance (Guthaben)
  • PayPal
  • Credit card
And this is where we start: a screenshot of a travel route suggested by Citymapper.
And this is where we start: a screenshot of a travel route suggested by Citymapper.
And this is where we start: a screenshot of a travel route suggested by Citymapper.

By pressing the ticket Button you get to an overlay where You can select between online payment, what is common, right, but also find out whether you could buy the ticket at the stop where You take Your first bus / train, and, if so, how. People who live in Berlin and are on social benefits or children may press ‘other’ to select from different pricing options.

Now the user is going to set the time and choose the payment option that suits her or him.

Done! You can now book another ticket for Your companion or for an other travel route, or just switch the overlay away and start Your journey.

This is my first wireframe draft, and its not perfect, but a good start and I am honestly a bit proud of me. However it only includes the simulierst option, i.e. traveling with only a single provider (e.g. BVG). Developing a payment system that takes into account multiple providers and is still intuitive to use would be a greater challenge.

I hope You liked it.

P.S. I used this template for my wireframe: https://www.pinterest.de/pin/80783387040734507/