My TMB

Looking at How We Move

As part of a three-week course at Harbour.Space University, 'Creating and Applying Interactivity', we worked closely with designer and teacher Anton Repponen on a project brief. In this project, I worked closely with three strong UX Designers to redesign the present Transports Metropolitans de Barcelona's (TMB) mobile app to help both tourists and citizens of Barcelona commute using public transport.

Although we all shared the work, my chief tasks were centred on research and UX design. I conducted various research, including the audit of the present TMB mobile app, the competitive analysis, user research and identifying the present user journeys for commuting on public transport in Barcelona. I was also responsible for designing the wireframes for accessing and purchasing the new e-ticket that we introduced. Finally, I compiled all our work into the presentation and constructed a story for the final pitch to the class.

Research into the TMB ecosystem and gathering user pain points

I believe good research is the foundation of good design. Although only a short time was allocated for research, we managed to investigate the following areas: TMB ecosystem, public transport in Barcelona, a competitive analysis and talking to users. These areas of research revealed the following pain points we would be addressing in our redesign:

Introducing the Mobile Ticket feature into MY TMB

One of the main pain points we identified is the inconvenience of purchasing the paper tickets as the ticket stations are only available in remote metro locations, and are not near the bus stations.

Additionally, the paper quality deteriorated quickly which made the tickets almost unusable if it was a long-term ticket, such as a three-month ticket. I solved this by introducing an easy-access mobile ticket that is only one tap away once you open the MY TMB app. It is in the form of a QR code, that you could purchase and use on your phone.

There is also an option to renew the ticket should it expire, or select any one of the many other ticket options. Many users don’t have enough information at the physical points of purchase to educate them about the various tickets they can buy. We try to educate them about the different options in the app using byte size information.

Explore with My TMB: Visit Saved or Popular Places

From the homepage, the user has the option to further explore Barcelona. Here, I focussed on the two main audiences within the city: the citizens and the tourists. When the locals use the app, they will have the option to save certain locations, such as home and work, and access those places via shortcuts. For the tourists, we have a section to help them explore local places and discover the city:

Searching and Embarking on a Trip

When searching for the routes, we want to prioritise the shortest and most convenient trips. We keep the map in the background to orientate the user and display the different trip options above the map. We present the trips in a card format, to allow for simple, byte size information that is digestible to the user. As the viewer swipes through different trip options using the cards, the route on the map will change accordingly.

Once on a route, the user will see their journey condensed into smaller cards. Each card indicates a different leg of the journey e.g. the bus, a transfer, walking. This makes it easier for users to know which part of the trip they are on, and to help them know when to disembark a metro or bus.

Final thoughts on the project

This three-week design sprint was an interesting exercise for me. My team comprised of strong UX designers and it was a great opportunity to learn how to collaborate and listen to one another. It was also a good exercise in trust. We each had a particular flow that we iterated upon, but we did need to ensure it all made sense within the single product.