IronHack Prework, Challenge 1-Design Thinking
Welcome to my first article!
I will be writing about my first challenge in the Iron Hack UX\UI Design prework, and I’m beyond excited to share my progress with all of you.
Let’s do it!!
The main goal is to create a feature for the app Citymapper that solves the pain of having to purchase different public transport tickets by different channels.
Citymapper is a public transit and mapping app that shows transport options and timetables in real-time. Besides that, the app shows the fastest and easier way to get from one point to another using public transportations like bus, metro, rail, ferry, and tram. If needed, it combines two or more of those to make the best journey for the user. It also shows alternative ways to get to your destination like taking a taxi or even a scooter.
For this exercise, we will be taking into consideration that:
a. Users already have all their information on the app, they will neither need to log in nor enter any data when paying/checking-out.
b. For now, I will forget about security issues and other limitations. I will focus on finding a quick and user-friendly solution.
The main learning goal of this challenge was to make me go through and learn the Design Thinking process, defined by IDEO as the following steps:
1- Empathize
The goal of this step is to understand who I’m designing for, mainly to understand the user’s needs and pain points and to get familiar with the product. For that, I will conduct 5 interviews with public transport users.
(It was my first time preparing an interview guide all by myself, so I was a little lost about formulating the questions, after some research I found this article written by Stéphanie Walter that was really helpful to me, if you are not 100% confident about interview guides, I highly recommend it!)
As a prep before the interviews, to help me set the right mindset and come up with the most appropriate solutions, I asked myself the following questions:
· What problem are you solving?
Purchasing the right ticket and in the most convenient way, with no need to buy multiple tickets and waste all that paper and time!
· Who is your audience?
My target audience is travelers that use public transportations when they are abroad and feel the need to make the process easier, cheaper, and faster.
· Who is your client’s competition?
My client competition is other public transit apps like Moovit and Google Maps.
· What’s the tone/feeling?
The app is very complete, it has a wide variety of options to choose from, and it’s well divided. The interface is nice and easy to understand, even though it has a lot of information.
2- Define
The goal of “define” is to create a point of view that is based on the user needs and insights, so I wrote down my findings from the interviews and detected the main problems that I wanted to solve, those were:
- The lack of clear information about the different tickets available.
- Box offices closed or full of people.
- Ticket Vending Machines that don’t work properly.
- Too many wasted paper tickets at the end of the day.
- Not being aware of discounts like 24 hours passes and ending up paying more.
From there, I came up with the following problem statement:
“Travelers that are unfamiliarised with the cities need an easier, faster and cheaper way to move around without the need of buying multiple tickets with the possibility to buy the wrong or most expansive ones and wasting time in long lines.”
3- Ideate
Here, the goal is to come up with as many creative solutions as possible, doing so you can choose the one that fits your user’s needs better. For that, I used the brainstorm technique and ended up with the following ideas:
a. Choose the tickets options on the app and pay at the station: This is a good option for those who have difficulties finding the right tickets because of the lack of information when buying from vending machines but don’t want to log in their credit card information on the app or want the option to pay by cash.
b. Buy tickets on the app and pick them up at the vending machine or box office: This is a good option for people who like to have paper tickets, in this case, they would buy all the tickets they wanted on the app and pick up only one card with all of them at the box office or vending machine using a one-time code.
c. Buy the tickets on the app and have them stored in a virtual wallet: This solution is useful for the users who want to have it all virtually and in an easy and fast way, this means that they can buy the tickets they want from the options in the app (varying according to the cities limitations) and have them stored directly in the app, using a QR code to validate at the validation point just like a paper card would.
Considering the findings from the interviews, like avoiding wasting time in long lines or getting frustrated with vending machines that don’t work or don’t accept credit card payment, I picked the solution “c” as the one that would fit my user’s needs better.
4- Prototype
After picking a “good” idea, it was time to validate it and there’s no better way of doing that than building a prototype.
There are three main types of prototypes:
- Low fidelity prototype: they are a simpler and budget-friendly way to materialize your ideas, they consist of sticky notes and sketches. All you need is a pen, paper, and a creative idea. (I will stick to this one, for now!!)
- Mid-fidelity prototype: these are also called wireframes, it is a more realistic design but still mostly black and white focusing on the users flow and information architecture.
- High fidelity prototype: finally, the last step before development! This type of prototype includes a visual design. In this phase, we add the colors, typography, and all other visual features to make your product aesthetically pleasing and it almost represents the finished product. It is more expansive though, so I highly recommend going through the two last steps as many times as possible before building a high-fi prototype to avoid any future problems.
So, after picking the solution “c”, it was time to develop a few hand-sketch screens. Keep in mind that the goal of a low-fi prototype is to organize the idea into the screen, not to have a beautiful drawing!
Considering that the goal of this project is to help users buy fewer tickets when traveling, I added to the app’s home page a big “buy tickets” button as one of the main features of the app. I also added, on the home page, at the bottom right corner of the screen, a “my tickets” button represented by an avatar (we will go there later) and also a currency and language option so that the user can choose according to their nationalities.
I will go through 3 different cases that the users can encounter and the solutions I came up with.
#1 Users want to plan the trips or buy tickets ahead.
The user clicks on the “buy tickets” bar (#1), which leads to a page for them to choose one of the ticket options (#2) available in Lisbon, they can choose from a journey ticket, 24h pass, 1-week pass, or monthly pass, according to their needs. To plan a trip they choose the “journey ticket” that will lead to a page where they can fill in the starting point, destination, and departure day and time (#3). Once they are done with the journey information, several transport options (#4) pops-up prioritizing the cheaper and fastest ones, they choose one and select the payment method (#5), after the payment they receive the ticket (#6) with all the information they need and a QR code that will be used to enter the transports. -Note that one ticket can have different types of transportations, and when the user uses one of them, a “check” appears inside the box close to it so they can track how much credit they still have.
#2 Users want to buy a pass to use multiple times.
One sad thing about traveling is knowing you missed a good deal because you didn’t get the right information. Case #2 is for the users that want to buy more than one ticket and save some money!
The first step is the same as in case #1, the user clicks on the “buy tickets” bar (#1) and chooses one of the passes options (#2): 24h pass, one-week pass, or monthly pass (this option was added because 4 of the 5 interviewers said it would be nice to have a digital copy of their monthly pass in their hometown so they never forget it or lose it!). Any of the options will lead to a confirmation and payment page (#3) and after that, they will get one of the three ticket options (#3.1), (#3.2), or (#3.3), according to their needs.
#3 Users search for a journey and decide to buy the tickets for it.
This case is when the users use the app to search for a route and after picking one, they decide to buy tickets for it.
The user clicks on the search bar (#1), then selects a starting point and a destination (#2) — note that they can also choose a different time and filter their options. Once they fill in the information, they have to choose one of the routes options (#3) that are organized by the shortest estimated arriving time. When the user clicks on one of them, they get all the route details (#4) and on the bottom, there’s an option to buy tickets, by clicking, a new screen will show up with the price and an option to choose a payment method (#5), when the payment is complete they get the ticket (#6) and can easily go back to the route by swiping left!
As mentioned above, I added a “your tickets” button to the apps homepage. When the users click on it a new screen shows up (“Your wallet!” (#2)) with all their valid purchased tickets organized as if they were cards inside a wallet. If the user has tickets from multiple cities, they are all going to be there, ready to use! I also added a settings button to this screen so the users can check their past payments, old tickets, or get extra information about the app.
5- Test
This is the step to test my prototype, it is super important but.. I’m gonna have to leave it for the next article!
Here’s a little sketch-note about design thinking i made for the last exercise :)
Last words…
This was my first contact with the design thinking process and I really enjoyed it.
I confess that, at first, I was a little worried about the interviews but in the end it was a very nice experience, and it really helps a lot when it comes to gathering creative ideas!
I also really enjoyed drawing the prototypes, even thought I’m definitely not a drawer, it was super fun and I literally lost track of time while doing it. (So many last-minute changes!!)
I´m really excited to learn more in the bootcamp and share my progress here with you!
Thank you for taking the time to read my article, I hope you enjoyed my work as much as I enjoyed doing it, and feel free to leave any suggestions/ comments/feedback, they will be very much appreciated!
