TMB is the main public transport operator in Catalonia and a benchmark public mobility company in Europe and the world. The application provides complete information regarding bus and metro. Due to the excess information available in the mobile app and website, It is often difficult to acquire the right information.

“How might we make it easier for tourists and locals to navigate Barcelona, and to make using public transport and exploring the city more delightful.”.
The challenge was to break down the information in consumable size to help navigate the city in stages.

Current Journey Map As a team we documented the current painpoints that the users face when they go through three different phases of reaching a destination from A to B.

Brainstorming We broke down the process to understand the journey from two different lenses. One from the lense of a tourist and the other, a local. The goal was to provide the most relevant information at different phase of the journey and breakdown the content in a consumable size. The app was discussed to be a native app, so that in the future route could be saved offline.

UX Challenge :

One of the many challenges of this project was that the TMB website and user app had excess information. Barcelona has 32 Million tourists in comparison to 1.6 Million locals, it was essential to design the app to be tourist friendly.

We needed to think of a way for users to easily find their nearest stop and give enough guidance regarding the direction of their journey. Even though the metro stations were self-explanatory, the Bus stop designs failed to convey the information in the most efficient way. Barcelona is known for parties and celebrations there are constant changes in schedules of public transport as well as bus routes which are not very prominent within the app. Another key challenge we encountered was the use of a generic map on the current TMB website. It was extremely important to include a personalized map with all the landmarks highlighted to improve the navigation within the city.

Site Audit of current App :

From analyzing the usage of the current app, we discovered that map was not a primary feature of the app. The information was communicated in the form of text sometimes in spanish. Navigation was not very intuitive and it did not communicate the current status of the journey for the user.

One of the primary features that stood out to me was the design of the map itself. It was not designed specific for Barcelona. I quickly jumped in to design maps using open street map or map box. As a team we decided the design of the map to drive the rest of the design direction.

The Map :

Map was the driving unit of the entire app. We took a conscious decision to showcase the map at every point of the navigation in order to give a sense of spatial orientation.

Another key concern with the design of the map was to ensure it was seen irrespective of the sun's glare. I constantly tested various saturation of the three tones that constituted on the map to finalize the right color that could be used to convey the message clearly.