Real-Time TMB Information App

Year

2021


Service

UX design
Interaction design


Roles

Anton Reponen - Creative director
Mayra Sanchez - UX/UI, Motion
Thibault Schegin - UX/UI, Project Manager

A concept app providing real-time updates and planning tools for TMB commuters.

The TMB live app is a stand-alone app that informs public transport users in Barcelona about the current state of trains and buses around the city helping them to make smart decisions for their commutes.

Public transport in Barcelona is a service that locals and tourists are in close contact with during their stay in the city, which can get really crowded during peak season. We conceived an app providing live information so people can decide in their best commuting option to enjoy the city and get to their destination on time and in a less stressful way.

THE PROCESS

The Problem

Barcelona is a common touristic destination specially during summer break and winter, since the weather is nicer than the rest of Europe. Due to the people density in the city, using public transportation can be a big hustle as most people want to avoid walking due to the heat.

So, we identified the main information users want to know when using the Barcelona public transport:

Train icon

Next train
incomming time

People icon

Amount of
people on board

Wheelchair icon

Wheelchair/stroller
user friendly

Crossed out train icon

Inoperative lines
and stations

Features

We wanted our app to display real time information and allow the users to search for routes near and away from where they were, this helped us define what the main features of our app will be:

Current Location

Train, buses and
station information

Loading screens

Search

Metaphors

Finding the best analogies and the ideal way todisplay all the live information was a long process. We needed to find a way to display all the available lines within a certain range and an easy way to represent the crowdedness metaphor along with a screen that was fast and easy to read. We came up with different options and creative solutions. And although none of them seemed to solve and convey the information in an optimal way, we found the ideal solution.

The OUTCOME

Art Direction

Since the TMB lines are already colorful, as our main color we needed to choose one that wasn't included in the current colors and didn't clash with any of them, that's why we selected a dark blue, with black and white as complementary colors.

TMB line colors

App colors

Of course we needed icononography to represent the trains, buses and trams from the TMB system, as well as the transport particularities. And we did it adding a little bit of fun in the icons and some animations.

Are you ready icon

Are you ready?

Swipe time!

Location search screen

Loading screens

Searching for your location, loading screen The wheels on the bus go round, loading screen Let's go on an adventure,loading screen Wave a catalan flag, loading screen

Search screens

Location search screen Location search screen

Route loading screens

Looking for the next traind, loading screen Barca FC just beat Real Madrid, loading screen

Error screens

We can't find you, error screen Sleeping train, line out of service

THE TAKEAWAYS

Coming up with an all-in-one solution was a long iterative process. We learned to simplify interactions and reduce unnecessary steps and information. We learned about the importance of iconography; how simple an icon should be to make sure it communicates in the most accurate way without the need for words. Finally, we gained many insights on how to avoid unnecessary steps in the final interaction model and user flow.

Next Project


Catalan COVID Vaccine App


Streamlining COVID vaccine access for Catalan citizens.