VolcánVigía
Carolina Rehbein - Diseñadora UX
Resumen del proyecto
Duración del proyecto:
Primeras dos semanas de Agosto del 2023
El producto:
Diseñar una herramienta que permita alertar e informar sobre la condición de los volcanes en Chile
El problema:
Personas que viven alrededor de volcanes ignoran el estado en que se encuentran y qué hacer en caso de suceder una erupción
Resumen del proyecto
El objetivo:
Crear una app que entregue información acerca de los volcanes cercanos, además de consejos de cómo actuar ante una erupción y Crear una web que se enfoque además de la información entregada en la app, dar información oficial, fidedigna y útil para la reconstrucción de localidades afectadas.
Mi función:
Diseñadora UX para la app y web de VolcánVigía desde la concepción hasta la entrega
Resumen del proyecto
Responsabilidades:
Realización de entrevistas, investigaciones, estudios de usabilidad, creación de wireframes en papel y digitales, diseño y prototipos de alta y baja fidelidad, iteración de diseños. Además de la adaptabilidad de la versión web, con enfoque “mobile first”.
Entender al usuario
Investigación sobre los usuarios: resumen
Se entrevistó a 5 personas con edades entre los 30 a 70 años, que haya visitado o tuviera conexión con la experiencia de vivir una erupción volcánica.
En las entrevistas, muchos usuarios querían alguna herramienta que les permite además de ver un inventario de ver información útil en relación con lo que se vive en el proceso, también querían de lo que sucedía post erupción.
Persona 1: Esteban
Planteamiento del problema:
Esteban es un estudiante universitario que necesita tener información rápida y fidedigna en su celular en caso de una erupción volcánica porque necesita estar preparado cuando haya una catástrofe que podría afectar hogar y familia.
Persona 2: Jenny
Planteamiento del problema:
Jenny es una madre soltera con una hija que perdió su hogar por una erupción volcánica que necesita información oficial, útil y accesible para este momento de reconstrucción porque no quiere ver morir el lugar y la comunidad donde vivió toda su vida.
Auditoría competitiva
Se revisaron 3 apps:
Las conclusiones principales fueron:
Ideación
Se elaboraron varios diseños se usó crazy 8 para una rápida obtención de ideas y en una segunda ronda se bajaron los elementos de diseño más útiles para resolver los puntos de dolor. Se pensó en usar un menú hamburguesa, pero era mucho más fluido con un tab-bar inferior. Además de crear un flujo teniendo en cuenta lo investigado.
Comenzar el diseño
Esquemas de página digitales
Esquemas de página digitales
En primera instancia se buscó una manera de presentar la app sin usar necesariamente un mapa para ahorrar datos de internet al usuario.
Tab-bar al fondo que representa las principales funciones de la app
Listado de volcanes y su estado
Descarga información para usuarios sin buena conexión a internet
Prototipo de baja fidelidad
El prototipo es capaz de seguir flujos de usuarios para buscar volcanes, información y descarga de datos.
El prototipo fue usado para las pruebas de usabilidad.
Estudio de usabilidad: parámetros
Tipo de estudio:
Estudio de usabilidad no moderado
Ubicación:
Chile (remota)
Participantes:
6 participantes
Longitud:
10 minutos
Estudio de usabilidad: hallazgos
Se realizó una ronda de prueba de usabilidad, que ayudo al diseño a avanzar de wireframe a mockup:
Destacar esa funcionalidad en el comienzo, quitando la imagen del estado vacío.
Mejorar visibilidad de “Buscar localización”
Hacer más obvios los pasos de selección y luego descarga
Presentar la información de emergencia de manera más eficiente
No dejar aparecer el botón de descarga hasta que se seleccione una opción
Reemplazar el bloque de texto por instrucciones más concisas y mejor indexación
1
2
3
Perfeccionamiento del diseño
Maquetas
Se destacó la funcionalidad de búsqueda en el comienzo, quitando la imagen del estado vacío, además de mejorar el copy.
Antes del estudio de usabilidad
Después del estudio de usabilidad
Maquetas
Los botones de acción: descargar y eliminar descargas permanecen desactivados hasta que se eligen opciones.
Para todo el paso de baja a alta fidelidad se usó el kit de IOS7 beta de Human interface guidelines de apple.
Antes del estudio de usabilidad
Después del estudio de usabilidad
Maquetas
Prototipo de alta fidelidad
El prototipo final de alta fidelidad cumple las tareas esperadas. Participantes que participaron en la primera prueba encontraron que la iteración de alta fidelidad era una buena experiencia.
Prototipo en Alta Volcán Vigía
Consideraciones de accesibilidad
Uso de iconos que son culturalmente asociados a sus funciones además de tener descripciones (ej. tab-bar)
Se utilizó el chequeado A11y para asegurar la una evaluación AAA de contraste contra fondo. (Fuentes normales menores a 19 px, 7:1 y para Fuentes grandes mayores a 19px, 4:5:1) y paso el test de ceguera de visión.
Se usó la Human Interface Guidelines de Apple que son estándar en la industria para elevar el nivel de la app y que ya traen herramientas de accesibilidad como buscar por voz en las barras de búsqueda.
1
2
3
Diseño adaptable
Mapa del sitio
Además de agregar las funciones de la App, la página está centrada en educar y entregar información antes, durante y después de una erupción volcánica, cubriendo los puntos de dolor de los usuarios.
Diseños adaptables
Para la versión mobile se siguió un layout de una columna, para web un layout que escalara las funciones de la versión web, dejando el espacio en blanco a la izquierda (usado en casos de publicidad, por ejemplo)
Futuro
Conclusiones
Impacto:
La aplicación ayuda a fomentar el conocimiento de los volcanes a sus alrededores y ser una fuente de información en caso de una erupción volcánica. Además, con su enfoque de seguir entregando información después de un evento, ayuda a comunidades a sentirse más apoyadas psicosocialmente.
“Hubiera sido genial haber tenido algo así, cuando fue lo de Chaitén, porque nadie sabía nada…”
Qué aprendí:
Estos trabajos son parte de la certificación de Google y me he dado cuenta de que soy capaz de crear un trabajo de calidad, considerando la cantidad que es hacer un app y una web responsiva “mobile first” desde cero. Los design systems son nuestros aliados.
Próximos pasos
Actualizar la estética de la app según los estándares de sistemas de diseño que vayan saliendo (como iOS 17 en el caso de la app) y buscar un design system para páginas web con enfoque “mobile first”
Revisar la factibilidad técnica de las características y funciones de la app con algún desarrollador y definir para que plataformas diseñar.
Trabajar con stakeholders como instituciones gubernamentales de monitoreo y estudio como Sernageomin o Senapred, para las siguientes iteraciones.
1
2
3
¡Pongámonos en contacto!
Escribe algunas oraciones que resuman los próximos pasos que darías en este proyecto y por qué. Siéntete libre de organizar los próximos pasos en una lista de viñetas.
Gracias por darte el tiempo de leer este caso estudio, si estás interesado en contactarme puedes hacerlo a través de: