En diciembre de 2021, la facultad de diseño y UX de Platzi junto con Torresburriel Estudio lanzaron #MyProductDesign, un reto en el que durante 4 semanas tuve la oportunidad de apoyarme con expertos referentes de diseño digital y mejorar mis habilidades en diseño UX, diseño UI, diseño en modo oscuro, conocer nuevo stack tecnológico, y lo más importante: identificar problemáticas del entorno, adaptarlas a las necesidades de los usuarios y mejorar mis capacidades de comunicación durante el proceso.
El reto propuesto fue el siguiente:
Implementar un Sistema de Tarjeta Digital
en app para recargar la MetroCard de la ciudad de Belair, US.
Research Descubrimiento
Contexto -
En Belaire el transporte más utilizado es el metro. Cada día se desplazan cerca de 6 millones de personas y tiene 468 estaciones. El sistema de ‘MetroCard’ ha permanecido igual durante décadas, uno de los problemas clave es la tarjeta de papel grueso que se tiene que sacar de la máquina, la cual se encuentra en diferentes estaciones. Su rediseño es una excelente oportunidad de mejorar la infraestructura del transporte de la ciudad.
Usuarios -
Los usuarios/as del metro son personas de la ciudad de Belaire, ubicadas en Estados Unidos, de estrato medio-bajo, que usan este medio de transporte para trasladarse principalmente a sus trabajos o lugares de estudio. Los beneficios que ven en usarlo es el costo de un pasaje y la rapidez para llegar a un lugar.
Requerimientos -
La app debería permitir a los usuarios comprar tickets y consultar tiempos de paso y líneas. Es decir, lo mismo que harían de forma presencial en la estación de metro, pero desde su celular. Importante tomar en cuenta que la tarjeta digital en app no elimina por completo el sistema físico mediante máquinas automáticas.
*Entorno de la aplicación
Tras los datos obtenidos del research, pasé a definir a mi user persona para quien realicé su mapa de empatía y costumer journey.
*El user persona es de un usuario focal ya que es el principal tipo de usuario al que nos dirigimos.
Acercamiento al problema
Realicé entrevistas uno a uno a usuarios frecuentes del metro para conocer las problemáticas con las que se han encontrado a la hora de usar el servicio.
Esta información la plasmé en un diagrama de pescado para visualizar mejor el problema junto con sus causas.
Organización de la investigación
Luego realicé una encuesta en Google Forms para obtener respuestas a lo siguiente:
• Lo que el usuario quisiera ver al entrar a la aplicación
• Forma de presentación de las estaciones y líneas
• Forma de presentación de la ruta del usuario
• Cómo les gustaría ver los horarios de salidas
• Métodos favoritos para realizar sus recargas
• Otras problemáticas en servicios similares
• Forma de presentación de las estaciones y líneas
• Forma de presentación de la ruta del usuario
• Cómo les gustaría ver los horarios de salidas
• Métodos favoritos para realizar sus recargas
• Otras problemáticas en servicios similares
Como resultado de la investigación pude sacar estos insights, y marqué los de más alta prioridad y los que se podrían resolver en el MVP del producto.
La Solución
La MetroApp de Belair pone al usuario y a sus necesidades en el centro, es una aplicación que reúne los diferentes servicios que el usuario necesita a la hora de realizar un viaje en el metro de la ciudad. En ella podrá recargar fácilmente su metrocard sin tener que formarse en la fila de la máquina automática, también podrá recargar otras tarjetas de familiares o amigos.
Y para los que no conozcan el sistema del metro o vayan de visita, la app se encarga de trazar una ruta con horarios del camino que deben recorrer para llegar a su destino. ;)
Arquitectura de la Información Ai
Antes de hacer los wireframes, comencé por crear un mapa de sitio en donde organicé todos los requerimientos que debía tener la aplicación de una forma intuitiva para el usuario.
Mapa de Sitio
Prototipo Lo-Fi
Wireframes en Baja Fidelidad
Prototipo Hi-Fi
Para el prototipo en Alta Fidelidad, primero realicé un user persona del sistema de diseño para definir la voz, el tono y el estilo de la marca en combinación con la aplicación.
Colores primario y secundarios
Ejemplo de cómo se vería la identidad de marca aplicada a la tarjeta física -
MetroCard Física
y ahora sí al prototipo...
Light mode
Dark mode
Conclusión
Cuando comenzó el reto no imaginé llegar tan lejos, ya que fuimos alrededor de 200 personas tratando de ir al paso de los requerimientos para desarrollar la solución, pero a medio mes mi proceso de research fue seleccionado como uno de los 5 mejores, lo que me dio la ventaja de exponer mis avances frente a todos los participantes y recibir feedback para mejorar mi propuesta en la entrega final.
Me siento muy satisfecha con mi resultado, disfruté todo el recorrido desde la conceptualización hasta el prototipo, mejoré mis habilidades de ideación y la aplicación al diseño de interfaces me gustó mucho!
Por último, dar gracias a todo el equipo de Platzi, de Daniel Torres Burriel y a todos mis compañeros por compartir tantos recursos para aprender juntos, gracias a eso mi proyecto terminó siendo parte de la galería de los mejores proyectos del reto. :)
¡Thanks for watching!
