Re-designing Barcelona‘s public transportation app — a UX case study

Pavithra Krishnan
UX Collective
Published in
7 min readOct 4, 2018

--

Brief
Redesign the way locals as well as tourists interact with public transportation in Barcelona city. We were not just restricted to the digital space, we could re-design the experience at various touchpoints be it mobile, desktop or a physical bus station.

This project was mentored by Anton Repponen from Anton & Irene studio and the main focus was on applying interactivity. Concept by my team — Shivani Sawant, Priya Narasimhan & Yiwen Yan.

My role: UI/UX designer, Branding & Icon design & illustrations.
Project Timeline: 3 weeks

Discovery phase

TMB (Transports Metropolitans de Barcelona) currently has an app, web presence and station displays. We still had a lot of ‘how might we’ questions gathered from our client, which required validation from our current users through user interviews. I mentioned some key ones below:

  • How can we make it easier for people schedule in advance and interact with our product on-the-go?
  • How can we make the whole experience delightful, fast and clear for people?
  • How can we “promote” the city of Barcelona with our experience to tourists and even to locals?
  • Is there any room for introducing fun, interesting or social features to our experience that would make the use of public transportation more delightful?
  • What type of features can we have if we install additional hardware / beacons in our transportation?
  • Tourists — what type of experience can be helpful for people visiting the city

Trip to the Unfamiliar — Field Research

Each of us decided to use 4 different apps (TMB, Google Maps, Moovit and Citymapper) and navigate by bus to an unfamiliar destination. We chose IKEA because it was quite far away from our university and none of us had been to the area. It gives us enough time to observe the pros & cons of the apps as well as the current travel patterns of other users in the bus. Through this field research, we looked at the pros of cons of each of these apps.

Observations for each app

Key observations & painpoints

We weren’t just identifying the negatives, there were a lot of positives that we associated with the existing apps. Citymapper allowed users to get out of the app without losing the current trip and was extremely delightful to use, Google maps is easy to use and it’s the most reliable app out there to navigate and plan our day. Key painpoints include:

1. Orientation

Orientation was one of the major problems that we all face while using any public transportation. Users who we spoke to, couldn’t identify which side the bus was going or which side they should wait on.

Which direction do I walk in?
Which side of the road should I catch my bus from?
Which exit should I take to reach my destination?

2. Access to relevant information

We plan a lot before going to any unfamiliar destination and we spend a lot of time trying to access relevant information on the app such as the nearest bus stop and which side it’s on, how do we know if there’s a strike? or If you’re a tourist in Barcelona, the buses sometimes don’t stop if you forget to wave. A lot depends on the pre-planning stage but things change when you’re on the move.

How do I stop the bus?
Which ticket do I get, and Where?
In how many stops do I get down?
When is the first/last bus?

3. Signage

The signage that you see on the metro can be misleading. We noticed people standing around a huge map trying to figure out which exit to take. This brings us to identifying the areas of opportunity.

Areas of opportunity

We wanted to reimagine the Barcelona transportation experience by making it easy, accessible and delightful. We looked at these three main areas of opportunity.

Features & Functionality Matrix

At this stage, we had a rough idea on what features we should have in our product. We needed to decide on the most important features that would get the MVP up and running for user testing.

We decided to first evaluate all the features based on three main parameters — User Value, Business Value and Tech Value. This acted as a first filter and enabled us to identify the most important features.

We drilled them down and identified all the key and necessary features the users would need for the MVP through card sorting exercises. Some of the features such as AR Navigation are nice to haves that would make the experience delightful.

Key features

Sketching & concepting

User flows

This user flow helped us understand in-app behaviour from when the user opens the app to when and how you choose a route. We did multiple flows in order to arrive at the sketches.

We chose to showcase the most important flows — Searching for a destination, Checking if your ticket is valid, Choosing from a list of routes, Choosing a destination and making your navigation easier by designing map interactions that automatically zoom in or out according to the stage of the trip you’re on.

Sitemap

Branding

We wanted the put a piece of Barcelona in the logo. If you walk around Barcelona you’ll see the famous pattern that’s all over the pavement. It’s something that’s always there but a lot of people don’t notice it.

We used it as a visual element to carry through out branding in order to make it delightful and stand out from other apps.

Superblocks + Barcelona tiles

Colors & Icons

We wanted the colors to reflect the vibe of Barcelona — young, energetic, delightful and also inspired by Gaudi’s work.

Inspired by Gaudi
I designed the icons for some landmarks in the city and signs for the map

Visual Designs & Screens

1. Home + Search

Home screens showcases your current location, an option to type where you want to go and also your digital ticket, if you want to check how many rides you have left on your T-10.

2. Choose route

Type in your destination and view our recommendations in a card or list view.You can also add filters to your search. This means that if you want to avoid switches and you’d rather stay on one line, we’ll tell you the shortest route

3. Explore

If you’re a tourist and you don’t know where exactly to go, you can explore destinations based on your current location

Explore destinations if you’re unsure

4. Know your exits

During your journey, you’re always aware of how much time you have left. This doesn’t mean that you need to stay glued to your phones, vibration patterns tell you when you’re close.

When you’re nearing the next station the app tells you exactly which exit to take and the side.

5. Zoom out + Wave

The map zooms out when you begin your walking. We also added a wave feature so you never miss a bus in Barcelona. This feature would help the driver estimate the number of people waiting in the next stop and issue a warning incase he’s gone over his bus capacity.

In order to create a connected experience, we want the bus drivers to also have an interface that will help them with the following:

Issue tickets
Understand Capacity
See the approximate heat map of people who are waving at a stop
Report warnings

6. Bus station signs

Know where exactly your bus is at while waiting at the bus station and you never have to wonder if you’re on the right side or where it’s at.

Interactive screen at the bus station

What’s next?
The next phase test it further with our users and gain some valuable feedback for further iterations. We also need to see if we can add social features for a more delightful experience.

My personal feedback from Anton Repponen:
Pavithra has great visual design skills and is able to work super fast!

Thanks for reading. I would love to hear your thoughts/contributions/critique.
You can find me on:
Linked In: https://www.linkedin.com/in/pkrishnan3/
View my project at http://tmb.potahtodesigns.com/
Instagram: https://www.instagram.com/potahtodesigns/

--

--