City Mapper: Design Thinking + Prototype
City Mapper is a public transit app that maps services that display transport options. The app provides live timing between two locations in a desired city. The app includes various modes of transportation such as: walking, cycling, driving, in addition to public transport. City Mapper’s goal is to solve the problems of urban mobility by offering the quickest and cheapest public and private transport routes to their users.
However traveling can be very stressful for someone who is unfamiliar with the area. People have busy lifestyles and may not have time to research the area. City Mapper should alleviate this stress and make traveling with in a city stress-free and a seamless process. In order to make sure that the City Mapper app is user friendly, design thinking and empathy interviews were conducted to understand the app better.
Empathize
What problem am I solving?
Eliminating the need for various types of public transport tickets, by having everything all in one place.
Who is the target audience?
50% of users are from the UK, 31% are from France
The company is based in London, so it makes sense that a large portion of users are from the UK
Gender is pretty 50–50 with Female: 47.67% and Male: 52.33%
About 36% of users are from ages 25–34
The target audience is also interested in topics such as News, Shopping, and Travel
Target audience analytics from: https://www.similarweb.com/website/citymapper.com/#overview
Who is City Mapper’s Competition?
Most users use Apple/Google maps to get around. These are very familiar apps and are pretty intuitive to use. What makes City Mapper stand out, is the personalization of the app. The app gives a very detailed explanation to getting to the final destination. It shows how many calories a person could burn by walking/cycling. The app will even describe the best location to sit on a bus/train. However, Apple/Google maps does a great job with seamlessly integrating with mobile devices and online purchasing.
What is the tone and feeling of City Mapper?
The tone of the app is very youthful. There are little mascot characters that represent each city; this adds to a youthful theme. The app also uses bright colors such as bright greens, yellows, and reds. The app is detailed and welcoming to ensure young/newer travelers are comfortable getting around in a unfamiliar city. The welcoming tone leaves users with a feeling of secureness and trust in the app.
After personally researching City Mapper, I conducted empathy interviews with 5 users. These interviews included open-ended questions that allowed users to tell stories of their travel experiences. In these interviews, I was able to determine what aspects of travel users were most passionate about and where paint points exist in the City Mapper app.
In the interviews users commented:
“I never know when to buy tickets or where to buy them from”
“Should I buy a travel book, or should I just find someone who has been to [place] before?”
“Do I need to print out my tickets, or should I save them to my Apple wallet?”
“I definitely prefer going digital, I like all of my tickets and information in one place — my phone”
“I’m very careful booking. Now, I’ll book straight through the airline or transportation company. I’ve have bad experiences with third party sites in not seeing the fine print like ‘click here to get this discount’, but not getting one of the features that I initially wanted.”
“I would be more open to trying new means of transportation, if I had someone experienced to walk me through it”
After experimenting around in the app users commented:
“It’s nice that it tells you different prices for each mode of transportation, but how do I actually purchase it”
“I like that there are features to ‘walk less’, but why do these have to be premium features?”
“My bookings are usually scattered throughout my email”
“My booking reservations are in my Apple calendar. I’ll see them on my Apple Watch. I also save a screen shot to my photos as well as a copy to my email in a specific folder.”
“There’s no option if I wanted to drive a car myself, only to get a taxi by car.”
“It’s weird that it initially shows a straight line to the destination”
“I see that taking a scooter would be € 3, but how do I actually purchase it?”
Define
Of the usability issues/concerns I witnessed in the empathy interviews, I feel that City Mapper should prioritize a user-friendly user flow of purchasing and using a transportation ticket. This user flow would include: knowing when to booking a ticket, knowing which ticket to book, having multiple options to purchase the ticket (Mobile Pay, Credit/Debit Card, or possible reward system), and a consistent place that users can go to to find booking confirmations.
Ideate
Possible solutions to address main usability concerns:
Tickets automatically get added to apple/ phone wallet — same technology as Apple Pay to apply tickets — perhaps an option for printed tickets (where to pickup printed tickets)
The app contains a storage of receipts/ confirmations that tickets were purchased
Perhaps when you sign up, City Mapper will send you a plastic card of sorts, that when you need a plastic card to work for machines, your ticket will already be loaded. (Like a Pre-paid card)
A “Before you leave Checklist” — before you make your trip, a checklist will pop up saying “do you have: x,y,z?” And users can add to this list.
Lock screen navigation — users don’t have to continuously open up the app.
A way to add multiple stops for a coffee break or bathroom break
Perhaps this could synch with either Apple or Google Calendar or Todo list — perhaps the todo list can also be found in the app
A section that provides off peak and peak times. Similar to google maps that includes peak times for businesses, but for travel. For instance, when is the best time to purchase tickets.
Perhaps users can turn on notifications that let users know when prices for tickets are discounted.
Perhaps there could even be a spot for reviews from users, this could also be a place for tips and tricks.
Final Possible Solution: Upon selecting the desired transportation route, users are prompted to pay for the booking with either Apple/Google/Samsung Pay, PayPal, or Credit/Debit card. There is also a separate option for users to purchase or reload a prepaid travel card that contains booking information. Users can use the card in place of a paper or digital ticket. After payment is determined successful, a copy of the receipt will automatically go in a folder on the City Mapper app as well as an email. Ten minutes before the trip, users will receive a notification reminding them of anything necessary for the trip (print/digital card, personal items, etc.). Users are able to add to this checklist and mark that they have said items.
To execute this plan I will prototype additional user flow pages that include a payment process, area for booking reservations, and an excursion checklist. The physical reloadable prepaid travel card would be ideal for those who prefer a physical card as a ticket. A prototype of this card would be similar to a plastic metro card.
In creating the prototype I noticed that a nice feature to add would be in the “Receipt History” page. I added a feature on this page so that users would be able to add receipts or booking confirmations from outside sources. User would then be able to keep bookings from City Mapper and from third party sites all in one place.
Ideally, I would then have more users test this paper prototype and then make changes to move forward into creating a low-fi wireframe, high-fi wireframe, and then a UI prototype in Figma.