Mejorando la consistencia y jerarquías de elementos en una pantalla informativa.

Cambio en el modelo de negocio de los seguros.

Como muchos de vosotros en el camino de la búsqueda de empleo he tenido la oportunidad de poder hacer un challenge, para un puesto de Visual Product Designer, enfocado a mejor la experiencia de usuario dentro del campo Insurtech.

Insurtech se refiere al fenómeno de startups que están innovando utilizando la tecnología para mejorar, fundamentalmente, el modelo de negocio de seguros actual.

Os cuento como era la prueba…

BRIEFING

El target definido es un perito que valora daños materiales en vehículos frente a diferentes tipologías de siniestros.

Los asegurados toman imágenes del siniestro mediante un sistema de videollamada y son tratadas mediante tres tipos de funcionalidades: inteligencia artificial, blockchain y realidad aumentada.

El asegurado remite la información y es gestionada por el perito con el fin de evaluar el siniestro y trasladarlo a la compañía de seguros.

El objetivo de esta prueba:

Una iteración completa de la pantalla a la que tiene acceso el perito.

Esta pantalla informativa es la que ve el perito para la verificación de los datos/daños del asegurado y el tipo de siniestro que hay en curso.

Mis objetivos:

Creación de informes de recomendación.

Prototipado.

Presentación de conclusiones finales.

Vamos a ello…

CREACIÓN DE INFORMES DE RECOMENDACIÓN

Con el fin de obtener esta documentación tenía que evaluar la pantalla, detectar los fallos y así poder argumentar la mejora de estos.

Para ello establecí una jerarquía visual por colores para la identificación de los errores encontrados:

• Rojo (gravedad alta)
• Naranja (gravedad media)
• Verde (gravedad baja)

La prueba iba a ser una presentación con un timing limitado por lo que primero necesitaba diseccionar detalladamente la pantalla (Imagen 1) para poder tener claras todas las áreas de mejora y seguidamente crear un entregable de cara al Product Owner (Imagen 2) con el objetivo de acompañar mi argumento con un recurso visual que fuera fácil de asimilar por este.

El principal punto de mejora era la alta carga cognitiva que presentaba la pantalla informativa: información que no era relevante en todo momento tener disponible, repetición de imágenes, fatal de espacio negativo y trabajar la arquitectura de la información entre otras.

Para completar el análisis heurístico y de cara al equipo para ver cómo afecta este incumplimiento de principios básicos de usabilidad de la página, utilicé el Radar Chart que muestra con claridad el punto principal de mejora.

Con este recurso visual mostraba la gravedad de las heurísticas y su comparativa en cuanto a tiempo de mejora.

Aquí puedes ver el Airtable

PROTOTIPADO

Como paso previo al prototipado en alta fidelidad necesitaba visualizar todas las mejoras en un wireframen.

Las pantallas desarrolladas presentan los siguientes elementos en común:

• Menú: presenta las opciones de gestionar la revisión del siniestro, reapertura o cierre. Se puede acceder al historial de siniestros para un determinado vehículo y los errores que pueden aparecer para solicitar su corrección.
• Análisis de daños: esta sección nos da información visual global de los daños en el vehículo siniestrado. Se facilita la ubicación de estos mediante un scroll horizontal donde se muestra la fotografía original.
• Tabs: tratamos la infomación de tal manera que el perito pueda consumirla según la necesidad del momento (grupos y subgrupos).

El elemento de Auto-ajuste permite saber del siniestro y del asegurado, esta información no es precisa tener en todo momento en la interfaz una vez que ha sido verificada por el perito.

Por eso el perito podrá mantenerlo en pantalla o no, incluso hacer que queden los datos más relevantes a la vista haciendo el Auto-ajuste más pequeño evitando así carga cognitiva.

En el grupo de Estimación de daños, en las pestañas, era necesario crear filtros que clasificaran la información.

Esta clasificación relacional dota al perito de libertad para agrupar la información dependiendo si es un siniestro indemnizable al asegurado o reparable para el taller (sustitución o reparación de las piezas afectadas).

Como valor añadido diseñé el modo nocturno para que en determinados momentos se pueda reducir parte de los síntomas que contribuyen a la sensación de ojos cansadoso o poder trabajar con la interfaz en lugares oscuros.

En el siguiente vídeo se puede ver todas las funcionalidades desarrolladas con anterioridad.

CONCLUSIONES

Si queremos crear homogeneidad y por tanto que nuestro producto tenga consistencia hay que establecer unas bases iniciales que nos faciliten crear una coherencia visual.

Esas bases radican en la creación de elementos bajo un sistema de trabajo específico como puede ser atomic design, permitiéndonos unificar criterios a la hora de incorporarlos en la interfaz.

Una de las características esenciales de cualquier diseño eficaz es que tenga una clara jerarquía visual.

Con esto conseguimos que haya una diferencia entre elementos, y esta diferencia tenga un orden visual: que parezca más organizado, fácil de entender, estéticamente atractivo y, también, mejora la organización de la información.

Por tanto, si conseguimos un producto que sea equilibrado y coherente visualmente tendremos más posibilidades para que sea entendible y fácil de consumir por parte del usuario.

Gracias por leerme.