Rediseño sitio clientes — MetLife Chile

Client: MetLife Chile S.A.
Website: metlife.cl
Date: 31/07/2018
Services: Website redesign, User Experience, Project Management

01. La Situación

A mediados del 2017, la aseguradora MetLife renovó su marca a nivel global y me contactaron para que junto a mi equipo los ayudáramos a implementar  y complementar las nuevas directrices de diseño de la marca al sitio de clientes de la aseguradora, en un tiempo muy reducido.

Me enfrenté entonces a un desafío múltiple: cómo mantener tiempos mínimos de entrega en la implementación de un nuevo front-end con un nuevo diseño, para una web que no había sido renovada en 12 años y que sería la principal cara de las operaciones transaccionales para todos los clientes de MetLife en Chile.

Ante un desafío de este tipo, lo primero fue priorizar, la entrega lo más temprana posible de un primer sprint del producto, para que el equipo de Informática de MetLife y la empresa integradora pudieran contar con material lo antes posible, y así poder probar con tiempo las necesidades de implementación.

¿Cuál fue mi rol en el proyecto?

Arquitectura de Información

Creación de un prototipo de wireframes completamente navegables en Axure, incluyendo todas las pantallas que se utilizaron en el proyecto, para el posterior diseño de interfaces y desarrollo.

Diseño de Interfaz

Adapté las nuevas directrices globales de diseño a los componentes creados en la etapa de arquitectura de información y armé un sistema de diseño que permitiera la reutilización de elementos

Dirección del proyecto

Lideré el equipo de diseño y coordiné la construcción del front-end responsivo.

02. ¿Cómo fue el proceso?

Lo primero fue comenzar con un Sprint 0, que buscaba entregar las principales definiciones del diseño y de la Ux para aprobación del cliente y, así, poder pasar cuanto antes a la construcción del front end. Así, comenzamos por determinar la tecnología que utilizaríamos: al no contar con todas las definiciones a priori, lo más probable era que tuviéramos que ir modificando sobre la marcha los comportamientos de algunos elementos, como menús, botones, gráficos, etc. Por eso, la solución fue acudir a un framework de diseño que soportara, además, plantillas atomizadas de html. Nuestro Framework de diseño fue Foundation  cuyo propósito es crear código re-utilizable, bien escrito, escalable y adaptable para cualquier proyecto.

Por el lado de la interfaz, utilicé los componentes de diseño de Foundation para adaptarlos a las directrices globales de la nueva marca de MetLife y, luego, complementar esa documentación con los elementos que se fueran creando específicamente para el proyecto.

Para el diseño en esta etapa, utilicé SketchApp , con su nueva funcionalidad de símbolos. En tres días de trabajo intenso ya tenía armados todos los componentes responsivos  que necesitaríamos construir para el entregable final.

Alguna de las mejoras de este rediseño

Diseño Responsivo
La navegación móvil en el sitio anterior era frustrante ya que el sitio no era responsivo por lo que eso era un must en este rebranding.
Uno de los mayores desafíos fue la organización de la información en los dispositivos móviles, especialmente en las tablas de datos donde la cantidad de columnas hacían inviable mostrar toda la información de una fila con 10 o 12 columnas en una sola pantalla.

Diseño consistente y usable
El diseño del sitio anterior se había quedado muy desactualizado y no inspiraba confianza para realizar trámites relacionados con cosas tan sensibles como las pólizas de vida o pagar en línea.
La mayoría de las veces, cuando un usuario entra al sitio de su aseguradora, es para buscar información sobre sus pólizas. particularmente el número de la póliza y los últimos movimientos que ha realizado.

Co-crear es más fácil si puedes dudar

Trabajar de esta forma enriqueció consistentemente mi relación con el cliente, puso fin a las cadenas eternas de e-mail y mejoró nuestras reuniones de trabajo y feedback, sobre todo porque podíamos modificar y potenciar las propuestas in situ, dejando que la creatividad ocupara su parte, pero aún así tomar decisiones basadas en un prototipo y, sobre todo, ¡tomar decisiones!

Para el feedback de html y de diseño utilizamos invisionApp como canal central de comunicación entre cliente, equipo global y mi equipo. Esta herramienta nos permitía comunicar de manera precisa el lugar de los cambios y la programación.

Debido a que se trata de un proyecto que involucra la marca a nivel global, el equipo de diseño de Ux de Nueva York era un actor relevante en las definiciones y aprobaciones respectivas. Para eso, fue clave el agendamiento de reuniones semanales de avances que se llevaban a cabo mediante la plataforma WebEx (Como un skype corporativo) que permite compartir pantalla y conectarse desde cualquier dispositivo a una reunión con todo el mundo. Ideal para este proyecto, en donde el diseño se hizo en Chile, pero el front end en Colombia y el feedback se gestionó desde Barcelona tomando en cuenta los horarios de América y Europa.