Metropolis Underground

PRODUCT DESIGN CHALLENGE

The Metropolis metro system no longer accepts paper tickets. The only way to recharge/renew travel passes/cards is by using the machines located inside the stations themselves. What sort of problem can this situation give rise to? How can we improve processes through an app?

01

Approach

· Initial observations
· Design premise
· Functional references
· Lean UX Canvas

To design this experience, I plan to adhere to the following process, which is based on a user-centred design approach. Firstly, based on the available data, I need to understand who I am designing this process for, how they behave and what their needs are, before contrasting this with the opinions of real users. The data is then contrasted to ensure that my initial premise was correct before proceeding swiftly to the creation of possible prototypes of the most beneficial functions for users. Lastly, the solutions will be tested with real users, shortcomings corrected and an MVP launched to be tested in a real environment.

Given the resources available and tight deadline (two weeks), I have designed the following process in a bid to obtain the best MVP possible. The work can be broken down into the following phases:

Screenshot of the Notion, where I planned my work.

 

Initial observations

There are basically two user types: habitual users that have a monthly pass that they recharge once a month and occasional users, such as tourists or other individuals, who either do not use the metro frequently or prefer to use 10-journey or single tickets. I plan to focus on the second group to design the user experience, although I interviewed users of both types during the research phase.

Design premise

In addition to the user-centred design, I plan to base a number of my arguments on the following three premises, given the type and scope of the project.

01
Universal Design

As this is a product that will be used by profiles from across the demographic spectrum, I will endeavour to create the most accessible and user-friendly product for the largest possible number of users. The learning curve should be shallow. I will use interaction patterns that have already been internalised by users thanks to their exposure to other apps.

02
UX ergonomics

Users will often be in a hurry and walking while they are using the app, making it necessary to “design a thumb-friendly application” wherever possible, given that mobiles have increasingly larger screens. This will be resolved by placing the most important elements in the lower part of the screen.

03
Customisation

We increasingly value and appreciate experiences that can be tailored to our needs, rather than us having to adapt to the experience. I will therefore attempt to eliminate user frustration when it comes to completing the main tasks by using notifications that are based on customised data. For example, disruption or incidents on the line that the rider habitually uses.

Functional references

I began by researching other metro/transport apps both domestically and internationally.

The initial idea was for the principal function to be the swift and intuitive recharging and balance query tool. None of the apps I downloaded offered this function, except for the London Tube Map, but it took you to an embedded website.

Most of the metro apps do not have a dynamic navigation/route planner function as such, but rather a mere image of the metro/transport system. On the flipside, navigation apps that tell you which metro route to take have a great many functions.

My objective is to generate an easy-to-use app in which users can consult the balance on their travel cards and plan routes between stations.

APPS USED FOR REFERENCE PURPOSES

Metro apps: Madrid Metro, Berlin U-Bahn, London Tube Map

Navigation apps: Citymapper, Moovit, Google Maps, Transit, Lyft, Cabify, Uber

Wallet apps: Apple Wallet, Coinbase

Lean UX Canvas

To carry out an initial assessment of the problems and solutions, I have used Lean UX Canvas, which allows me to reflect on the data and generate hypotheses that I will then have to test with users.

Lean UX Canvas template completed on Mural.co

 

02

User research

· Value Proposition Canvas
· Entrevistas
· Persona
· Priorización MoSCoW

Value Proposition Canvas

The Value Proposition Canvas helps me to map out who my client is, what real habits and problems they face and what would help to increase their satisfaction levels and reduce their frustration.

Value Proposition Canvas template completed on Mural.co

 

Interviews

Via the interviews, I attempt to validate the problems identified in the previous hypotheses. Are the problems in our hypotheses the same as those really faced by users? Do the interviews reveal other problems?

During the initial contact, users stated they were satisfied with their current travel cards, but this is due to the fact that they have not known anything else. As soon as I explain the available possibilities, they begin to offer me quality information. Some of their comments serve to validate functions, discover new ones and even rule out functions as being too complex at this stage. (Entering the metro system with your mobile via NFC technology, for example)

In short, the interviews helped me immensely. They allowed me to leave my mental models aside and transition towards another way of thinking.

In other words, people are unaware they have a particular need, until we point it out to them.

Paula M.

NURSE / 31 YEARS OLD / 10-JOURNEY TICKET

PROBLEM: She tells me that she often forgets her purse but not her mobile phone, so it would be helpful if she could pay with her mobile.

“The other day I left my purse at the hospital. I had to ask for money from the metro staff...”

Paula M. (nurse)

Martín M.

STUDENT / 22 YEARS OLD / MONTHLY PASS

PROBLEM: I’m not given a warning when I have to renew my pass.

Martin confirms something I was aware of already and which has actually happened to me personally. You are unaware how many days are left on your monthly pass. How are you made aware? You approach the turnstile only to be denied access. You are forced to double back to the recharging machines, a frustrating and time-consuming process.

This interview also led me to dismiss the notion of accessing the metro via your mobile phone because, as the system currently stands, it would lead to duplicity: i.e. two people using the same access card simultaneously: one via the mobile, the other via the travel card, unless the system could detect you were in the fare-paid area. This is currently impossible, as you do not need to swipe upon leaving the system in Madrid, unlike other cities, such as London. Given the complexity here, I decided not to venture any further into this area.

“This can be annoying as you don’t realise it’s expired and you have to go to the machines, which can be very busy first thing in the morning”.

Martín M. (student)

María A.

EXECUTIVE / 42 YEARS OLD / 10-JOURNEY TICKET

IMPROVEMENT: Add the passes of other family members

María gave me an idea that had not thought of: Adding other passes, for example, her children’s transport passes, so she can charge them and not have to give them money.

“It would be great if I could recharge my children’s travel passes”

María A. (executive)

Persona

My persona is called Eduardo. I’ve reflected in Eduardo the critical points he experiences. He will need to resolve these critical moments using the app to improve his satisfaction levels. This tool allows me to put myself in his shoes to ascertain what he really needs.

Based on the Lean Proto-Persona using Lean UX methodology

 

MoSCoW prioritisation

At this point, I now have to categorise the functions based on the importance they have for users before deciding to add them to the MVP or not. I then contrast my own ideas and hypotheses with those identified in my interviews. Which functions are mandatory to be able to meet the objective I have set? Which ones are optional? Which ones can we reject? To that end, I use MoSCoW prioritisation. If this were a real-world case, I would take a further two factors into consideration in addition to the functionality for the user: the technological cost and the time cost

03

AI

User flows

I divided the experience into two flows. On this occasion, I did everything on paper. I tested it on a few friends before proceeding to design the high-fidelity prototype. Had there been more time available, I would have designed a medium-fidelity prototype, but the Hi-Fi version was the most appropriate option in this case.

These are the two flows I have designed:

Flow 1

Travel pass

Eduardo is an occasional user of the metro and normally buys 10-journey tickets. He learns of the existence of the Metropolis app and wants to try it out. He wants to synchronise his existing 10-journey card with the app, see how many journeys he has left, add a payment method and check to see if the card is activated. He can cancel the card and be given a refund.

  1. He synchronises the pass
  2. He adds a payment method
  3. He enables notifications
  4. He receives alerts that his balance is running low

He has access to the following data:
· Travel card status
· Balance / Expiry of the card.
· Latest journeys with time of entry and exit from system.

Flow 2

Navigation

Eduardo has just started using the app. He has added his travel card and his habitual destinations of home and work/school. He is about to travel to a new destination. He uses the navigation function.

  1. He activates location/GPS
  2. He tries different types of map
  3. He plans his route
  4. Incident alert

He has access to the following data:
· Routes
· Train times 
· How crowded each carriage is
· How crowded the station is
· Reporting of incidents in real time

Some low-fidelity wireframes of the project

04

Visual

· Logo
· Font
· Colours
· Grid

Logo

The logo consists of three metro lines converging to form the letter “M” for Metropolis. It is based on Massimo Vignelli’s 1972 design for the New York Subway map. In addition to still being visually attractive after all those years, it is what I consider an example of a highly sophisticated user experience design and, above all, it is useful. It solved the chaotic situation riders were faced with when trying to navigate the New York Subway.

Colours

Typeface

I’ve chosen Product Sans. It is a simple sans-serif typeface. It has a modern, contemporary look without appearing overly formal. The most important aspect is that it functions correctly across all digital devices and was created by Google.

Certain edges have been rounded off in the logo to enhance brand consistency. 

8px spacing system

I consider this an essential element that must be included. It provides spatial coherence and consistency to the entire overall design. I have used exterior margins of 16 pixels.

05

Prototype

· Flow 1 (Travel card)
· Flow 2 (Navigation)
· Extras

flow 1

Travel card

Eduardo is an occasional user of the metro and normally buys 10-journey tickets. He learns of the existence of the Metropolis app and wants to try it out. He wants to synchronise his existing 10-journey card with the app, see how many journeys he has left, add a payment method and check to see if the card is activated. He can cancel the card and be given a refund.

  1. He synchronises the pass
  2. He adds a payment method
  3. He enables notifications
  4. He receives alerts that his balance is running low
*EXTRA (NO IN PROTOTYPE)

· Cancel card: You can cancel the card and receive a refund of the unused credit.
· Add a card: Option of adding other cards. If it is a monthly travel card, the main screen of the card would change. Rather than reading “Remaining Credit: 2 journeys”, it would say something along the lines of: “Days left until expiry: X days.”

You will likely have noticed that the “low balance” alert is not present in the prototype. Right? Although it has not been visually developed due to time constraints, the idea is to offer users the option of quickly recharging the card after receiving the alert. A possible feature would be to install an automatic payment trigger when there are a certain number of journeys/days left. This could be set at the user’s discretion. This would save time, queues and frustration for many riders.

Flow 2

Navigation

Eduardo has just started using the app. He has added his travel card and his habitual destinations of home and work/school. He is about to travel to a new destination. He uses the navigation function.

  1. He activates location/GPS
  2. He tries different types of map
  3. Route planner
    – Train times 
    – How crowded each carriage is
    – How crowded the station is
    – Reporting of incidents in real time
  4. Warning of an incident

The incident on the line or habitual route alert is also missing. This function would alert users beforehand of some sort of incident on the line they habitually use. Given that the app would know, more or less, where the users usually go and when, my idea is for it to alert users beforehand. This allows users to plan an alternative route and avoid engineering works, delays, etc. My initial idea is for the app to be customised to the user’s habitual routes, while allowing for new favourite routes to be added and for alert settings to be changed. There is no point in the app warning users of incidents everywhere on the network.

06

Documentation

Finally, if you want to download the documentation, please write to me at juan@juancortazar.es.

In the portfolio you will find:

· Sketch Archive
· Font: Product Sans
· Videos: Videos of prototypes (x2)
· Plug-in required: Anima Launchpad Autolayout