Cómo aplicar el proceso de diseño UX hizo que los usuarios usaran con más fluidez el Com s’hi va, la web-app de movilidad del Ayuntamiento de Barcelona
Resumen
Contribución: Proceso completo de diseño UX
Rol: Miembro de un equipo
Acciones clave: Benchmark, wireframes y tests de guerrilla
Rediseño del Com s’hi va
En un primer momento se nos pidió revisar el menú del Com s’hi va y detectamos que la experiencia general tanto en desktop como sobretodo en móvil era muy confusa y mejorable. Al detectar esta inconsistencia cliente aceptó realizar un cambio más detallado de los elementos principales, teniendo en cuenta cumplir con los objetivos principales de los usuarios, planificar rutas y ver capas sobre el mapa.
Benchmark
Al necesitar un rediseño más a fondo primero de todo me centré en hacer un benchmark de distintas webs de otras ciudades internacionales cómo de Berlín y Nova York, además de analizar apps de movilidad cómo Google Maps y Bing, para así ver referentes e inspirarme y obtener un punto de partida más sólido.
Patrones y temas clave detectados:
Mapa en pantalla completa: el mapa como elemento principal donde poder ver el resultado de búsquedas, capas añadidas, transporte cercano, estado del tráfico, etc.
Botón de planificación de ruta visible: La funcionalidad principal es el elemento clave por lo que estará siempre visible para facilitar crear/modificar ruta sobre el mapa.
Opciones fáciles y claras: poder acceder a las opciones de forma rápida teniendo de un vistazo las funcionalidades principales que se ofrecen.
Wireframes
Tests de usuario
Se hicieron 3 iteraciones en móvil y 3 en desktop con 3-5 usuarios en cada ronda, afinando cada vez más el diseño.
Insights principales:
Nuevo menú: Se hizo un cambio de literales quedando mucho más claras las opciones disponibles y las posibilidades que había detrás de cada una.
Enfatizar el botón de capas: Fue necesario hacerlo más visible en móvil y relocalizarlo en desktop a la barra superior derecha junto a otras funcionalidades propias de esta sección. Esto hizo que en las siguientes iteraciones los usuarios no sólo vieran el elemento de añadir capas sino que fueran capaces de visualizar capas sobre el mapa de forma autónoma.
Leyenda en estado del tráfico: Necesidad de aclarar elementos más complejos como en el estado del tráfico añadir una explicación del significado de los colores.
Avisar al usuario cuando se añaden capas de forma automática para evitar confusiones. Por ejemplo en las rutas en bici se activan los carriles bici sin avisar. Se aplicó la solución de un tooltip informativo.
Opción de tener un historial de búsquedas y sugerencias de origen/destino eficaces para no tener que repetir de cero el nombre.
Aprendizajes de los tests
- Los haria antes con los Miros en papel/blanco y negro para detectar mejoras de literales, posición de elementos, etc. lo antes posible
- Los errores en la misma ronda de test que se repiten los obviaría a los siguientes usuarios para ahorrar tiempo/frustración
- Hubiera tenido solucionados previamente los errores informáticos para agilizar los tests sin errores técnicos innecesarios
- Hubiera reportado al momento los cambios de móvil que afectaban a desktop para mantener la consistencia
- Haría entrevistas al inicio del proyecto para tener en cuenta las necesidades de los usuarios desde el principio
Más información sobre los tests de guerrilla del proyecto:
