Go Back

TMB Wallet App

UX/UI Case Study

2018

TMB Wallet App

This app is a speculative design project focused on a hypothetical situation in the Public Transport system of Barcelona.

What would happen if Barcelona had implemented the necessary technological advances in public transport could validate a train ticket using contactless, as in many other existing countries such as New York, Shanghai, Seoul, Berlin, or London? We would need some App to manage those tickets.

Process

My role

Design Strategy
Brand Strategy
Research
UX Writing
User Flow
Information Architecture
Wireframes
User Stories
Visual Design
Prototyping
Test

Tools & Technologies

Sketch
InVision
Principle
Illustrator
Photoshop
After Effects

UX Process

A UX design process typically follows something similar to a design thinking approach. Design thinking is an iterative, non-linear way of working that seeks to understand users and solve problems, which consists of five basic phases. These stages are not always sequential, and teams often run them in parallel, out of order, and repeat them in an iterative fashion.

Empathize & Research

Competitive Benchmarking

With competitive benchmarking, I established a comparison between different parameters of the existing competitors apps against mine.

I wanted to bring a product to market and see what aspects users value of existing apps.
I was going to create a product or service that opens up a new market. And I wanted to see what the user's response has been to proposals with which it shares characteristics.
See what things were not working or were not receiving good reviews from users.
Use applications to see as a user their pain points.

User Personas

Personas are fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way. Creating personas will help you to understand your users needs, experiences, behaviours and goals.

Define & Ideate

Validating the pain points

First, we need to validate the pain points. Pain points is a specific problem that prospective customers or users are experiencing. For this reason is important to list out at least the principal problems which, are the most people have and face problems when they want to follow an action.

Challenge

The tickets are made of paper and could break, wear quickly, and get wet.
There is no purchase receipt or record of the first validation of the ticket.
You don’t know how many trips you have left, as machines often don’t have enough ink to mark them.
You have to calculate your transfer time so that you do not validate one more trip.
You don’t know how far you can go with the ticket rate.
You waste time taking the ticket out of your wallet, pocket, or bag.
You do not know the expiration date of the tickets.

Solutions

It allows you to save the tickets you have with different rates and/or zones.
Know how many trips you have left.
Know how far you can go on with the rate of the ticket.
Know when your ticket expires and let us know in advance.
Purchase and first validation registration.

Art Direction

Lo-Fi Wireframes

Wireframes are essential for creating digital platforms, but not everyone understands their functionality. Technically, they are the bridge between information and product design. That is, it is a visual guide that reflects both the structure defined in the content map and the interface design decisions.

Prototype & Visual Design

Explore more