Metropolis Underground

PRODUCT DESIGN CHALLENGE

El metro de la ciudad Metropolis ya no acepta tickets de papel. La única manera de recargar/renovar los abonos/tarjetas es a través de las máquinas de las propias estaciones. ¿Cuáles son los problemas que aparecen por esta situación? ¿Cómo podemos mejorar los procesos relacionados a través de una app?

01

Planteamiento

· Reflexión previa
· Premisas de diseño
· Referencias funcionales
· Lean UX Canvas

Para diseñar esta experiencia voy a seguir el siguiente proceso basado en el diseño centrado en el usuario. Primero, con los datos que tengo, entiendo para quién estoy diseñando, cómo se comporta y qué necesita y lo contrasto con algunas opiniones de usuarios reales. Contrasto la información para ver si estaba en lo cierto, para después prototipar rápidamente posibles soluciones de las funcionalidades más valiosas para ellos. Por último, testeo con usuarios reales, solvento los fallos y lanzo el MVP para testearlo en entorno real.

Con los recursos y espacio de tiempo reducido que tengo (dos semanas), he diseñado el siguiente proceso para intentar obtener el mejor MVP posible. Se resume en las siguientes fases:

Pantallazo de Notion, donde me planifiqué el trabajo.

Reflexión previa

Hay básicamente dos tipos de usuario: los usuarios habituales que tienen un bono mensual y lo recargan una vez al mes y los usuarios ocasionales como turistas o personas, que no suelen usar mucho el metro y prefieren usar tarjetas de 10 viajes o sencillos. Yo voy a centrarme en estos segundos para diseñar la experiencia aunque en la fase de investigación entrevistaré a usuarios de todos los perfiles.

Premisas de diseño

Además del diseño centrado en el usuario también voy a basar algunos argumentos en estas tres premisas a tener en cuenta por el tipo de proyecto y el alcance que tiene.

01
Diseño Universal

Como es un producto que usarán personas de todos los perfiles y rangos demográficos, intentaré desarrollar el producto de manera que sea accesible y entendible para el mayor número de personas posible. La curva de aprendizaje debe ser baja. Utilizaré patrones de interacción ya interiorizados por los usuarios gracias a otras aplicaciones.

02
UX ergonómico

Muchas veces el usuario irá con prisas y andando mientras utiliza la app, por lo que veo necesario “diseñar para el pulgar” en la medida de lo posible, ya que hoy en día los móviles son cada vez más grandes . Esto se llevará a cabo acercando los elementos más importantes a la parte inferior de la pantalla.

03
Personalización

Cada vez apreciamos y valoramos más cuando la experiencia se amolda a nosotros y no nosotros a la experiencia. Intentaré eliminar fricciones a la hora de conseguir las tareas principales a base de notificaciones basadas en datos personalizados. Por ejemplo, incidentes en tus líneas habituales.

Referencias funcionales

En primer lugar empecé a investigar sobre otras apps de metro del panorama nacional e internacional.

La idea inicial fue usar como funcionalidad principal la recarga y consulta de saldo de manera rápida e intuitiva. No hay ninguna que lo haga de todas las que pude descargar excepto Tubemap de Londres, pero te lleva a la web embebida.

La mayoría de las apps de metro no tienen navegación con mapa como tal, sino una imagen de la propia red de metro. En cambio, las apps de navegación que te dicen cómo ir en metro tienen muchísimas funcionalidades.

Mi objetivo es generar una app fácil de usar basada en el control del abono de transporte y la navegación entre estaciones.

APPS TOMADAS DE REFERENCIA

Apps de metro: Metro de Madrid, Berlin Subway, Tube Map,

Apps de navegación: Citymapper, Moovit, Google Maps, Transit, Lyft, Cabify, Uber

Apps de Monedero: Apple Wallet, Coinbase

Lean UX Canvas

Para hacer una primera aproximación a los problemas y soluciones utilizo el Lean UX Canvas que me hace reflexionar y generar hipótesis que más tarde tendré que validar con los propios usuarios.

 

Plantilla de Lean UX Canvas rellenado en Mural.co

02

User research

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

Value Proposition Canvas

El Value Proposition Canvas me ayuda a preguntarme quién es mi cliente, qué hábitos y qué problemas reales tiene y qué le ayudaría a aumentar su satisfacción personal y reducir su frustración.

Plantilla de Value Proposition Canvas rellenado en Mural.co

Entrevistas

A través de las entrevistas intento validar los problemas encontrados en las hipótesis anteriores. ¿Coinciden los problemas encontrados en nuestras hipótesis con los que realmente tienen los usuarios? ¿Nos desvelan nuevos?

En el primer contacto dicen estar contentos con la situación actual en relación a su abono de transporte pero esto es porque no conocen algo mejor, ya que, una vez les comento las posibilidades que hay, comienzan a darme información de calidad. Algunas cosas me sirven para validar funcionalidades, descubrir alguna nueva e incluso descartar una por complejidad para esta fase. (Acceder con el móvil al metro por NFC)

En definitiva, me ayudaron mucho. Hicieron que mis modelos mentales quedaran a un lado y me hicieron pensar de otra manera.

Actualmente no tienen esa necesidad, hasta que la creemos nosotros.

Paula M.

Enfermera / 31 años / Bono 10 viajes

PROBLEMA: Me comenta que a veces se le olvida la cartera pero que el móvil no y que estaría bien poder pagar con el móvil.

"El otro día se me olvidó la cartera en el hospital. Tuve que pedir dinero al personal del metro......"

Paula M. (enfermera)

Martín M.

Estudiante / 22 años / Bono mensual

PROBLEMA: No me avisa cuándo tengo que renovar la tarjeta.

Martín me reafirma algo que yo mismo había pensado y que además me ha ocurrido personalmente. El hecho de no saber cuánto te queda en la tarjeta. Vas a pasar, sale rojo y tienes que volver a la máquina a recargar la tarjeta con la frustración y el retraso que ello conlleva.

También me tira por tierra el acceso a la red de metro por móvil ya que habría una duplicidad y se podría usar 2 veces 2 personas. A menos que detectara que estás dentro. En el metro de Madrid por ejemplo no valdría porque no fichas al salir. Por su complejidad decido no entrar en ese terreno.

"A veces es un coñazo porque no te das cuenta de que te ha caducado y tienes que ir a la máquina y por las mañanas suele estar petado"

Martín M. (estudiante)

María A.

Ejecutiva / 42 años / Bono 10 viajes

MEJORA: Añadir tarjetas de sus familiares

María me da una idea que no se me había ocurrido: poder añadir más tarjetas, por ejemplo, las de sus hijos para poder recargárselas sin tener que darles el dinero.

"Estaría bien poder recargar los abonos de mis hijos"

María A. (ejecutiva)

Persona

Eduardo es mi persona. En él reflejo los puntos críticos que experimenta y que tendrá que poder conseguir con la app para solucionarlos y mejorar de esta manera su satisfacción. Esta herramienta me ayuda a ponerme en su piel y ver qué es realmente lo que necesita.

Persona en base al protopersonaje Lean de la metodología Lean UX

Priorización MoSCoW

Llegados a este punto, debo categorizar las funcionalidades en base a la importancia que tienen para los usuarios para añadirlas o no al MVP. Contrasto mis propias ideas e hipótesis con las que me han dado mis entrevistados. ¿Qué funcionalidades son obligatorias para cumplir el objetivo que nos hemos propuesto? ¿Cuáles son opcionales?¿Cuáles no vamos a desarrollar? Para ello uso la priorización MoSCoW. Si fuera un caso real tendría otros dos factores en cuenta además del valor de la funcionalidad para el usuario: el coste tecnológico y el coste temporal.

03

AI

Flujos de usuario

Dividí la experiencia en dos flujos. Para esta ocasión hice todo en papel. Lo testeé con algunos amigos y me puse a diseñar en alta fidelidad. A pesar de que si hubiera contado con más tiempo habría hecho un prototipo en media fidelidad esta es la opción que mejor se ajusta a este caso.

Estos son los dos flujos que he diseñado:

Flujo 1

Tarjeta

Eduardo es usuario ocasional de metro y suele usar bonos de 10 viajes. Se entera de la existencia de la app de Metropolis y quiere probarla. Quiere sincronizar la tarjeta que ya tiene con la app, ver el saldo, añadir método de pago y ver si la tarjeta está activada. Puede cancelarla y recibir el dinero de vuelta.

  1. Sincroniza la tarjeta.
  2. Añade método de pago
  3. Permite Notificaciones
  4. Recibe aviso de saldo escaso

Tiene acceso los siguientes datos:
· Estado de la tarjeta
· Saldo / Caducidad de la tarjeta.
· Últimos viajes con horarios de entradas y salida de la red.

 

Flujo 2

Navegación

Eduardo acaba de empezar a usar la app. Ha añadido su tarjeta de transporte y los destinos habituales de casa y trabajo y se dispone a ir a un nuevo destino. Usa la navegación.

  1. Activa localización
  2. Prueba tipos de mapa
  3. Búsqueda de trayecto
  4. Aviso de incidente

Tiene acceso a los siguientes datos:
· Trayectos
· Horarios de trenes 
· Ocupación por vagón
· Ocupación de estación
· Incidentes en tiempo real

Algunos wireframes en baja fidelidad del proyecto

04

Visual

· Logotipo
· Tipografía
· Colores
· Grid

Logotipo

El logotipo son tres líneas de metro unidas que se entrelazan y forman la M de Metropolis. Está basado en el diseño de Massimo Vignelli del metro de Nueva York del año 72 que, además de ser visualmente atractivo a pesar del tiempo que ha pasado por él, lo considero un ejemplo de diseño de experiencia de usuario muy sofisticado, y sobre todo útil. Solucionó el caos que había hasta la fecha a la hora de orientarse dentro del metro.

Colores

Tipografía

Elijo Product Sans. Tipografía de palo seco. Aspecto contemporáneo, moderna pero sin llegar a ser demasiado seria. Lo más importante es que funciona correctamente en todos los dispositivos digitales y fue creada por Google.

En el logotipo se han redondeado algunas esquinas para aumentar la consistencia de marca. 

Grid en base 8px

Lo considero esencial y no concibo no usarlo. Ayuda a dar coherencia y consistencia espacial a todo el diseño en general. He utilizado márgenes exteriores de 16 pixeles.

05

Prototipo

· Flujo 1 (Tarjeta)
· Flujo 2 (Navegación)
· Extras

Flujo 1

Tarjeta de transporte

Eduardo es usuario ocasional de metro y suele usar bonos de 10 viajes. Se entera de la existencia de la app de Metropolis y quiere probarla. Quiere sincronizar la tarjeta que ya tiene con la app, ver el saldo, añadir método de pago y ver si la tarjeta está activada. Puede cancelarla y recibir el dinero de vuelta.

  1. Sincroniza la tarjeta.
  2. Añade método de pago
  3. Permite notificaciones
  4. Recibe aviso de saldo escaso.
*Extra ( No en prototipo)

· Cancela tarjeta: Se puede cancelar la tarjeta y recibir de vuelta el dinero restante en ella.
· Añade una tarjeta: Posibilidad de añadir diferentes tarjetas. En el caso de ser mensual la pantalla principal de la tarjeta cambiaría y en vez de poner “Crédito: 2 viajes” pondría algo como: “Días para caducidad: X días.”

Habrás notado que el aviso de saldo escaso no está en el prototipo. Cierto. Aunque no está desarrollada en visual por tiempo, la idea es que después de la notificación, te de la opción de recargar rápidamente. Además, se podría configurar un pago automático con un trigger a tu elección de número de viajes o días de caducidad. Esta funcionalidad ayudará a mucha gente a ahorrarse enfados y colas.

Flujo 2

Navegación

Eduardo acaba de empezar a usar la app. Ha añadido su tarjeta de transporte y los destinos habituales de casa y trabajo y se dispone a ir a un nuevo destino. Usa la navegación.

  1. Activa localización
  2. Prueba tipos de mapa
  3. Búsqueda de trayecto
    – Horarios de trenes 
    – Ocupación por vagón
    – Ocupación de estación
    – Incidentes en tiempo real
  4. Aviso de incidente

También falta el aviso de incidente en línea o trayecto habitual. Esto indicará de antemano al usuario que hay una irregularidad en una línea que suele usar. Mi idea es que como la app sabe más o menos a que horas y a qué sitios (habituales) vas, te avise un poco antes para poder tomar una alternativa y no verte en el problema de obras, retrasos, etc. Mi idea inicial es que funcione a nivel personalizado con los trayectos habituales pero que puedas añadir líneas favoritas y configurar el nivel de notificaciones. No tendría sentido que te notificara de toda la red.

06

Documentación

Finalmente si quieres poder descargar la documentación, escríbeme a juan@juancortazar.es.

En la carpeta encontrarás:

· Archivo Sketch
· Tipografía: Product Sans
· Vídeos: Vídeos de prototipos (x2)
· Plugin necesario: Anima Launchpad Autolayout