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.
My role: UI/UX designer, Branding & Icon design & illustrations.
Project Timeline: 3 weeks
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.
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:
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?
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.
Sketching & concepting
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.
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.
Colors & Icons
We wanted the colors to reflect the vibe of Barcelona — young, energetic, delightful and also inspired by Gaudi’s work.
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
If you’re a tourist and you don’t know where exactly to go, you can explore destinations based on your current location
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:
See the approximate heat map of people who are waving at a stop
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.
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/