Concurso EMT — Madrid

Antes de empezar a trabajar estaba en casa, pudiendo escoger con total libertad proyectos para seguir aprendiendo y cogiendo experiencia diseñando. Curré mucho y seguí formándome y practicando para llegar donde estoy ahora y desde luego, ha merecido la pena.

Vengo a presentaros un proyecto que he vuelto a diseñar junto a Marta Sánchez Cavadas, esta vez propuesto por la Comunidad de Madrid: una aplicación para la EMT que unifique los servicios de EMT Bus, BiciMAD, EMT Parking y ElectroEMT.

Contábamos con 2 semanas para proponer una idea “sencilla e intuitiva”, expresada a través de una serie de pantallas en alta fidelidad y un documento que explicara cuál era el motivo de cada una de las decisiones tomadas en el diseño, dándole siempre valor a la experiencia de usuario.

Investigación

Como todo proyecto que desarrollamos, empezamos con un research similar al propuesto por la metodología del Design Thinking, utilizando las siguientes técnicas.

Research questions

Para obtener respuestas hay que formular preguntas. Aunque algunas parezcan obvias pueden ser útiles para la investigación, así nos hicimos preguntas sobre cada una de las aplicaciones (EMT Bus, BiciMAD, EMT Parking y ElectroEMT), competencia y usuario.

Research questions EMT

Gracias a las research questions es más sencillo dar paso a la siguiente fase de la investigación, ya que sabemos a qué tenemos que dar respuesta para proponer en la fase de creación funcionalidades y mejoras necesarias.

Netnografía

Muchas de las funcionalidades que se proponen en nuestro prototipo final vienen de mano de la netnografía. Resulta muy útil cuando una de las partes más importantes para resolver el reto es mejorar una aplicación ya existente.

Así, estuvimos mirando las reseñas dejadas por usuarios en los Stores. A continuación algunos ejemplos:

Problema de accesibilidad
Compra de billete desde el móvil
Incidencias difíciles de gestionar
Digitalización del servicio de aparcamiento
Información de valor: plazas de aparcamiento
Pagar la energía que consumes

Benchmark

Al igual que con la netnografía, el benchmark fue de gran ayuda. Era importante ver qué había en el mercado, qué funcionalidades presentaba cada app, cómo era cada uno de los procesos… Con tan poco tiempo para el desarrollo de un proyecto tan complejo necesitabamos hacer una lista de funcionalidades que trabajaran correctamente para aplicarlas a nuestra app.

Colección de apps utilizadas para el benchmark

Estudiando y analizando estas aplicaciones sacamos conclusiones como:

  • Para la carga de un coche es necesario conocer el tipo de enchufe, la potencia, el tiempo y el precio.
  • Es imporante un cambio rápido y sencillo entre los diferentes usos que le vamos a dar a una misma aplicación, por ejemplo pasar de BiciMAD a Electro EMT con pocos pasos.
  • El usuario valora el tiempo que tarda en llegar a los sitios en función del transporte elegido y el precio.
  • Es importante mostrar mostrar las bicis disponibles, su estado de batería y los anclajes disponibles.
  • Digitalizar procesos como el pago y la reserva de una plaza de aparcamiento.
  • Puede ser abrumador para el usuario ver todos los servicios a la vez en un mismo mapa.
  • Es necesaria una pantalla de inicio sencilla donde el usuario pueda escoger fácilmente el servicio que necesita.

User personas y mapas de usuario

Para concer mejor la situación, decidimos crear 3 user personas y sus respectivos mapas de usuario. De esta forma contextualizábamos los insights recogidos, dándoles una realidad tangible.

El objetivo es localizar los pain points y resolverlos, proponiendo una solución siempre tomando como centro al usuario.

User persona 1: Rodrigo
Journey 1: Rodrigo

Rodrigo, de 38 años, es comercial y pasa mucho tiempo en su coche eléctrico debido a su trabajo. Se siente frustrado cuando va de un lugar a otro y le es imposible encontrar aparcamiento, no entiende por qué no hay alguna opción digitalizada en la cual pueda reservar una plaza para su coche. A esto se le suma la falta estaciones de carga para su coche y cuando las encuentra siempre tiene algún problema: están ocupadas, no sabe exactamente dónde están

User persona 2: Carolina
Journey 2: Carolina

Carolina, de 30 años, es perodista y vive a las afueras de Madrid. Usa a menudo el transporte público como el autobús o las bicis de BiciMAD. Cuando tiene que desplazarse a Madrid consulta varias apps para saber qué es más rápido y barato, perdiendo tiempo entre unas y otras ya que tiene que registrarse muchas veces. Al llegar al centro de la ciudad, coge una bici para llegar más rápido al punto de encuentro, pero al sacarla del anclaje ve que está estropeada, por lo que tiene que llamar al servicio técnico e informar del estado, un proceso tedioso. Le gustaría poder saber realmente su estado antes de llegar y poder reservar tanto bici como anclaje para aparcarla. A la hora de volver a su casa se da cuenta de que tiene que recargar su abono, algo que solo puede hacer desde una estación, lo que le hará perder el tiempo.

User persona 3: Emiglia
Journey 3: Emiglia

Emiglia, de 67 años, es jubilida y le gusta disfrutar de su tiempo visitando a sus hijos y saliendo con sus amigas. Tiene un smartphone y le gustaría aprender a utilizar algunas aplicaciones. Normalmente, cuando queda con su hija va a su casa, por lo que no tiene problema en llegar pero hoy tiene que ir a un restaurante nuevo, por lo que tiene que averiguar dónde está para saber que autobús coger. La aplicación que tiene instalada es complicada, incluso en ocasiones no es capaz de ver las letras o no las diferencia del fondo. Cuando consigue encontrar la línea correcta y va a la parada se siente algo insegura porque no tiene claro dónde se tiene que parar, le gustaría que el móvil le enviara alguna notificación para avisarla. Por último, aunque suela pagar en efectivo, le gustaría tener la opción de domiciliar el pago de su abono, ya que es uno de sus gastos fijos mes a mes.

A partir de estos viajes de usuario dedujimos varias oportunidades:

  • Tener la opción de reserva en la nueva app: aparcamientos, puntos de carga, bicis y anclajes.
  • Ofrecer siempre la información actualizada, en tiempo real y con precisión de los autobuses, de los aparcamientos, de los puntos de carga y de las bicis.
  • Opción en la app para informar de incidencias de forma ágil y sencilla, sin tener que hacer una llamada telefónica.
  • Ofrecer un formulario de registro común, donde el usuario solo tenga que dar los datos realmente necesarios.
  • Recarga del abono de transporte público a través de la app, con diferentes opciones de pago como tarjeta, domiciliación, PayPal…
  • Posibilidad de activar notificaciones: momento de bajarse del autobús, anclaje libre en x parada, bajada del precio del parking…
  • Aplicación accesible.

Ideación

Una vez recopilados todos estos insights, era el turno de la ideación.

Transformamos los insights en funcionalidades y recogimos las ideas y procesos más útiles obtenidas del benchmark y de la netnografía.

Era importante ordenar todas las ideas, por lo que utilizamos un MoSCoW y las organizamos según la aplicación de origen:

MoSCoW

Aunque no aparezca ninguna idea/funcionalidad en Won’t, la realidad es que no tuvimos tiempo para implementarlas todas.

Funcionalidades orgenadas según aplicaciones antiguas

Conceptualización

Llegamos a la parte más complicada del proceso: conceptualizar todas estas ideas y pasarlas a un prototipo real. El requisito principal del reto propuesto por la EMT era:

unificar todas las aplicaciones, actualmente 4, en una que sea sencilla e intuitiva.

Con tantas funcionalidades juntas nos costó arrancar. Tuvimos que hacer varios mapas mentales y esquemas para entender cómo queríamos compactar todo en una sola aplicación. Las conclusiones fueron las siguientes:

  • Dividir la app en tres caminos: Autobús, BiciMAD y Aparca y carga.
  • Interfaz común en los tres caminos, diferenciada por colores, buscando consistencia y facilidad de aprendizaje para el usuario.
  • Opción para volver al inicio presente en todas la pantallas, dándole al usuario mayor libertad.
  • Disponibilidad de diferentes métodos de pago en la aplicación.

Prototipo alta fidelidad

Este ha sido nuestra propuesta final para la EMT,

una app con un diseño sencillo, amable y consistente, con el que ayudamos al usuario a comprender los procesos y las funcionalidades, ya que son iguales en los tres caminos.

Proyecto en Figma

El proyecto se ha desarrollado en Figma, ya que al ser una herramienta colaborativa nos salva la vida. Además hemos implementado el uso de las nuevas variantes en los componentes, una funcionalidad genial que te permite entender mejor el diseño y componer más rápidamente.

Desarrollo UI

Aquí podemos ver los tres caminos de los que hablaba, destacando:

  • Misma estructura/arquitectura en los tres caminos. Mismo menú, pantalla de registro y configuración, mapa, pasos al buscar una dirección…
  • 3 colores identificativos para cada camino: Autobús, BiciMAD y Aparca y carga.
Prototipo

Conclusiones

Este proyecto ha sido un reto, no solo por el hecho de ser un concurso público sino por la problemática tan compleja que se planteaba.

Cambiar un producto (en este caso varios) que utilizan muchos usuarios es un reto complicado, hay que cambiar lo que ya es intrínseco en cada uno.

Además, compactar lo que ahora son 4 aplicaciones en 1 sola y hacerla sencilla y amable para el usuario es difícil. Son aplicaciones complejas, con muchas funcionalidades, mucha tecnología detrás (pagos, datos, QRs…) que requieren de un gran equipo para lograr un desarrollo y uso correcto.

El diseño presentado solo es el principio, una propuesta para unificarlas con un estilo similar para mejorar el tiempo de aprendizaje del usuario pero queda mucho trabajo. Estos son los futuribles más inmediatos, pero hay mucho más:

  • Testing. Crucial en una aplicación como esta de servicio público.
  • Diseñar todas funcionalidades: incidencias, favoritos, notificaciones, formas de pago… Aunque están presentes en el prototipo, no están diseñadas.
  • Recopilar toda la información de horarios y líneas en la sección del autobús y mostrarla en pantalla.
  • Adjuntar al mapa de “cómo llegar” el tiempo y dinero en pantalla mientras circulas con BiciMAD.
  • Formulario de registro del coche.

Etc…

¡Espero que os haya gustado! Muchas gracias por leerme, cualquier propuesta de mejora será bien recibida. Ahora a esperar la decisión del jurado ☘️

Diseñadora UX/UI | Arquitecta

Diseñadora UX/UI | Arquitecta