ALUMNOS
Contactar
Menu
ALUMNOS
Contactar

Rediseño de la App de las Tarjetas de Transporte de Madrid : Desenlace

27 de julio de 2018 11:43:47 CET

La tecnología se ha ido haciendo un hueco en todas las facetas de nuestra vida y la forma en que nos movemos es una de ellas. Por esto durante el curso 'UX/UI Design Bootcamp' de Neoland he decidido analizar e investigar la app de las tarjetas de transporte de Madrid.

Puesta al día…
Empezamos por estudiar a los usuarios; lo que declaran abiertamente sobre el uso de la actual app y sus desideratas si pudieran configurar una app a su gusto. Las opiniones son malas y giran en torno a problemas técnicos y de usabilidad y a una funcionalidad reducida.

  • Analizamos con lupa la actual app para saber con exactitud que problemas presenta y como conectan con los problemas que declaran los usuarios. Idem; es una app de mínimos que además falla a nivel de diseño y de funcionalidad en numerosas ocasiones.
  • Hay indicios para pensar que el uso de la app dista de ser masivo a pesar de que el uso de las tarjetas de transportes en Madrid si lo es.
  • Echamos una mirada a las apps de tarjetas de transporte de otros lugares y nos damos cuenta de lo precaria que resulta la app de Madrid, tanto a nivel de funcionalidad como de diseño.
  • Después de analizar el objetivo de esta aplicación y las funcionalidades que el usuario demanda, nuestro rediseño se plantea la arquitectura con la idea de situar a las tarjetas en el centro de la experiencia.

¿Cómo respira?
Nuestro prototipo se desarrolla para un usuario dado de alta (y que ya ha agregado un medio de pago a su cuenta), que no tiene todavía ninguna tarjeta de transporte registrada y que desea realizar tres tareas: registrarse, añadir una tarjeta de transporte y recargarla con un título. Para entender y poner a prueba nuestra arquitectura a nivel visual, realizamos en mid-fi primero los flujos de estas tres tareas. Estos tres flujos nos sirven igualmente de marco para explicar el diseño que se expande más allá de estas pantallas.

1_KWcSL0BM10VC75xPlTmliA
 

Registro en la app

  • Para utilizar el servicio es necesario darse de alta en la app y crear una cuenta. En el proceso de alta se solicita: nombre completo, email y contraseña. En el registro también se puede añadir un medio de pago(tarjeta de crédito/débito o una cuenta de PayPal). Una vez creada y confirmada la cuenta, el acceso se realiza mediante email y contraseña. La app da la opción al usuario para que recuerde el email y solo requiera de la contraseña para acceder.
  •  Tanto aquí como en el resto de la app, el diseño de los formularios no oculta los inputs de texto y botones de confirmación tras el teclado táctil y favorece una interacción más visible y rápida.
  • Existe una icono de ajustes en la parte superior derecha de las pantallas de registro , que permite configurar las opciones de idioma y accesibilidad. Una vez completado el registro, esta misma pantalla de ajustes vuelve a aparecer y la configuración fijada se guarda para el usuario registrado. Los ajustes no volverían a aparecer tras el primer login y podrían modificarse a través del perfil de usuario de la aplicación (ver más abajo).


Añadir Tarjeta

  • Al finalizar el registro, se accede a “mis tarjetas”, que actúa como home de la app. Al abrir por primera vez la aplicación, solo permite añadir una tarjeta o acceder al menú lateral de la app bajo el botón hamburguesa. Este menú contiene las siguientes opciones: perfil de usuario (cerrar sesión, datos de la cuenta y ajustes), localizador de puntos de información y puntos de recarga físicos de la tarjeta, calculadora de tarifas, ayuda y sobre nosotros.
  • Una misma tarjeta solo puede estar asociada a una cuenta.
  • El proceso de “añadir tarjeta” se inicia con la selección del tipo de tarjeta que se desea agregar (TTP personal o multi).
  • Posteriormente, para comprobar que el usuario es el propietario de la tarjeta, la app solicita:

En el caso de la TTP personal:

  1. El número de la tarjeta de transportes o su lectura mediante NFC. En el diseño realizado, y para evitar ocultar el botón de confirmación, el teclado táctil se superpondría a la imagen de ayuda para localizar el número de la tarjeta. Esto podría suponer un problema para los usuarios.
  2. El DNI del propietario.
  3. Su fecha de nacimiento.

En el caso de la TTP multi:

  1. El número de la tarjeta de transportes o su lectura mediante NFC.
  2. Responder a una pregunta de seguridad sobre su historial de viajes (p. ej. ¿en qué parada o estación utilizaste por última vez tu tarjeta transporte?). La pregunta de seguridad tiene tres intentos. Tras el último intento la pregunta cambia.
  • En cuanto a la lectura mediante NFC, se ofrece asociada a un botón de más información para saber qué significan las siglas, cómo saber si el teléfono dispone de esta tecnología y cómo activarla. La propia pantalla de lectura de la tarjeta con NFC vendría acompañada de una imagen o animación aclaratoria sobre cómo realizar correctamente la lectura. Este proceso de lectura tendría un tiempo límite, consumido el cual aparecería una notificación. Igualmente, un error de lectura estaría acompañado de su mensaje correspondiente.
  • Un sistema de registro seguro de la tarjeta permitiría bloquearla y recuperar el saldo en caso de robo o extravío.
  • Una vez completado el registro, se muestra una pantalla de tarea completada donde figuran los datos de la tarjeta y los títulos cargados con su saldo/caducidad correspondientes.
La solicitud de información personal para hacer seguro el proceso de añadir una tarjeta, puede generar rechazo en algunos usuarios.

 Recargar de tarjeta

  • Una vez añadida una tarjeta, “mis tarjetas” permite operar con cada una de ellas: recargarlas, programar alertas para cada título (notificaciones push), eliminarlas de mi usuario, transferir títulos compatibles entre ellas, bloquear la tarjeta y consultar y descargar el historial de movimientos (viajes/saldo o caducidad).
  • “Mis tarjetas” se organiza de forma similar a otras apps de bancos a la hora de gestionar tarjetas de débito y crédito.
  1. Una imagen digital de la tarjeta con la información básica de la tarjeta, incluido su número de referencia, los títulos y el saldo. En caso de tener más de una tarjeta añadida, podemos pasar de una a otra mediante las flechas a ambos lados de la tarjeta o deslizando el dedo sobre la propia tarjeta.
  2. Inmediatamente por debajo, y visualmente asociada con la tarjeta, se sitúa un menú con las acciones que pueden llevarse a cabo con la tarjeta.
  3. Por último, en la sección inferior, se presenta un historial con las últimas tres operaciones realizadas con la tarjeta, con información del día y hora, la parada y el saldo. El historial de movimientos pasaría a abrir una ventana en overlay que permite buscar por nombre y por rango de fechas.
  • Creemos que esta arquitectura de “mis tarjetas” permite: i) acceder con rapidez a las acciones de la tarjeta y ii) es una forma habitual para el usuario de gestionar tarjetas en otros medios.
  • Al pulsar sobre la acción de recarga, pasamos a un menú en acordeón que permite seleccionar el título a cargar. Este menú mostraría solo las opciones compatibles para el tipo de tarjeta y los títulos cargados.
  • La pantalla siguiente mostraría un contenido acorde con el título seleccionado:
  1. En el caso de los abonos mensuales de 30 días, la compra permitiría posponer la caducidad otros 30 días más, desde la fecha de caducidad vigente. Esta opción se habilitaría 10 días antes de la caducidad del título.
  2. En el caso de los títulos individuales para metro y metro ligero, la pantalla mostraría un slider que permitiría comprar los títulos por unidades hasta un máximo de 9. Se mostraría un aviso donde se indicaría que solo serían válidos para el mismo día de su compra. Así lo establece la normativa del Consorcio Regional de Transportes de Madrid (CRTM).
  3. En el caso de los billetes turísticos, la app permitiría comprar títulos con una validez de 1 a 7 días naturales.
  4. En el caso de los billetes de diez viajes, podrían seleccionarse conjuntos de 10 en 10 viajes.
  • En la pantalla de medio de pago, el usuario puede:
  1. Pagar con un medio previamente registrado, ya sea tarjeta bancaria o PayPal.
  2. Añadir un nuevo medio de pago, que podría guardase en el perfil de usuario para futuras operaciones.
  • En el momento de confirmar la compra con tarjeta, el usuario pasaría a una pasarela de pago donde se abrirían varias opciones:
  1. Una clave de confirmación de la operación por parte de la entidad bancaria.
  2. Un método transparente, sin clave, al estilo de Amazon. Este método haría más rápido y ágil la recarga pero podría acarrear problemas de seguridad o desconfianza por parte de algunos usuarios.
  3. En el caso de pago mediante PayPal, tener activado OneTouch de Paypalen el dispositivo y pagar sin iniciar sesión.
La recarga móvil de la TTP puede realizarse en cualquier circunstancia o situación. Esto invita a favorecer un proceso de pago ágil y transparente que puede chocar con cierto target de público.

Accesibilidad con estilo

La web actual del CRTM cumple con los Web Content Accessibility Guidelines (WCAG) de nivel AA. Para nuestro rediseño, hemos abordado la accesibilidad del contraste de color. El color corporativo del CRTM es un rojo (C13333) que en su web se muestra en una variante más clara aún (cf2c29). Ambos colores cumplen efectivamente con el nivel de contraste visual AA. Con el fin de alcanzar una calificación de contraste visual AAA y mejorar la accesibilidad que tendría con el uso del actual color corporativo:

  • Optamos por disminuir ligeramente el valor de brillo y subir la saturación (a62321). Como combinaciones secundarios (y manteniendo el estándar de contraste triple A), hemos utilizado una variante de color más clara ( de574a) y otra más oscura (700000). Las dos variantes más oscuras se utilizan como fondo (solido o en degradado entre ambos) para textos en color blanco. La variante más clara se utiliza para otros elementos visuales que no llevan texto (excepto en el rediseño del nuevo logotipo).
  • Alternativamente, empleamos también textos en marrón oscuro(4C3232) con fondos en blanco o grises (F4F4F4, E4E6E8 o degradado de EEEEEE a D8D8D8).
  • Los textos se presentan en la tipografía Avenir Next a tamaño 18pt (H1), 16pt (H2, a veces en caja alta) o 14pt (H1) en pesos medios y semibold.
  • Nuestro diseño no consigue llegar a la calificación AA de contraste visual en el diseño de los botones en estado apagado. Sería conveniente poder testar si es necesario modificar o eliminar esta ayuda de usabilidad en pos de un mejor contraste visual.

A estas acciones se suman otros ajustes de accesibilidad en la opciones de configuración de la app. De una parte, una opción de mayor contraste visual que modifica la app para que se muestre en blanco y negro. Y de otra, una opción de ayuda auditiva, que activa las ayudas de audio integradas en Android (TalkBack) e IOS (AVSpeechSynthesizer). Para poder activar ambas opciones la aplicación solicitaría al usuario los permisos correspondientes para acceder a estas funciones del SO.

1_i0TMVMK3wsF6JGDiJAF2Og1_aH_2tWDBkWxzNumZrWyjDg1_TIKohelGoiZjLolhqpmJ3Q

Un toque de personalidad

En la actualidad la identidad visual de las tarjetas de transporte físicas del CRTM se construye mediante los siguientes elementos de su manual de identidad corporativa:

  • El logotipo y color corporativos del CRTM.
  • Las identidades visuales de los operadores de transporte bajo el paraguas del CRTM (Metro, Buses Interurbanos, Metro Ligero, Cercanías y EMT).
  • El plano de metro.
  • Elementos gráficos de apoyo relacionados con las personas y los modos de transporte de la imagen corporativa del CRTM.
  • El logotipo de la TTP con tipografía sin serifa.

Para la app, se propone un imagotipo digital que es el resultado de la conceptualización de la imagen física de la tarjeta, incorporando y adaptando algunos de sus elementos. El imagotipo se compondría de:

  • Dos rectángulos de color blanco y rojo (cf2c29) con las esquinas redondeadas (radio=5) que representan las dos caras de la tarjeta. Estos rectángulos están giradas respecto a la horizontal 14,5ª, superpuestas y desplazados el uno respecto al otro en los ejes x e y. El rectángulo blanco posee además sombra exterior (y=2; Blur=4).
  • El logotipo corporativo del CRTM, reproducido exactamente del original pero con su color modificado a un rojo más brillante (cf2c29) que destaque de los tonos más oscuros del resto de la app. Este logotipo está girado 29º respecto a la horizontal.
  • Cuatro iconos de modos de transporte, similares a los que figuran actualmente en la tarjeta física, en color marrón oscuro (4C3232).
  • Por debajo y centrado visualmente a este conjunto, se disponen las siglas de la tarjeta de transporte público, en tipografía Avenir Next en caja baja.
 
1_xaOeKSgx4cGf3GCGfC_nkg

1_xaOeKSgx4cGf3GCGfC_nkg 

Voz y tono
Al igual que planteábamos en el aspecto de la accesibilidad, nuestro copy ha optado por intentar ser neutro, optando por el infinitivo y evitando el imperativo. En los casos donde se ha creído conveniente utilizar un copy más personal y cercano para mejorar la comunicación con el usuario, se ha empleado la segunda persona con el fin de no poner palabras en boca del usuario.

Lay-out
El lay-out de nuestro prototipo corresponde con el muy habitual ( y mayoritario) 360 px de ancho por 640 px de alto para dispositivos Android y una grid de 8 puntos. Consta de 6 columnas, con un offset de 16 px, un gutter de 8 px y un ancho de columna de 48 px. Si bien esta es una simplificación de la tremenda diversidad de resoluciones del ecosistema móvil, lo tomamos como una referencia de diseño para tener claro la composición y espaciado a la hora de trasladar la experiencia a otros formatos. Sobre este lay-out se ha generado un sencillo UI kit para agilizar y dar solidez a una app que contiene numerosos formularios de selección e input de texto.

 
 
 
Registro de usuario

Para la pantalla de bienvenida, el proceso de registro, la pantalla de configuración y las pantallas de acción completada con éxito, el lay-out se compone de una fondo rojo en degradado, con el texto en blanco y los input de textos en cajas blancas.

Para “mis tarjetas” construimos una versión de este formato con la mitad inferior en caja de fondo blanco para el menú y los movimientos de la tarjeta. Recomendaríamos esta misma composición para el apartado de información de la tarjeta.

Añadir tarjeta
Se compone de una top bar en degradado rojo, un fondo blanco en el cuerpo y rectángulos grises para el contenido. Recomendaríamos este lay-out para las opciones de eliminar y bloquear la tarjeta, configurar alertas, transferir títulos entre tarjetas, descargar movimientos y sobre nosotros.

Recargar tarjeta
Se repite el top bar en degradado rojo y el fondo blanco. El cuerpo se compone de un menú en acordeón en grises. Se recomienda también este lay-out para la calculadora de tarifas y para el FAQ.

Testeo
Una vez finalizado un primer prototipo de la interacción, se llevo a testar con dos usuarios que pudieron probarlo y realizar las tres acciones de la app; registrarse, añadir tarjeta y recargarla. En el momento en que testaron el prototipo, el diseño del flujo de recarga no estaba completo y solo pudieron seleccionar el título de transporte pero no finalizar la recarga.

Todas las tareas propuestas fueron realizadas con éxito en ambos casos. Sin embargo, salieron a relucir ciertos problemas de diseño y copy que dieron lugar a modificaciones en el diseño. El prototipo que explicamos y mostramos en esta entrada incorpora estos cambios.

Una última reflexión

Todo lo mostrado y todo lo que se pueda construir a partir de aquí no tiene valor si no se valida con usuarios. No hay duda de que testar una app como esta entre todo tipo de usuarios e iterar antes de generar el diseño de nuevos flujos, es el paso obligatorio a seguir.

Este proyecto de rediseño ha sido logrado con:
Dropbox Paper + Typeform + Trello + Slack + Sketch + Marvel + Whimsical + Artboard Studio + Shotsnapp + Smartmockups + Gifski + ApowerREC + Paste + Keynote
Conoce las fases anteriores de este proyecto: Introducción y Nudo. 
 
Puedes conocer más sobre NEOLAND y todos nuestros cursos pinchando aquí.

Suscríbete a nuestro email

Todavía no hay comentarios

Dinos que estás pensando