Citymapper

Lou RuizMa
8 min readMay 23, 2021

--

Ironhack UX/UI Bootcamp Prework-Challenge 1: Design Thinking

What is your next destination?

Imagine that you have to pass all day going from one side to the city to the other, or you have to take a train every day from your town to your work, what if your university is in the opposite place from your home? There are many different cases.

Many people in your daily routine they need combining train, subway, bus, bike…. how much time do they spend trying to solve some of the problems of the urban mobility?

This is my first UX/UI challenge… This is CITYMAPPER

“Here’s to the world’s greatest cities” by Citymapper in Vimeo.

Citymapper is a useful mapping app to move around the city, it solves the mains problems of urban mobility. This app work out the best route to go from point A to B, combining all the different public transports, calculating also the estimated time and the cost of route, doing the mobility in the city really easy. However, Citymapper haven’t got the possibility to purchase different public transport tickets by different channels, causing consequently, a real issue to the user.

Design thinking process to solve the problem

First of all, let us try to understand what is Design thinking?

Design thinking is a methodology that is used to solve complex issues between clients and users, on top of that, allows us to find new opportunities to make their relationships better. Your protocol consist of five phases.

Open Innovation Community

Once we know what is the Design Thinking, it is time to put it into practice!!

Empathize

Firstly, we need to know and understand the Citymapper users and what are their needs. We should empathize with them using interview techniques, and we must focus on the user’s viewpoint to find out what are the main problems of the app.

Before starting the user’s interviews I used and analyzed the app to know how it works and who will be the users. I did a sketching to put my ideas in order, and detect possible problems.

Citymapper sketching

Bearing this sketch in mind, I could decide who will be my audience and what questions I will ask to them. I prepared some questions:

(Some starting questions)

How do you usually use the public transport?

What tours do you usually do?

How many different transports do you combine? And how many tickets do you buy?

Do you think it is satisfactory the route search process?

How about the purchase of tickets?

What is the main issue that you find when you do a route?

How much time do you need to do a new route?

Do you know Citymapper?

What apps do you use?

What do you think the app should have?

Any suggestions? Or something that you would like to say.

(Appreciations and farewell)

I interviewed five persons between twenty and forty years old, who are usually users of public transport, they take a train and subway two or three times a week. I tried to understand each one and what are their frustrations when they take their routes. The main problems that I found are the following:

. They have to purchase a lot of tickets, one for each public transport that they use. Incidentally, we must consider that this practice isn’t eco-friendly.

. Tickets machines so many times don’t work and the users have to buy a single ticket in the box office, and another day, they buy a bonus ticket.

. The box office only accepts cash. They usually use electronic payment method like card, iwatch or phone.

. Tickets deteriorate with the use and can be lost. For instance, the monthly tickets are very expensive and after using them for a long time get damaged, or even worse if they break or get lost it can become a real pain for the users.

. There is neither breakdown or delay information about the routes, nor real-time routes. The users are so stressed out when the train or metro has a delay, because they haven’t got any information, they don’t know how much time they will be waiting, and what time they will arrive their destination, (probably their work place, what if they just have a meeting this day?) It’s so annoying.

. They have to use simultaneous apps to do their routes, Google Maps, Moovit, Adif… although they don’t work well either.

. They like to know if there are promotions or discounts in others transports or take advantage of the app.

. They like to get in contact with the station when they have any problem in the transport, like when they forget something or to report an incident.

I really enjoyed listening, talking and interviewing different people, because as users of public transport, they really know how it works and suffer it very often. Focusing on the user’s viewpoint now I can detect the real problems that need to be solved.

Define a problem

As a result of the different interviews, for me, the gist of the matter it is focuses on two main issues. On the one hand, we got the very annoying process of buying the various physical public transport tickets, each one, in its box office. On the other hand, the users haven’t got any information about breakdowns or delay in transports, in my opinion, this question causes a lot of anxiety because they don’t know when they will arrive to their destination. It is vital for the users of public transport to know the real-time of their routes.

Ideate possible solutions

Thinking about these problems, I decided to applicate the brainstorming techniques to see the issues more clearly and generate some good ideas to solve the problems. It is true that it worked.

Brainstorming session

As a result of the brainstorming, I had some interesting ideas that could improve the experience of the users of public transport.

I believe that in the application of Citymapper you should be able to buy all the tickets that you need at the moment you are doing the route. These tickets will be electronic, generated by a QR code, and then, you could put them away in the wallet of the app, this way, we resolve the problem of purchasing a different ticket by multiple channels, also, we solve the difficulties of having a physical tickets, moreover, it is a eco-friendly solution.

Secondly, Citymapper should be connected to other apps that give real-time information about the transport. The app should indicate in time the breakdown or delay of the transport with alarms in the route. Additionally, the app has to recalculate the time of the route, and indicate the time we will arrive to the destination. This way, we would have the users informed, and they could reorganize themselves, making the user experience better.

Besides these main solutions, I think that it would be interesting for the user experience and to engage them, if the app had a program of points that rewarded the users, offering for example discounts in tickets, or promotions in other alternative transports like Bicing or Uber.

Prototype

Following the previous ideas I prototyped the new app with the next options available:

. To buy all the e-tickets you need and put them away in the wallet.

. Route’s alarms in real time.

. Program of points.

Prototyping of new app Citymapper
  1. First we select the route and the transports. We have the option button “Buy ticket”.
  2. We press “Buy ticket”. We have all tickets to purchase and the options: “Promotional code”, “Citypoints”, “Payment method”, “Total xxx” and “Buy” button. In this screen we can do “Log in”, if we want to use de “Citypoints” it would be mandatory.
  3. Login screen. We can log in with the options “Sign in” or “Sign up” with Google, Facebook or Apple account.
  4. If we would like to use de “Citypoints” we would select how many “Citypoints” we want to use.
  5. We return to screen 2 and now we can press “Buy”.
  6. After we do de payment it would be generated de “QR codes”, one for each ticket, with the description of the ticket, number of trips and date of expiry. In this screen we got the button “Wallet” to put them away.
  7. If we press “Wallet” we have all the tickets that we can use. Also we have a left button “Return” and right button “My profile”.
  8. When we selection one ticket of the screen number 7, the QR code is generated with the description of the ticket, number of trips and date of expiry. At the top of the screen we have got the button “Return”, “Route” and “My profile”.
  9. If we press “Route” button, we have the route with information of each station, time, and real time to arrive. In this screen we could have the possible alerts in the route marked in red, if we want to know more about this alarm we will press the red mark. At the top of screen we would have available the “Wallet” and “My profile”.
  10. Alarm screen with the description of fault or delay of transport and the estimated time. In this screen we would return to the “Route” (screen number 9) or “My profile”.

Conclusion

Citymapper is a really useful app but it had a main problem, it didn’t allow to buy the tickets of different public transport, thus it caused dissatisfaction and frustration in the users. Additionally, the app didn’t inform about possible faults or delays in the transport, the users didn’t know when they would arrive to their destination, it is really important and it causes them concern. We could know this fact as a result of the interviews. Therefore, the users haven’t got a good experience with the app. I tried to focus on the main problems and ideate possible solutions like an e-ticket, alarm system to inform in real time about the route and a program of points called “Citypoints” to engage the users.

Design thinking has helped me to understand the process to know the users, identify the issues that there may be, define the main problem and generate a lot of possible solutions. I specially enjoyed sketching the different problems and prototyping the solutions. In fact, I couldn’t imagine how the sketch notes could help and motivate me.

Citymapper has been a great challenge for me, it was the first time that I could put in practice all the theory and I have enjoyed doing it!

--

--

Lou RuizMa
Lou RuizMa

Written by Lou RuizMa

I got it!! I’m a UX/UI designer

Responses (2)