Savia es la nueva plataforma de servicios de salud de MAPFRE que pretende revolucionar el mundo de la salud desde la perspectiva digital. Desde Rocket Studio, llevamos unos años colaborando con ellos para mejorar la experiencia de los usuarios con su producto y en este post vamos a explicar una pequeña parte de un proyecto en el que hemos trabajado.
Problema inicial: ¿Cómo explicar un producto complejo y novedoso?
Savia quería rediseñar algunas partes de su web pública. Había varios retos sobre la mesa pero el que más preocupaba era cómo contábamos qué era Savia en su Homepage, teniendo en cuenta que se trataba de un producto muy completo (con múltiples servicios incluidos de diferentes naturalezas - online y presencial), novedoso (se aleja del seguro de salud tradicional) y con distintas formas de relacionarnos con él (pago por uso y suscripción).
En resumen, el reto era el siguiente ¿Cómo contamos qué es Savia de forma atractiva, en la que el usuario sea capaz de entender y percibir rápidamente el valor del producto y, por supuesto, orientada a conversión?
Un pequeño paréntesis antes de explicar cómo lo hicimos. Después de varios meses en producción, lo primeros datos señalan una mejora en los siguientes ratios:
+ 45,54% aumentó la conversión de descarga del APP
+ 47,31% aumentó el scroll en página
El proceso: Descubre cómo lo hicimos
Paso 1. Stakeholders workshops: ¡Cuéntamelo todo!
Lo primero que hicimos fue llevar a cabo varias sesiones con los stakeholders con los siguientes objetivos en mente:
Analizar métricas y estudios previos con usuarios para entender qué cosas estaban o no funcionando actualmente
Alinearnos en la visión común de qué es Savia y cuáles son los puntos fuertes del producto
Establecer criterios y métricas de éxito asociadas al rediseño
Paso 2. Wireframing: Fijemos bien el storytelling
Una vez alineados en la visión del producto y los objetivos del rediseño, llegaba la hora de comenzar con la fase de wireframing, en la que el objetivo principal era fijar muy bien la estructura y storytelling del producto. Para ello, seguimos los siguientes pasos:
2.1 Establecer las bases y racional del diseño
Antes de empezar a “dibujar” tocaba sentarse a “pensar” en qué queríamos contar, cómo hacerlo y en qué ideas queríamos apoyarnos. Aquí van algunas de ellas:
De la visión general a la visión específica. Por un lado queríamos transmitir la completitud de de Savia, que cuenta con muchos servicios para cuidar la salud, pero por otro queríamos evitar saturar al usuario con multitud de información de todos ellos a la vez.
Ir más allá de las funcionalidades. Uno de los objetivos era pasar de contar solo funcionalidades (un chat, una videconsulta, etc.) y asociarlas también a necesidades que pudieran resolver.
Fomentar la interacción. Queríamos una web que fomentara la interacción con el producto y el descubrimiento del mismo.
Fortaleza en el contexto móvil. Dado que la mayoría del tráfico viene de móvil y la experiencia de Savia es aún mejor en su APP, el diseño debía asociar de forma natural Savia a este contexto pero teniendo en cuenta que es multidispositivo.
Conversión por encima de todo. El diseño debía contener puntos de acceso a conversión en distintos momentos claves del storytelling.
2.2 Desarrollo de los Wireframes
Con la base anterior, se definieron los primeros Wireframes.
2.3 Design review con Savia
Tanto los wireframes como el racional asociado a los mismos se validó y afinó en una sesión de Design Review con Savia.
Paso 3. Diseño y testing: El momento de la verdad
Una vez teníamos el esqueleto, llegaba el momento de iterar el diseño añadiendo la capa visual al mismo. Para ello, seguimos el siguiente proceso:
3.1 Divergencia visual: Abramos el proceso creativo
Desde Rocket sabemos que la mejor solución nunca siempre llega a la primera. Por ello, no nos gusta iterar solo sobre una única versión que nos condicione o cierre demasiado pronto el proceso creativo. Siempre tratamos en fases tempranas de generar dos conceptos de diseño e iterarlos con el cliente hasta que todos estemos 100% satisfechos. En este caso, generamos 2 líneas visuales que se apoyaban en conceptos distintos: una jugando con los colores corporativos y formas que generaban continuidad, y una segunda más basada en imágenes de contexto y ambiente que dieran más calor al diseño.
3.2. Design review con Savia: Selección de la línea visual
Llevamos a cabo una sesión de Design review con Savia en la que presentamos las versiones, convergimos hacia una de ellas (colores corporativos y formas de continuidad) y la terminamos de afinar en base al feedback de la sesión.
3.3. Testing con usuarios: momento de aprender
Llego el momento clave. Teníamos poco tiempo pero no queríamos dejar de evaluar con los que realmente van a determinar el éxito del rediseño: nuestros usuarios. Así que llevamos a cabo un test remoto Think out loud con 8 usuarios con los que tratábamos de responder a la pregunta de si el rediseño permitía a los usuarios entender fácilmente qué es Savia y percibir su valor.
El feedback fue positivo aunque se identificaron diversos puntos de mejora. Los más importantes fueron los siguientes:
Los usuarios tendían instintivamente a asociar Savia a un seguro médico.
Se generaban dudas sobre cómo funciona Savia a nivel de costes y eso les frenaba para empezar a utilizarlo
Tenían dificultades para asociar la parte de consultas presenciales a la propuesta de Savia.
3.4. Iteración final
Y con todo lo aprendido en la fase anterior, iteramos una vez más hasta llegar a la versión actual
3.5. Preparación de assets para desarrollo
Una vez el diseño testado y evaluado se prepararon los distintos assets (imágenes, iconografía, fuentes, componentes, etc.) para que el equipo de desarrollo pudiera completar su trabajo.
3.6. Medir
Medimos para evaluar el impacto del cambio y para seguir iterando hacia una mejora continua del producto digital. Porque lo que no se mide no se puede mejorar y lo que no se mejora se acaba quedando atrás mientras nuestros usuarios y competencia evoluciona. En este caso utilizamos tanto analítica cuantitativa como cualitativa y podemos decir que los primeros datos están resultando positivos:
+ 45,54% aumentó la conversión de descarga del APP
+ 47,31% aumentó el scroll en página
Esperamos que hayas disfrutado con esta lectura. ¡Muchas gracias!