Menu
Case Study: Metro Madrid Ticketing System

Case Study: Metro Madrid Ticketing System

PROJECT DETAILS

UX/UI Case Study:
Designing a better User Experience for the automatic ticket machines of Metro Madrid, Spain. In this case it is redesigned the screens and the interactions of the application without change too much the current visual design.

Project date: June 2018

TOOLS

Sketch 
PhotoShop Illustrator

PROJECT DETAILS

UX/UI Case Study:
Designing a better User Experience for the automatic ticket machines of Metro Madrid, Spain. In this case it is redesigned the screens and the interactions of the application without change too much the current visual design.

Project date: June 2018

TOOLS

Sketch 
PhotoShop Illustrator

metro-madrid-ticket-machines

Introduction

In 2017 Metro Madrid replaced the traditional paper tickets with the “Multi” card. The “Multi” card is a non-personal, reloadable, contactless public transport card with a validity of ten years, that is used to contain non-personal transport passes for the Community of Madrid’s public transport service system.
As of November 1st 2017, the public transport system tickets (barring exceptions) may be loaded on two types of contactless cards: Personal Public Transport cards and the “Multi” Cards.

The “Multi” card may hold up to three non-personal tickets.

Understanding the challenge and the problems

Since this card has been on the market I have studied the user interface and the user experince of the automatic machines in different stations (Airport, Sol, Avenida de America) to check how it works. Depending on the station, it’s possible to buy different kinds of tickets for light rail or suburban railway.

I decided to concentrate specifically on the ux and interface of the tickets available for the “Multi” card purchase for Zone A.

While using the ticket application I noticed many different problems, both during the interaction with the application and with the understanding of the graphical interface (check out the video at the end of this page).

Research Methodos

Everytime I’m back in Madrid, I always see a long line the airport for the automatic machines made up of tourists that don’t really understand the interface and what to do.
Sometimes, it’s even hard for the locals to understand what to do, forcing them to spend unnecessary time to study a system that isn’t really user friendly or intuitive (especially when you already have the card).

I used a couple of research methods:

  • watching how the users interact with the system
  • asking questions about their experience to gather data.

User Flowchart

Introduction

In 2017 Metro Madrid replaced the traditional paper tickets with the “Multi” card. The “Multi” card is a non-personal, reloadable, contactless public transport card with a validity of ten years, that is used to contain non-personal transport passes for the Community of Madrid’s public transport service system.
As of November 1st 2017, the public transport system tickets (barring exceptions) may be loaded on two types of contactless cards: Personal Public Transport cards and the “Multi” Cards.

The “Multi” card may hold up to three non-personal tickets.

Understanding the challenge and the problems

Since this card has been on the market I have studied the user interface and the user experince of the automatic machines in different stations (Airport, Sol, Avenida de America) to check how it works. Depending on the station, it’s possible to buy different kinds of tickets for light rail or suburban railway.

I decided to concentrate specifically on the ux and interface of the tickets available for the “Multi” card purchase for Zone A.

While using the ticket application I noticed many different problems, both during the interaction with the application and with the understanding of the graphical interface (check out the video at the end of this page).

Research Methodos

Everytime I’m back in Madrid, I always see a long line the airport for the automatic machines made up of tourists that don’t really understand the interface and what to do.
Sometimes, it’s even hard for the locals to understand what to do, forcing them to spend unnecessary time to study a system that isn’t really user friendly or intuitive (especially when you already have the card).

I used a couple of research methods:

  • watching how the users interact with the system
  • asking questions about their experience to gather data.

User Flowchart

I don’t know the original Information Architecture but I recreated and reorganized the information that is already in the system trying to show the user flow with all the available options to help the user get the info and make the right choice.

user-flow
user-flow-si
user-flow-no

To download the high quality image of the User Flow click here (1.3 Mb).

Sketches and Visual Design

This was the first step to help me outline the new user flow and interactions. I didn’t change the visual design as I wanted to be loyal to the original design. Following you can see some sketches and some recreated screens.

sketches-prj-paper
interface-sketch
screen-1
screen-info
screen-choose
screen-payment

Conclusion

Designing even a small part of the system has been challenging, but I understood the needs of the users well through observations and conversations.

I downloaded the prototypes on an iPad and I asked several people to participate in a usability test of the prototype. The results has been positives, both for users who already know the system and for those who have never used it.

Video

Related Posts