— PROJECT NAME
Ticket TMB
— ROLE
UX/UI design
— COLLABORATE WITH
Federico Girroto
Araya Wongwan
Linh Le ha
Ticket TMB is a stand-alone app that digitalises the purchasing and validating ticket experience.
Most of people living in Barcelona need to buy the paper ticket from metro station. Our team figured out many people want to have different solution for the situation, and tried to redesign the way locals, as well as tourists, interact with public transportation in Barcelona city in a digital form.
Problem
We found out several problems in physically buying ticket for Barcelona transportation. It’s not only from lack of infrastructual support, but also safety issue especially during the pandemic season.
User Persona
We setup the persona to find the best solution and experience for them,.
Features
We listed up the features for the solution, and sorting out the priorities.
Main features
After discussion, we listed up the main featues, which can automize the ticket purchase and optimize the recommendation for each users.
Interaction model
We started sketching the interaction model to make it intuitive and way easier. When we find the ticket in the wallet, we skip cards one by one with our hands, which is quite similar with swiping the cards one by one with our finger.
So in ticket TMB, you can swipe to search multiple card, or tap it to turn the card to see the information.
Using metaphor
We brought the same style of design from the actual transportation ticket to make people realize this is the TMB ticket at a glimpse. We just added simple feature to see the vaild time and duration left to let people know when they should buy new ticket.
Art direction
The brand colors are also from the actual transportation tickets.
LET’S SWIPE!
Activate card
If users are tagging the phone to the machine after buying ticket, it’s automatically activated.
Detailed information
When you tap each cards, you can easily check the detailed information, and turn on the auto-renew feature to buy the same ticket.
It was great moment to study deeply of interaction model. Slick animation and motion graphic design can give such a different experience to users. It was challenging to find the best intuitive model for them, but it worth to do it.
You can see the whole process of creating the ticket TMB to click here.