Problem

Barcelona’s public transport relies heavily on paper-based ticket kiosks, which not only create unnecessary waste but also demand time-consuming queues and complex navigation.

Particularly challenging for newcomers and tourists. And there is no option to buy passes in the bus.

With a diverse commuter base, from daily locals to international visitors, there’s a need for a streamlined, accessible, and eco-friendly solution.

The current system lacks flexibility, limiting users from purchasing or accessing tickets on the go.

Solution

‍Through TMB Digital Ticket System we introduce a convenient, eco-friendly, and user-centered ticketing experience for all the commuters in Barcelona, Spain.

Designed for ease and accessibility, this digital platform enables users to buy, store, and access tickets directly from their mobile devices — eliminating the need for physical kiosks and paper tickets.

By integrating user-friendly design elements, clear navigation, and responsive layouts, this system simplifies travel for both locals and tourists, aligning with TMB’s sustainability goals and enhancing the commuter experience across diverse user groups.

Design Strategy

1. Design Research

Ecosystem Analysis

We conducted a research on the current design system and the practises of TMB.

Here's a comparison of how we sought inspiration from the current paper/kiosk based tickets to digital tickets.

Competitive Analysis

For inspiration, ideas & standard practises, my team & I looked at various other apps in this space like Trainline, Dot, Citymappr, Ruter, Revolut and few others.
‍
Looking at these design decisions helped us pave a path for our designs with major features like select, view & save ticket.

2. Brainstorming & Design Thinking

UX research played a vital role in understanding user needs, behaviours and expectations, leading to informed design decisions.
Through Research methods like feature list, card sorting, user interviews we were able to narrow down to designing best experience and an improved digital ticketing experience.

The digitization of the TMB ticket system was not just about aesthetics and technology—it was about the users.

No more queues at kiosks. No more paper trails.

Our vision?
A digital ticket, eco-friendly and available at the fingertips of every commuter.

3. Creative Concept

We came up with a few ideas for mascot, color, design elements, theme for the application.

Based on TMB, we designed our mascot Timby & our Color Palette inspired by the ticket colors.

4. User Journey Analysis

We started by designing & analysing the user flow, understanding how users will interact with the ticketing system to identify key actions like selecting ticket types, payment, and ticket retrieval.

UX UI Design

1. Concept Sketch & Wireframes

Concetping

I created low-fidelity wireframes to visualize the core flows of the app, such as onboarding, ticket selection, and ticket recommendation.

Collaborated with my team on Whimsical for this.

These Annotated Wireframes guided discussions with developers and ensured alignment across the team.

2. Prototypes

Prototyping in Figma

After initial testing, I iterated on the design based on feedback, refining the event confirmation system and user chat functionalities.

This led to an enhanced experience that was both spontaneous and user-friendly.

ONBOARDING
New users are introduced to the app, its rules, and the concept of purchasing tickets.
‍‍

SELECTING TICKET
Users are presented with a list of all the tickets categorized based on the usage.

They can select a ticket based on their need. If they are confused, they can get recommendations by answering few questions.

TICKET RECOMMENDATION
Users can answer few questions and we will recommend the best tickets based on their needs.

3. Design System

Colour

We decided to go with shades of red as it represents TMB's current branding resonates to the theme of this application.

We chose to have secondary colors as it gives good look & feel for different aspects & design elements.

Typograpy

For the typography we chose a clean and bold font Montserrat.

Buttons

We designed primary, secondary & text buttons which go well with the theme and vibe of the application.

Icons & Components

We designed few custom components & icons which go well with the theme and vibe of the application.

TakeawayS

What I learnt & will apply in the future

User-Centric Design is Paramount

Prioritizing the needs and expectations of a diverse user base, whether commuters or tourists, is the cornerstone of a successful public transportation digitization project.

Consistency Drives Trust

A design system that ensures consistent visuals and user interfaces across digital platforms builds trust with users and enhances brand cohesion.

Data Paves Paths Forward

UX research, supported by data analysis, offers invaluable insights into user behaviors and needs, guiding design decisions and improvements.

Feedback is a Valuable Resource

Creating mechanisms for users to provide direct feedback leads to a more user-centric and responsive digital experience.

Simplicity Enhances Usability

Simplicity in design, including intuitive navigation, color choices, and typography, significantly enhances the usability and user satisfaction of digital interfaces.

Accessible Design Matters

The digitization journey demonstrates the importance of making public transportation accessible to everyone, fostering a more equitable and user-friendly urban environment.

My Team

Balquees

UI Designer

Chi