Rediseño de los Correos de Claro Perú Generando consistencia a través del Diseño UX/UI y de Servicios

Thayane Micheviz
Thay Collection
Published in
6 min readFeb 26, 2021

--

Cliente: Claro
Expertise: Diseño de servicios, Diseño de experiencia, Diseño de interacción, Diseño de Interfaces, UX writing
Equipo: Fatima Parreño (Cliente), Thayane Micheviz (líder UX) y Orlando Rodriguez (UI)
Duración: 5 meses

El reto

El equipo interno identificó que los correos enviados por las áreas usuarias siguen diferentes flujos, referencias y guías.

Eso implica en inconsistencia visual y de contenido en las constancias y campañas que recibe el usuario.

Se ha identificado también el envío de correos con un mismo contenido múltiples veces, causando impactos negativo a la marca y consecuentemente una menor eficiencia en la comunicación entre Claro y sus clientes.

Objetivos estratégicos del proyecto

Rediseñar los correos generando una mayor adherencia entre los correos que recibe el usuario y proveer a la empresa de los elementos reutilizables que permitan generar correos con una mayor agilidad.

¿Qué hicimos?

El proceso para el rediseño de los correos ha pasado por diferentes pasos en alrededor de 5 meses de trabajo.

Paso 1. Hicimos benchmark sobre la experiencia anterior de amable al rediseñar los correos de Interbank. Las buenas prácticas y recomendaciones para el proyecto nos hicieron ser más asertivos y ágiles.

Recomendaciones:

- Entender el modelo operativo de los diferentes equipos.

- Mapear los correos en excel para rápido ordenamiento y identificación de patrones.

- Atomic design: hacer plantillas sencillas con bloques “lego”.

- Generar autonomía en la ejecución de los correos.

- Hacer con que los correos “respiren” la marca.

Paso 2. Facilitamos la conexión con la área de Design OPs de Claro Brasil para benchmark en relación al diseño del Design System. Con base en la experiencia de Brasil hemos optado por la divulgación en línea de las guías, también por el uso de slack para la comunicación del equipo.

Mondrian, el Design System de Claro Brasil

Paso 3. Hicimos talleres con las diferentes áreas usuarias internas de Claro (alrededor de 10 áreas) para conocer sus flujos, sus necesidades, dolores y especificidades en relación a los correos.

Paso 4. Ordenamos el flujo de creación de los correos, especificando las responsabilidades de las áreas involucradas, las diferencias entre los procesos usados por cada una y también ideando un flujo ideal para garantizar la continuación en la consistencia de los correos.

Flujo recomendado para correos.

Generamos una recomendación de flujo ideal para que marketing, la área propietaria de la marca Claro, sea siempre el checkpoint intermedio entre las solicitudes y las entregas finales.

Paso 5. Mapeamos los correos actuales generados por las diferentes áreas y los ordenamos de acuerdo con sus canales, necesidades y objetivos.

Paso 6. Al optar por dividir los correos por objetivos, encontramos 2 grandes categorías:

A. Prioritariamente comunicación (amarillos): tienen como objetivo la comunicación entre Claro y usuario. Acá entran las constancias en general.

B. Prioritariamente marketing (rojos): tienen como objetivo informar, estimular la conversión y el impacto de marca. Acá están representadas las campañas en general.

Tabla con el ordenamiento de los correos.

Paso 7. Profundizamos nuestro conocimiento sobre el Design System de Claro con el equipo responsable. Lo analizamos al detalle y lo adaptamos a la nueva aplicación.

Generamos diferentes arquitecturas para los diferentes tipos de correos con la preocupación de mantener la consistencia al mismo tiempo que la flexibilidad para las diferentes áreas usuarias.

Algunos outputs importantes:

- Para generar consistencia, definimos que todos los correos Claro deben iniciar y terminar de una misma forma. Las cabeceras y footers deben siempre seguir las referencias de la guía.

- Para generar cercanía y reconocimiento por parte del usuario el saludo es constante en los correos.

- Las informaciones más importantes, el título y el subtítulo, deben estar destacados: en un primer escaneo el usuario ya sabe si le interesaría avanzar en la lectura del correo.

- Los correos prioritariamente marketing han que tener libertad para aplicación de los manuales de marca y submarcas y también para lineamiento con los demás medios de comunicación.

Arquitectura de los correos y elementos homologados.
Ejemplos de correos rediseñados en las 4 arquitecturas.

Paso 8. Mientras revisamos el UX writing para correos tomamos la oportunidad de generar 3 guías para ampliación del Design System: Glosario, Guía general de comunicación y Guía específica para correos.

Paso 9. Generamos la guía visual para correos ampliando el Design System con lineamientos específicos y nuevos componentes para correos.

Lineamientos al Design System hecho por IBM.
Paseo por los átomos y moléculas específicos para correos.
Ejemplo de ampliación del Design System para correos.

Paso 10. Revisamos los flujos de los 2 canales principales, Mi Claro app y web, identificando fallas y creamos nuevos correos para un mejor feedback a los usuarios. *Próximo paso sería replicar a los demás canales digitales.

Paso 11. Mapeamos todos los correos y plantillas en una gran librería por objetivo y tipo de arquitectura. La librería es fuente de consulta y base para el diseño de los nuevos correos.

Librerías con plantilla maestra a la izquierda y correos rediseñados con base en las plantillas a la derecha.

Paso 12. Disponibilizamos todas las guías en una página web para que las diferentes áreas tengan acceso al mismo contenido siempre actualizado. Usamos el google sites por la facilidad de actualización por el propio equipo responsable por el proyecto.

Página web para divulgación de las guías del Design System, Correos y UX writing.

¿Qué logramos?

El proyecto de correo fue inicialmente pensado como una entrega de UX + UI con aplicación del Design System Claro.

Mientras avanzamos en el proyecto hemos identificado la necesidad de convertirlo en un proyecto de rediseño de un servicio interno de Claro y en una expansión del Design System.

La ampliación con los aportes de nuevas moléculas y UX writing beneficia a Claro no solamente en la homologación de los correos mas también en la homologación de los demás canales digitales.

Con el uso de las plantillas, componentes y el guía en figma, el correo puede ser fácilmente creado a través de la herramienta de auto layout, que permite agilidad y autorregulación de los espaciados de acuerdo con las directrices previamente determinadas.

Con auto layout el correo se adapta fácilmente al quitar o añadir nuevos elementos.
El proyecto soporta el ordenamiento de los contenidos.

El mismo archivo circula por las diferentes áreas, desde el boceto hasta al HTML, generando menos iteraciones y aprobaciones más rápidas.

Las diferentes agencias con las cuales Claro trabaja también cuentan con una misma fuente de información, logrando por fin la consistencia en las entregas.

El sistema modular ayuda a las áreas de diseño y desarrollo a fácilmente generar correos consistentes.

Próximos pasos

  • Testeos internos: investigar efectividad del nuevo flujo y facilidad de uso de las plantillas (investigación cualitativa con las áreas usuárias) — especialmente en el diseño de los bocetos y del correo final por parte de la agencia. Iteraciones con base en los inputs.
  • Medición de tajas de apertura, comparación de la efectividad de los correos nuevos x el anteriores.

¡Gracias!

¿Qué opinas sobre el proyecto?
Por favor, compartas tu feedback en la sección comentario abajo.
¡Nos encantaría discutir sus ideas y pensamientos!

--

--

Thayane Micheviz
Thay Collection

Brazilian and Italian EXPERIENCE DESIGNER AND STRATEGIST.