ANTECEDENTES
Versión anterior de la aplicación
¿QUÉ ENCONTRAMOS?
• Necesidad de optimizar el proceso autónomo
• Múltiples puntos de dolor/críticos en la experiencia: quiebres y poca usabilidad
• Flujos universales, con muy poca personalización según cada país. El lenguaje, las funcionalidades, la estructura y disposición del contenido se utilizaban trasversalmente en todas las versiones de autos/motos sin distinción entre países
• Seguimiento de métricas clave casi nulo
• Flujos y tareas demasiado extensas, redundantes y sin instrucciones claras
1. Objetivo
Disponer una experiencia autónoma para los clientes potenciales del producto autos con Liberty Seguros Colombia, Chile y Ecuador. Esto, con el reemplazar la experiencia presencial en los centros autorizados y agilizar el proceso de inspección para sus vehículos.
2. INVESTIGACIÓN
Testeo no moderado para diagnosticar la experiencia con los usuarios previa al rediseño UX
Los datos, métricas e información capturada con esta etapa, nos proporcionaron los insumos necesarios para entender las necesidades puntuales de las personas usuarias
Diagnóstico heurístico
Junto al equipo de investigación UX, realizamos una evaluación heurística basada en los 10 principio de usabilidad de Nielsen. Luego, unificamos conceptos. Esto, nos permitió entender en qué nivel de usabilidad se encontraban las aplicaciones de Colombia, Chile y Ecuador, entregamos el informe con las recomendaciones de mejora para la experiencia del usuario. Esto, junto a la información recopilada con los testeos no moderados, nos permitió comenzar el trabajo de priorización de actividades.
Dentro de las recomendaciones principales y más urgentes estuvieron temas como:
• Segmentación del flujo para facilitar las actividades solicitadas al usuario
• Replanteamiento de la secuencia del contenido y el viaje del usuario a través del app
• Simplificación del lenguaje; wording, redacción y eliminación de terminología técnica
• Entregar indicaciones claras, precisas y acompañadas de material pedagógico gráfico
• Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores
• Implementar un sistema de iconografía unificado, simple y funcional
• Aplicar consistencia gráfica y estándares interactivos
Integración en el User History Map
Antes de comenzar con el proceso de priorización de actividades de mejora UX, se integraron las puntuaciones en un User History Map por cada país. De esta manera, sería mucho más objetivo el proceso en cada versión del app. Además, se podrían determinar mejor los puntos exactos donde realizar las mejoras de usabilidad.
Priorización y definición de actividades
En esta etapa, se coordinó en equipo con los dueños de producto, negocio, desarrolladores y el equipo de investigación cuáles serían los puntos de ataque, la priorización utilizando la metodología MoScoW y, luego, las actividades, responsables, nivel de urgencia, áreas involucradas, insumos necesarios, estaciones de actualización y fechas de entrega para cada tarea puntual. Esto, permitió tener un panorama claro del cumplimento de las metas dentro de las fechas límite definidas.
3. PROTOTIPADO
Crear un diseño adaptado a dispositivos móviles para mostrarle al usuario cada una de las etapas de su proceso de toma de fotos para la autoinspección digital. Aquí, fue crucial disponer información lógica, simple, instructiva y segmentada para mostrarle al usuario la mejor manera de enviar las fotografías de su vehículo sin errores. Esto, representa uno de los puntos cruciales para una mejor experiencia en el usuario y para el negocio, pues la carga operativa disminuirá debido a la reducción de devoluciones por equivocaciones en la toma de imágenes.
4. MEJORAS UX UI
Dentro de las acciones en diseño UX principales estuvieron:
• Corrección global del lenguaje a utilizar, implementación de UX writing
• Jerarquización del contenido. Se eliminaron funcionalidades innecesarias
• Eliminación de tecnicismos, ayudas gráficas junto a los textos instructivos
• Disposición lógica de las acciones que debe realizar el usuario
• Eliminación de acciones innecesarias para acortar el tiempo en la tarea principal
• Reestructuración y optimización de contenido en el sistema de soporte del app
• Inclusión de video 360 para reducir de 5 a 1 los requisitos solicitados al usuario
Tutorial de uso de la cámara para Android y iOS (dispositivos móviles)
• Inclusión de botón permanente en la navegación de la plataforma con opciones hacia FAQ y las instrucciones hacia los permisos de cámara
• Estados en las opciones de este botón que muestran claramente al usuario cuando ha seleccionado cada una (Por defecto/Seleccionado/Sin seleccionar)
• Agregar una sección independiente de Preguntas Frecuentes
• Pantallas modales adaptadas a cada uno de los SO donde se muestra el paso a paso a seguir (con ejemplos multimedia) para activar la cámara en el navegador y en el SO
Cámara propia de la plataforma adaptada al estilo gráfico de Liberty
• Se incluyen pantallas modales para el tutorial que explica las características y funcionalidades de la cámara para captura de video 360°
• Pop ups de visita guiada explicando cada una de las características de la cámara multimedia con las mismas funcionalidades de la cámara fotográfica
• Previsualización de video capturado y opción para repetir en caso de ser requerido
• Contador de tiempo para visualizar la duración del video durante su captura.
Se tienen en cuenta ambas disposiciones del dispositivo móvil (horizontal/vertical)
• Previsualización externa a la cámara de video, esto es, directamente en el paso a paso de la plataforma durante el registro de los requisitos de inspección.
• Modal de advertencia indicando al usuario lo que sucederá cuando elija borrar un video capturado. Se incluyen las opciones “Repetir video”, “Cancelar” y “X” para cerrar.
La inclusión del video 360 vino a reemplazar una sección con múltiples fotografías requeridas para el proceso. Ahora el usuario, en lugar de tomar 5 y hasta 6 imágenes por separado y seguir el mismo número de indicaciones, solo debe capturar un video rodeando el vehículo. Esto simplifica la experiencia de cara al usuario y filtra la presencia de fraudes para el negocio.
Indicaciones gráficas animadas para acompañar los textos y hacer más entendibles las tareas identificadas como muy complejas de entender
• Junto a esto, se optimizaron las imágenes estáticas y se unificaron en 1 solo recurso claro en lugar de un carrusel con múltiples imágenes.
• Esto redujo la cantidad de clics y disminuyó en un 30% el tiempo que el usuario solía tardar realizando la tarea completa.
5. CRECIMIENTO
Los aprendizajes clave de rediseñar esta aplicación web fueron:
• Investigación: Aprendimos la importancia de entender las necesidades y comportamientos del usuario. La investigación nos ayudó a identificar problemas y oportunidades en la aplicación existente.
• Evaluación heurística: Esta etapa resaltó la importancia de las mejores prácticas de diseño y cómo pueden influir en la usabilidad. Identificamos varios problemas de usabilidad que podrían haberse evitado siguiendo principios de diseño estándar.
• Testeo: El testeo con usuarios nos permitió validar nuestras suposiciones y decisiones de diseño. Aprendimos que lo que funciona en teoría puede no funcionar en la práctica.
• Diseño: Aprendimos que el diseño debe ser iterativo. Las soluciones de diseño que parecían efectivas inicialmente, a menudo requerían ajustes después de recibir comentarios de los usuarios.
• Prototipado: Esta etapa nos enseñó la importancia de visualizar nuestras ideas y probarlas rápidamente. Los prototipos fueron fundamentales para comunicar nuestras ideas, realizar un hand-off óptimo con el equipo de desarrollo y recibir retroalimentación temprana.
• Mejora en usabilidad: Finalmente, aprendimos que la usabilidad es un viaje, no un destino. A pesar de nuestras mejoras, siempre hay oportunidades para aumentar la eficiencia, la eficacia y la satisfacción del usuario.
En resumen, cada etapa del proceso nos proporcionó valiosos aprendizajes y entendimientos, reforzando la idea del diseño centrado en el usuario como perfecto conductor hacia productos más efectivos y agradables de usar.