VUELVE A
UX | Marketing | Casos | 5 MINS DE LECTURA

UX Marketing: ¿Cómo funciona el Círculo Concéntrico de Conversión? – Ejemplo Banco BCP

Juan-Francisco (Paco) Reyes publicado el

En nuestro enfoque de UX, llamado UX Marketing, el Modelo CCC (Figura 1) es el paradigma de diseño más importante, y una herramienta crucial para tomar decisiones estratégicas de diseño y luego validarlas a través de experimentos que lleven a incrementar la conversión. La principal ventaja del Modelo CCC es guiar a los diseñadores para tomar decisiones informadas, orientadas a objetivos claros, y alejadas lo más posible de la deducción.

Figura 1. Segundo nivel del Modelo CCC.

Este ejemplo práctico de cómo aplicar de Modelo CCC de UX Marketing se realizará utilizando la siguiente landing page click-through del banco BCP para aperturas online de cuentas de ahorro (Figura 2).

Figura 2. Landing page original de BCP, versiones móvil y desktop.

Imaginemos que el objetivo principal de esta landing page es aumentar la tasa de apertura online de cuentas de ahorro y en la investigación se encontró lo siguiente:

  • Hay 3 distintos tipos de cuenta de ahorro que buscan satisfacer las necesidades de 3 perfiles de clientes.
  • Los clientes suelen desconfiar de los bancos debido a costos escondidos en el mantenimiento de la cuenta y por cada operación realizada.
  • Estos clientes abrirán su cuenta potencialmente desde un dispositivo móvil.

Objetivo y estrategia

Las decisiones estratégicas de diseño se toman en función a objetivos claros, los que a su vez ayudan a definir una estrategia. Siguiendo el ejemplo de BCP, podríamos definirlos así:

Objetivo

Incrementar la cantidad de solicitudes de apertura de cuentas de ahorro online.

Estrategia

De acuerdo a los 3 factores del CCC, podemos definir esta estrategia:

  • Relevancia: que el usuario/consumidor comprenda rápidamente cuál es la cuenta que más le conviene y que puede abrir la cuenta rápido.
  • Influencia: que el usuario/consumidor confíe en que las alternativas que le ofrece el banco son recomendaciones proactivas, desde la perspectiva del cliente, y no desde la perspectiva del banco.
  • Usabilidad: que el usuario/consumidor pueda solicitar su apertura de cuenta de ahorros online sin dificultad, especialmente en dispositivos móviles.

Decisiones estratégicas de diseño (DED)

A partir de estas definiciones, se pueden tomar las decisiones estratégicas de diseño necesarias para mejorar la conversión de esta página. Las herramientas/componentes mencionados a continuación son parte de los 3 niveles del Modelo CCC:

Diseñando para relevancia

  • Simplificar el above the fold para que sea más claro y breve, que llame a la acción y se enfoque en la capacidad de abrir cuentas de ahorro online, en móvil, y en los beneficios que eso trae. Eliminando texto redundante o irrelevante en relación a la propuesta de valor.
  • Destacar el beneficio del producto de ahorro de tiempo/móvil, asegurando que esté above the fold, que se vea en los primeros 5 segundos y que se use la palabra que vende "rápido".
  • Reordenar horizontalmente los productos (orden de las columnas) para que el cliente siga una secuencia lógica de productos con mayor o mejor característica. Y también ordenar verticalmente las características de cada producto, de acuerdo a la perspectiva del cliente, poniendo primero lo más relevante y luego lo menos relevante.

Diseñando para influencia.

  • Colocar etiqueta “más solicitada” en el producto (cuenta de ahorro) más vendido para ayudar al cliente a tomar una decisión en base a lo elegido por otros clientes, y no lo que sugiere el banco. Esto generará mayor confianza.
  • Recomponer la jerarquía tipográfica en las características de los productos para que le den prioridad a la información misma, y no al título de la información. Esto reducirá el efecto “letras pequeñas que esconden cosas” y generará mayor confianza.
  • Colocar el link de “tarifas, condiciones y restricciones” en footer hacia una página específica, y no al home, lo que le quitará al cliente la tarea de navegar en el sitio web hasta encontrar la información correcta. Este tipo de proactividad incrementará la confianza en el banco.

Diseñando para usabilidad

  • Diseñar con enfoque “mobile first”, usando responsive web design (RWD) para que cada columna/producto se coloque verticalmente uno debajo de otro en el layout móvil, en orden de importancia. Esto permitirá que el cliente pueda abrir más fácilmente su cuenta de ahorros en dispositivos móviles.
  • Rediseñar la grilla de la página con un layout de 3 columnas para versión desktop, con un producto asignado a cada una de ellas, lo que ayudará a una mejor comprensión y facilidad de comparación (decisión), de acuerdo a un flujo de lectura horizontal en desktop, y un flujo vertical en móvil.
  • Colocar toda la información de cada producto dentro de cada columna, para dirigir la atención dentro del flujo de lectura vertical, tanto en desktop como en móvil.

Para plasmar estas decisiones de diseño se desarrollaron los mockups de la Figura 3.

Figura 3. Mockup propuesto de la página del banco BCP, versiones móvil y desktop

Como se ve, a partir de estas decisiones de diseño se pueden desarrollar fácilmente hipótesis que se pueden validar a través de experimentos que nos permitan hacer mejoras progresivas en la conversión.

Recibe consejos de UX Marketing en tu eMail

Recibe anuncios de cursos, noticias, eventos y novedades