TuBondi es una app para conocer los horarios y recorridos de los micros de La Plata y activar recordatorios para llegar a tiempo a la parada.
Descripción del proyecto
Este proyecto fue realizado para el curso de Diseño UX/UI dictado por Coderhouse, entre los meses de marzo y junio de 2024, cuyo objetivo era diseñar una app móvil nativa de principio a fin, consolidando todo el proceso en un prototipo de alta fidelidad.
Decidí crear TuBondi, una app para conocer los horarios en tiempo real y los recorridos de todos los micros de la ciudad de La Plata y activar recordatorios para llegar siempre a tiempo a la parada.
Seleccioná una de las paradas cercanas a tu ubicación, conocé todos los horarios de los próximos arribos y activá un recordatorio para el micro que necesites tomar. ¿No te ubicás bien en la ciudad? También vas a poder seguir el recorrido en el mapa y elegir la parada final para saber cuándo bajar.
Problema
¿Cuántas veces nos pasó a todos que tuvimos que esperar 30 minutos en la parada porque no venía ningún micro o ver pasar uno por delante nuestro justo cuando estábamos por llegar?
A pesar de existir varias aplicaciones para ver los horarios del transporte público, muchas veces estas no son precisas o nos confiamos con el tiempo, nos distraemos y no llegamos a tiempo a la parada.
En la ciudad de La Plata existe una aplicación móvil realizada por Unión Platense, la empresa que administra todas las líneas de micros platenses, la cual es muy precisa con los horarios pero es poco intuitiva, difícil de usar y confusa en algunos casos. No posee más funcionalidades que la de mostrar los horarios y recorridos, sin embargo es la más utilizada por los platenses.
Decidimos tomar esta app como punto de partida para plantear nuestras hipótesis y buscar oportunidades de mejora. La idea era que fuera un servicio municipal para que sea algo local y acotado, y no saturar de información al usuario.
¿Cuál es el problema inicial?
A la hora de tomar un micro, la gente no quiere perder tiempo en la parada por haber salido tarde de la casa o esperando a que pase el micro correcto por no saber los horarios. Además en el caso de ir a lugares desconocidos, no sabe qué línea le conviene, cuál es su recorrido o donde está la parada más cercana.
¿Qué queremos lograr?
Proporcionar información precisa de manera rápida y accesible sobre los horarios, paradas y recorridos.
Evitar pérdidas de tiempo y disminuir el estrés/ansiedad de los usuarios.
Ser un complemento para un sistema de transporte público más eficiente.
¿Cómo lo podemos resolver?
Una app que permita ver paradas cercanas, conocer los horarios de los próximos micros que están por pasar y activar recordatorios para salir; así como también poder ingresar un destino para ver las distintas líneas que le sean útiles al usuario y el recorrido de cada una.
Algunas de las apps existentes que muestran los horarios de distintos colectivos.
Proceso de diseño
Para llegar a la solución, primero tenemos que comenzar conociendo a nuestros usuarios para validar las hipótesis iniciales o plantear nuevas, y analizar a la competencia para descubrir qué se hizo bien, qué se hizo mal y todo lo que se puede mejorar.
Por eso, realizamos un estudio de benchmarking para analizar a 3 apps competidoras que cumplían al menos la función principal de mostrar horarios del transporte público:
Moovit: aplicación de suscripción opcional, con información global de mapas, horarios e indicaciones de colectivos.
¿Cuándo pasa mi micro?: plataforma para acceder en tiempo real a los horarios de los colectivos de La Plata.
Cuándo SUBO: app para conocer el horario del próximo arribo de un colectivo, con datos de 200 líneas de Buenos Aires.
Podemos concluir que la nueva solución debe ser intuitiva y fácil de usar a la hora de buscar una parada, precisa con los horarios mostrados y sin contenido irrelevante que confunda o abrume al usuario.
Moovit
¿Cuándo llega mi micro?
Cuándo SUBO
Luego, se realizaron entrevistas a 4 personas que vivían en La Plata, viajaban frecuentemente en transporte público y utilizaban alguna de las apps mencionadas para moverse por la ciudad. A partir de los datos recolectados, se crearon mapas de empatía y se contrastaron las hipótesis iniciales para validarlas y consolidar toda la información en nuestra user persona.
Una de las cuestiones más repetidas en las entrevistas fue el problema de llegar tarde a la parada y perderse el micro por haberse distraído en casa, a pesar de saber de antemano el horario del próximo arribo utilizando alguna de las apps.
Encontramos como insight el mal cálculo de los tiempos personales y el deseo de ser más puntual.
Con toda esta nueva información de las entrevistas con usuarios y el análisis competitivo, podemos definir el POV o punto de vista de nuestro usuario con tres puntos claves: quién, qué y por qué. A su vez, pensamos la primera instancia de una posible solución definiendo el MVP, es decir, el producto mínimo viable que incluye las características o funciones básicas y esenciales para satisfacer la necesidad principal.
POV
MVP
Tras definir el problema y la posible solución, pasamos a trabajar en el contenido con la arquitectura de información, para lo cual se realizó un estudio de card sorting a partir de un mapa de sitio inicial, cuyos resultados sirvieron para conocer cómo los usuarios ordenarían ese contenido y hacer las modificaciones necesarias.
Matriz de similitud y dendrograma con los resultados de las categorizaciones de los usuarios.
Mapa de sitio final, modificado tras los resultados del card sorting.
Ahora podemos empezar a pensar las distintas interacciones y ramificaciones que se puedan dar en este mapa de sitio, cuando el usuario aparezca nuevamente en escena y navegue por el MVP. Para esto, desarrollamos un userflow con los distintos procesos, acciones y decisiones que puede tomar el usuario al realizar la tarea principal desde el principio hasta el final.
Ver horarios y activar recordatorios
El usuario entra por primera vez a la app para buscar una parada en el mapa, ver los horarios del micro que usa frecuentemente para ir a la facultad y activar los recordatorios para salir de casa.
Userflow
Con el userflow del MVP definido, empezamos a darle forma buscando inspiración y ejemplos de patrones de navegación en distintas apps. Partimos de los primeros bocetos en papel de la home y algunas pantallas principales, hasta desarrollar wireframes en baja y media para definir la estructura de las distintas pantallas.
La idea fue utilizar el mapa con la ubicación del usuario y las paradas cercanas como la pantalla de inicio de la app, y mantener la barra de navegación inferior con accesos a las 4 principales funciones y el menú superior con la barra de búsqueda y cualquier función adicional escondida en el menú de hamburguesa.
Wireframes en baja, basados en la tarea principal del MVP (seleccionar una parada en el mapa, ver los horarios y activar el recordatorio para salir hacia la parada).
Tras los primeros wireframes en baja, tomamos el atomic design y los lineamientos del Material Design 3 de Android como guías para comenzar a crear componentes e incrementar la fidelidad de los wireframes, incorporando patrones de diseño y desarrollando más pantallas secundarias, como la página de paradas favoritas o el centro de notificaciones.
Wireframes en media, definiendo algunos patrones de diseño basados en Material Design y ajustando detalles.
Solución y resultados
Una vez definidas las estructuras de las páginas principales con los wireframes, se agregaron interacciones y animaciones para crear un prototipo funcional para testearlo con usuarios, buscando siempre que cumplan con las heurísticas.
Se realizaron tests de usabilidad con 5 usuarios para detectar lo que funcionó y lo que no, y así encontrar puntos para mejorar. Finalizadas las pruebas, se envió una encuesta de satisfacción para que los usuarios puntúen la experiencia con el prototipo, y luego se revisaron las grabaciones para completar las planillas de registro y las métricas de eficiencia y eficacia.
Tareas evaluadas
Buscar el horario del próximo micro de la línea 273 ramal 6 que pase por la parada más cercana a tu casa y activar un recordatorio para salir a tiempo.
Comparar el recorrido de los ramales BC y B11 de la línea 273, y revisar cuál es la última parada del ramal BC.
Lo que funcionó
La búsqueda de los recorridos de las líneas se dio de manera fluida.
3 de 5 usuarios lograron activar los recordatorios a partir del horario de un próximo arribo.
4 de 5 usuarios lograron elegir la parada más cercana en el mapa.
Lo que no funcionó
Las pantallas de onboarding fueron salteadas rápidamente.
Los usuarios se detuvieron mucho tiempo en la pantalla de login para procesar la información.
El snackbar fue ignorado al mostrar la confirmación del recordatorio.
2 de 5 usuarios tuvieron problemas para buscar una parada, dirigiéndose primero a la sección de Recorridos.
Puntos a mejorar
Revisar la pantalla del login para simplificarla o removerla ya que se trata de algo opcional (y permitir la creación de una cuenta en otro momento).
Simplificar el onboarding con textos más cortos e imágenes complementarias.
Agregar pop-up de permiso de ubicación al principio para que se entienda mejor el mapa y distinguir al tener la ubicación activada o no.
Mejorar el feedback visual tras activar un recordatorio (mensaje fijo con el horario de salida, punto en el icono del centro notificaciones, etc.).
Luego de los testeos, volvemos al prototipo para seguir mejorándolo, con mayor fidelidad gráfica y funcional. Partimos de un moodboard y consolidamos el UI kit con tipografía, colores, animaciones y más componentes.
Nos basamos en el branding de la Municipalidad de La Plata y Unión Platense, y los colores que comparten todas las líneas de micros y que permiten identificar a cada una de ellas. En cuanto a la interfaz y el tono de voz, se tomó como inspiración Uber y apps de transporte similares, por el lenguaje amigable, el uso de mapas minimalistas y la claridad de la información.
Una vez que se aplicaron el UI kit y los componentes, se pensaron nuevos ajustes para mejorar la experiencia y usabilidad, iterando y validando nuestras decisiones. Estas son algunos de las modificaciones y mejoras realizadas tras los resultados de los tests de usabilidad y la revisión de las heurísticas:
Simplificación del Onboarding
Se acortaron los textos de las pantallas de onboarding para que sean más sintéticas y fácilmente escaneables.
Nueva pantalla de Login/Registro
Se creó una nueva pantalla omisible, separando el proceso de login y registro en pantallas diferente.
Optimización de ‘Mis paradas guardadas’
Se modificó el nombre para que sea más intuitivo y descriptivo tanto en el menú como en el título, y se escondieron las acciones en el menú de tres puntos, para evitar la eliminación accidental de una parada.
Horarios clickeables y feedback visual
Se modificó el formato de los horarios por cajas con dropdown para darles un aspecto más ‘clickeable’ y combinar todas las acciones en el mismo lugar.
Además, se agregaron elementos para el feedback del sistema, como el icono de la alarma al activar un recordatorio, el snackbar y la animación que cambia el icono del centro de notificaciones.
Permiso de ubicación
Se agregó la pantalla del permiso de ubicación y la sugerencia para activar la misma para mostrar las diferencias.
Seguir recorrido
Se agregaron las pantallas para la funcionalidad de Seguir recorrido y la acción de seleccionar una parada final.
