Citymapper: Adding new feature using design thinking

Ironhack Prework’s 1st Challenge: Design Thinking

Here we go ladies and gentlemen, my first challenge as a rookie UX/UI designer to create a new feature for Citymapper using a Design Thinking.

Citymapper: The Ultimate Transport App is a public transit app and mapping service which displays transport options, usually with live timing, between any two locations in a supported city. It integrates data for all urban modes of transport, including walking, cycling, and driving, in addition to public transport.

First of all, let me explain how I deal with this challenge. I split my design thinking process to;

• Understanding the project such as project background, find the problems, and problems solving.
• Then I go to the creative process, such as design development and finished with design refinement by creating the prototype.

Understanding the project by questioning; What problem am I solving, Who is the audience, Who is the client’s competition? What’s the tone/feeling?

WHAT?

I developed insight after interviewing 5 volunteers who came from many countries such as: Australia, UK, France, and the results are;

Based on their experience, buying an offline ticket sometimes a waste of times if they want to do a multiple destination, sometimes there is also a queue, and they feel lost in navigating the vending machine and direction. They are also worried they lost their ticket or got stolen. Also sometimes they found that was not easy to refund their ticket in case of problems.

WHO?

I create this persona to get to know better the audience.

So basically, this person is tend to avoid wasting her time in her productive days and she needs everything clear and organize in a compact way.

Now we move to the question who are the competitors, there are;

Some of the big competitors that exist.

WHAT?

Next question is What’s the tone/feeling? Let me explain this keywords:

• User-friendly: Easy to use feature that are; Simple, so the interface is not overly complex, straightforward, and providing quick access buy the ticket. Clean, interface should be well-organized, making it easy to locate different tools and options. Intuitive, in order to be user-friendly, an interface must be make sense to the average user and should require minimal explanation for how to use it.
• Informative: The new feature include the additional informations such as station names, exit number/name, where to top up the ticket, etc.
• Worry-free: The feature has cloud system so the audience could save their ticket and it also has 3D secure to complete an additional verification step with the card issuer when paying.

The creative process

FAST TRACK, the new feature on Citymapper app.

The new feature called FAST TRACK. The idea is to centralize one way or return tickets to your destinations by recharging/top up your balance. There are two ways to use this new feature. First you can order your FAST TRACK Pass on you application (depends on which city you’re in) or you can have your FAST TRACK E-Pass in one click.

Then you choose your amount starting from 5 EUR (currency might be change when you’re abroad) and you’re good to go!

User flow prototype

1. Enter your destination and go to FAST TRACK feature.
2. Select your ticket type and top up your balance.
3. Select your payment method.
4. You can access your FAST TRACK E-Pass and see your journey details with time departure and arrival. You can also click the “Ask your station” button to get your additional information and “Show map” button.
5. Your FAST TRACK E-Pass with details such as purchase date, destination, ticket type, expiration date, and of course the QR code.

📝 Learning testimonial 🤓

The first challenge was very exciting! It’s stimulated my right and left brain to find the problems and solution and also get ready for the next step to be an ux/ui designer. I like the idea of using a transport application, because we use it mostly every time and since you live in a big city you know exactly the problem you face every time when you commuting.