How to improve User Experience with Design Thinking
An experiment with the Citymapper app
Maybe you noticed that there’s a bunch of Medium articles dealing with the topic of Citymapper. You’re wondering why? That is actually part of a challenge from the UX/UI Bootcamp in Ironhack.
The first assignment is setting up a new feature on the Citymapper app and sharing our experience on Medium.
Before starting, I need to confess something: although I have been consuming tons of written content for years, I thoroughly avoided writing myself.
I used to love writing, but reading so much good content made me feel unsure of sharing my texts, especially when it’s not in my native language. It seems that I can’t avoid it this time, so let’s enjoy the ride!
Citymapper, ‘the ultimate transit app.’
Citymapper is a commuting app that helps over a million people plan their daily city trips. This project started in London in 2011 and has been growing ever since, and keeps offering various commuting options with any transportation.
I spent some time browsing the app and the website to understand the project and what makes its difference. I enjoyed that one: while browsing the web interface, I noticed a specific character designed for each city. This may not seem relevant at first, but this adds fun and emotion to the experience because it talks about the users themselves and makes it easier to connect. For example, the Berlin character is holding a beer/soda bottle, which is part of the city's vibe.
I also talked about this app to get some feedback, and I heard a funny anecdote that I wanted to share with you. Someone told me that they noticed that the interface changes at night, with bigger icons and bigger text, to help users read better if they were not sober. Is that even true?
I could not access that interface myself (maybe that’s not a feature that still runs in Corona times). But I liked the idea of adapting the look of an app regarding the time of the day, which is quite user empathetic. I’ll keep that one in mind for my next interface designs.
After some time, I realized I completely lost track of time during my researches. We were not even supposed to dig so deep into our investigations!
So I took the time to reframe my task for this challenge: we have to imagine a way to solve the different public transport tickets the users have to purchase in the app.
While researching, I realized that a feature appeared for London users in 2019: the Citymapper PASS. With a physical plastic card and a flat weekly rate, the users have access to different mobility options.
That’s a smart way to link a physical card with an app! It connects with the users' habits, and a physical card is a reassuring tool. This option is currently not available outside of London, but maybe this will be introduced to more cities in the future, who knows?
Creating a new feature through Design Thinking
We are going to use Design Thinking for this assignment. Design Thinking is a human-centered process that gives a frame for creative problem-solving.
It’s built in five steps: empathize, define, ideate, prototype, and test.
In this graphic above, the process looks linear, with a beginning and an end. In reality, each of these steps is making a whole and are linked with each other.
Thanks to its flexibility, Design Thinking became popular in the tech industry. But Design Thinking is not aimed at tech only and can also be used in any other context.
“Empathize with your users”: how I made my first mistake.
Meeting the users and understanding their problems: this is the first step of Design Thinking. This helps the team create a guideline that keeps them focus on the user’s needs. After all, creating something that answers a user’s need is the first step of a product's success (although some marketers could argue that they can create the need, that’s another story).
For this first step, we were asked to interview five persons, but with a bit of preparation before! We had to define:
- the audience
- the main competitors of Citymapper
- and the tone of the interviews
I chose the audience this way: those who are living in cities. Since tourism has been dramatically impacted by the pandemic this year, I chose to target a local crowd for this assignment and focus on Berlin.
My target users should use public transportation at least once in a while and do not own a car. I chose not to put an age limit on my interviewees.
In Berlin, many people use the BVG app. BVG (the Berliner Verkehrsbetriebe) is the leading public transport provider of Berlin. The app is widely used and is solid and reliable but for public transportation only. The app excludes all alternative options like a rental scooter, carpooling, rental bike, etc.
I thought I was lucky enough to have access to a pool of potential interviewees. I am part of an artist community in Berlin-Wedding, which gathers 85 creatives. I decided to go there and to interview anyone who would accept answering my questions.
That was a mistake. I realized too late that I was not picky enough with my interviewees because I did not ask them if they were part of my audience beforehand.
I ended up interviewing people who had nothing to do with my target: travelers with no tickets (‘Schwarzfahrer’ as we call them in Germany), users who borrowed the transportation card from a relative, or even technophobes who would never download an app on their smartphone. Their feedback was not bringing the input I needed on their experience in buying a transportation ticket.
I realized that interviewing the artists in my studio connected me with a very specific population segment. The emerging artists crowd a financially vulnerable population, especially in Corona times. They may indeed have a consuming alternative approach.
I learned my first lesson: choose your interviewees carefully, pick them in different social and professional categories to get more variety in the feedback you will gather.
Define: the users’ problem is your problem.
Thankfully, some interviewees gave me valuable input that helped me define the issues users could face while using the ticket vending machines.
Here is a list:
- the lack of responsiveness from the touchscreen
- a confusing interface
- the wait in the line, which can make you miss your train
- the technical issues during the payment step
- the feeling of unsafety when people ask for money during the payment
All this can make buying the ticket a hassle and even maybe make some skip this part.
Regarding the ticket buying process on the BVG App, the feedback is that the app works well for basic actions (buying a simple ticket), but it could be more intuitive. Some online reviews mentioned some bugs and inaccuracies regarding the bus arrival. Another feedback: it is not easy to add options on a ticket. If one wants to bring their bike on the train, they would have to make the process twice.
Ideation: all ideas are welcome!
Next step: ideation. It goes with brainstorming sessions. The goal of a brainstorming session is to speak up all ideas without limits. The strategy is to allow the brain to be free of limitations and let creative concepts appear. There are different methods to create good brainstorming. One rule: it should be fun and interactive.
Prototype: pen, paper, scissors, ready!
Here comes the moment we will use all the information and ideas we gathered to create our prototype.
It is recommended to keep the prototype as cheap as possible: get quick feedback and fail quickly.
Pen and paper are your best friends. It’s easier to add or remove ideas on a paper prototype, and even the non-designers can participate. By keeping the prototype minimalist, the team can focus better on the functionalities rather than the app's graphical aspect.
My idea was not to overwhelm the user with too many options when not necessary. I wanted the flow to be simple. The user would have to pick their journey and how they want to travel. I also want to find a way to simplify the ticketing to only make one payment for the whole trip.
Here is the prototype I sketched for the new feature of Citymapper:
The trip will automatically define the travel zone rate and the transportation type the users have selected.
When the user chooses the best journey for them, they will tap on ‘buy my ticket’ and access the buying ticket screen, where they can select between different options:
- a bike
- another traveler
- a child
- group travel (up to 5 adults)
Once the payment is confirmed, a QR code will be generated. This QR code includes all transportation types for the trip.
It can be scanned by the controller on the train or showed to a Uber driver before getting in the car. The user could also activate an electric scooter from the Citymapper interface.
Thanks to the geo-tracking, the app can live check if there are any delays in the commute and suggest alternative travels in real-time.
All the tickets can be found on the “My tickets” section of the app, available on the app’s landing page. The user will also have the possibility to export the bills of all the tickets.
Test in real life with real people
The next step would be the testing one.
The team will test the prototype with a test user group to collect feedback. It is recommended to lead five interviews, preferably on the same day.
It’s important to reassure the test users by telling them that we are not testing them, but a prototype. We want to prevent them from feeling frustrated if they cannot use the features correctly: they are indeed testing a non-finished product.
During the test phase, one person will lead the interview.
This person will make the test user feel comfortable and take care of having a fluent interview. Another team will observe how the user interacts with the prototype. This team will be preferably in another room, looking at the recordings of the interview. We will encourage the users to think out loud and explain what they are doing and seeing.
Afterward, the team will look at all the input they gathered during the interviews and decide what works and what does not.
Once this step is done: the team will learn, iterate, and do it again!
