Plastic chip sensor Metro cards would decrease traffic jams during prime riding hours, increase sustainability efforts and overall riding experiences. I transformed sketches and ideas from the team ideation period, and made them into the digital products.

My Roles

User Interviews

Sketching

Wireframing

Visual Design

Interaction Design

Figma Prototyping

3D Modeling

Team

Ilma Bilic

Kelly Chang: Interviews, Sketching

Ruma Deb: Interviews, Sketching

Maheru Jahania: Interviews, Sketching

Sejal Lal: Interviews

Jamie Neumann: Interviews

Year

2019

Duration

1 Day

PROBLEM

Metro riding experiences in Barcelona are frustrating. In order to ride the user has to buy a paper card from the kiosk then insert the card into the turnstile machine, which can be timely. The paper cards easily wrinkle, tear and become unreadable. Along with this, users don't like taking the cards out of their bags/wallets and don't know how many swipes they have left.

KEY DRIVERS

Changing one part of the metro influences every other aspect of the experience. I based my ideas and designs with this in mind, and delivered upon the following key areas.

Card

A physical change in material that eliminates paper waste, increases durability and re-usability.

​

​

​

Mobile App

A mobile entry, payment, map and notification system that eliminates the need for physical card usage for modern transportation.

​

​

​

Turnstile

A seamless entry to the metro with automatic chip sensors and bar-code scanners to decrease the time spent at the gate. Ultimately aiming to eliminate traffic jams.

​

​

​

WHAT DOES THE CURRENT METRO SYSTEM LOOK LIKE?

In order to redesign the system, I had to understand what users enjoy, hate and need from the metro. To do this, the team and I conducted interviews from users and evaulated the system as a whole.

Who did we interview?

We collectively interviewed 11 people about their experiences using the metro. Most of our users were younger and weren't completely fluent in English, so there may be bias in the results collected.

Synthesis: Affinity Diagram

Based upon data from in-person interviews, I organized the teams observations and categorized them using an affinity diagram. This helped me expose pain points and user needs throughout the whole process of using the metro system. It also helped the team and I understand the complexity revolved around redesigning a system as large and intricate as the metro. (Affinity diagram was created using miro)

Persona

Using the organized data from the affinity diagram, I was able to develop a persona, which represents the user we had in mind when re-designing the metro.

Joan Rodriguez

Barcelona, Spain

Single

Average Income

Male

Bio

Joan is a Manager who travels on the metro twice a week to meet with business employees. He often takes different routes for each visit, and always has a packed schedule. He is usually worried that he may miss a train, due to the little time he allows for travel. When he finds that his card doesn't work, he panics a little because he knows buying another card will make him more likely to miss a train.

Goals

Never miss a train

Spend less time buying new travel cards

Frustrations

Taking card out of wallet every time he has to travel

Wrinkling and tearing of card forces him to buy a new one

Kiosk takes up too much of his time to travel

Machine sometimes rejects metrocard

Doesn't know how many trips he has left

Brainstorm

Collectively the team came up with initial sketches based on the user feedback we collected. Our main priority was to focus on the card design, as it was a clear pain point in the metro experience. We then moved on to the mobile and turnstile redesign to match the cards features.

Prototype

From the sketching phase the team collectively discussed what features and design ideas should be built upon. My role involved taking these initial sketches and elevating them into digital products that users could immerse themselves in.

Style Guide

INFORMATION

Click to view light mode

Barcode scanner

reduces users' insecurity towards losing their card in the machine.

Chip reader

eliminates the need to pull out a card while walking through.

Plastic durable material

reduces paper waste and users' frustration with buying a new card every week.

Barcode scanner

allows user to tap into the metro without their card.

Rides remaining

gives the user feedback so they never feel insecure about their trips again.

Refill online

to save time buying tickets and reduce kiosk lines.

Due to our time constraint, utilizing Figma, I implemented the barcode, rides remaining, transfer time, and payment options to the existing app. Given more time, I would redesign the whole app to match the metro branding and style.

Turnstiles create the most traffic jams due to the slow turnaround of inserting the metro card and waiting for it to come out of the machine. This redesign aims to decrease the amount of time it takes to scan a MetroCard in order to increase the flow of traffic. Utilizing two methods of entering, the chip reader and barcode scanner, users can effortlessly enter the metro. The signal sensor on the side of the machine scans the chip reader, allowing the user to just walk through without having to pull out their card from their pockets or purses. If the chip reader were to malfunction, the secondary entry method, the barcode scanner, can be used to scan both the card and mobile barcodes.