Ironhack’s Pre-work: Design Thinking Challenge 1
Hello! I’m Jorge Antonio Ramírez Padilla. I am an Artificial Intelligence Engineer (a fancy way my university calls Computer Science) working as a Front-End developer in Aguascalientes, Mexico. I have enrolled into Iron Hack’s Full Time UI/UX bootcamp taking place in Berlin, Germany from October to December. However, I need to complete a pre-work to get me ready to begin my formal classes. This is my first assignment. My first challenge.
Challenge 1: Design Thinking
For this first challenge, I need to create a solution for my client. This client is Citymapper. I need to empathize, define a problem statement, ideate a solution and build a prototype.
Although the current product of Citymapper already solves some of the main problems of the urban mobility, there is one pain point for many users: the different amount of public transport tickets the users have to purchase.
Public transport tickets come in paper or plastic cards. Very often buying different public transport tickets is necessary to go from point A to B. And the process of buying these tickets can be very annoying (queues, vending machines that don’t work, etc.).
Finally, things like pricing or purchasing the correct ticket can become a real pain when you are abroad.
Step 1: Empathize
First, I need to understand my user. I will interview 5 people who have used public transport to get to know their main issues when purchasing a ticket to get to where they need to be.
Also, I need to seek for any competition my client has. What I have experienced and looked into, it varies from city to city, even from country to country.
For starters, in New York City, you can only purchase a public transport by going to the machines and paying for it (or getting a card from your employer, but that’s a very particular case. In Berlin, you too can purchase your tickets on the machines, but you can also purchase the tickets online via their app. Other places like Mexico City you have to purchase the ticket for each ride directly from the station, as well as getting a pre-loaded ticket. In conclusion, Citymapper has to adapt to each city based on their needs and local competition.
I conducted 5 interviews with people who have used public transport both in their cities and also abroad. This gave me a great source of information that is very valuable.
Because all the people I interviewed are Mexicans, they all coincided in the way they use public transport. Here in Mexico, using the bus or using the Metro if the city has it, they have a “pay-per-ride” system.
It varies from city to city, and it’s not very easy to know exactly how much the cost of the ride will be if you don’t live in that city or ask someone who does. There is also a Student Card that lets you get a discount for each ride but, again, it varies from city to city.
For their international experiences, things were very different. New York, San Diego, Tokyo, Seattle, all with different kinds of public transport, but they shared similar advantages. You could purchase a daily ticket, weekly ticket, monthly ticket and even yearly ticket, all from an app or directly in the terminal.
Most of these share bus and metro systems, so you can use the same card for both. Usually, each city has a proprietary app but it usually only helps you see the map or give you instructions on how to get from point A to point B, disregarding the cost of the ride.
To navigate through the city using public transport, most of them use Google Maps. Other usual apps were Transit, Moovit and One Bus Away. None of the people I interviewed knew Citymapper, so they may be potential customers.
Step 2: Define
So, now after I’ve done some research, I need to define a problem statement. I came to the conclusion that the main pain point for the customer is having to know a lot of information scattered through multiple places and not having it all in one place.
Since it depends from city to city, public transport service to public transport service, it has to be very simple for the user to know how much he is going to spend for the ride. We don’t want them to be confused and frustrated which leads to them stop using the app. We want them to get to their destination as soon as possible using our app from start to finish.
Step 3: Ideate
This is where the fun begins. Having done my research and now ready to begin ideating some solutions, it’s clear that having a universal solution is a great challenge, so I’ll try to come up with a solution that better suits all or most of cities necessities.
I created a mind map of some potential solutions. One solution is to inform the user how much money they need to get to point A to point B, based on how many stops or changes of transport they might have to do and tell them where they can purchase the tickets. Other is to just give them a list of the available tickets on the city, but that is just not very user friendly.
Finally, I decided on a better solution. The user can have a digital ticket wallet where they can purchase and store multiple kinds of tickets without needing to have a physical ticket. This will work by purchasing tickets with a debit or credit card that they can use as a voucher to show to a guard, or even input a code into a physical ticket booth so it can print a ticket if needed.
Step 4: Prototype
I decided to go with the approach of letting the user purchase tickets while setting up the app for the first time, or in the future while they use the app. We will have a Ticket Wallet, which will have the list of cities where they have tickets, the tickets for each city. They can see the ticket status, either if it’s currently valid, expired ones, access to the code to get physical tickets, etc. In the prototype sketches, the yellow highlights are the buttons clicked to continue to the next screen. The green highlights are important information for the user and the blue highlights are important information which leads to other pages not drawn in the prototype because they are not relevant to the current design.
First, we will need to take into account first time users. For this, I’ve designed a simple ‘Welcome’ page to let the user input the data of where they will travel to get the information that specific city.
On screen 1), the user has to choose the location where they will be using the app.
Screen 2) is where they can either choose a specific city, or use the phone’s location to look for nearby available cities automatically by displaying it in a modal. 2a) is the case they want to choose a specific city, a list of the cities will show, as well as a search bar to help the user with their search.
After they choose their city, they can either continue with the setup process, or skip it and worry about that stuff later when they need it as seen on screen 3). In this case, the user will continue with the process. The next step is the ‘Purchase ticket’ phase.
On screen 4), a list of categories will display to show the user the kinds of tickets available. On each categories, a grid of each ticket kind related to the category will be displayed.
Upon selecting a ticket, the user will be taken to screen 5), where they will be able to get more information of that ticket, as well as a prompt to ‘Add to cart’ or directly ‘Buy’ the ticket. On the bottom, it will be displayed where this information comes from, in this case is the BVG which gives information and handles the tickets in Berlin.
After this steps, the user will now have to insert their payment information, as shown on screen 6). Depending on the city, it can accept Debit Cards, Credit Cards or even payment at convenience stores if available.
Right after the purchase is done, the user will be promped with a confirmed modal, followed by the information of their ticket as shown on screen 7) which will include:
- The type of ticket
- A QR code that can be scanned by guards or at any ticket booth that can read the code.
- Below the QR code, there is a alphanumerical code which can be introduced in a ticket booth so the user may get a physical ticket.
- The expiration date of the ticket, as well as a countdown to remind the user how many days are left until the ticket expires. This will work also as a notification system to alert the user when the ticket is about to expire.
- A ‘More info’ button which will show the same information as shown on screen 5).
Finally, on the screen 8) the user can access their ticket history by going into the settings menu. The ticket history will be stored on the app, but if the user logs in into the app, the history will be uploaded to their account where it can be accessible even if the user deletes the app.
This was a very interesting challenge. Knowing how public transport in general works so differently from city to city demands finding common ground to help anyone, local or tourist, to move through a city in a familiar way with not so very complicated steps.
This challenge helped me put into work all the theory learned on the first module of the pre-work that gave me the tools to think and formulate an interesting idea on how to solve this issue.
I know implementing this kinds of ideas into a working product worldwide is a very complicated process full of multiple people involved, technology and cultural limitations, but that’s the way innovation works. We have to find a way to improve our everyday lives and ground those ideas into a possible and new product.