Caso de estudio UX: Gigared Hogares

Gigared es uno de los principales proveedores de internet, televisión y telefonía de Argentina y decidió que era tiempo de renovar su sitio web para clientes residenciales.

Fernando Pessagno
6 min readSep 27, 2018

🎯 Objetivos

  • Aumentar la captación de nuevos clientes
  • Mejorar el nivel de satisfacción de los clientes existentes

⚠️ Desafíos

El sitio web de Gigared contenía una gran densidad de información que era presentada a todos los usuarios -tanto futuros clientes como clientes existentes- sin una clara distinción. Esa superposición del mensaje estorbaba en el proceso de venta y en la experiencia del cliente a la hora de buscar el contenido deseado.

¿Y si existiera una forma de responder separadamente a las particularidades de dos tipos de usuario muy distintos?

💡 Soluciones

Navegación

Siendo el objetivo primordial la adquisición de nuevos clientes, la navegación se compone de un menú principal con los enlaces a las secciones de los productos, junto a un CTA como elemento dominante que dirige a la página de contratación.

En segunda jerarquía, pero en un punto focal importante, se ubica el submenú para clientes que despliega todos los enlaces al contenido específico para este tipo de usuario.

A partir de esta clara distinción en la navegación, se eliminó la superposición del mensaje que existía en las secciones de los productos.

En móviles, para disminuir los efectos negativos que un menú hamburguesa tiene sobre la detección de los enlaces, el CTA fue ubicado en la barra de navegación principal donde el usuario puede encontrarlo sin esfuerzo en cualquier momento.

Página de inicio

Aquí es donde convergen tanto clientes existentes como potenciales clientes. Se ideó incluir un bloque de novedades con imágenes para comunicar lo últimos beneficios para clientes Gigared (y a la vez mostrar las ventajas de serlo a quienes aún no lo son) y estimular la contratación de productos adicionales premium (que aplican para ambos tipos de usuario) al anclarlos a eventos de interés de la actualidad solo accesibles por ese medio, como el estreno de una nueva temporada de una serie popular o el próximo gran acontecimiento deportivo.

Para que las novedades sean comunicadas efectivamente, cuando el navegador posee un tamaño horizontal mayor a 1050px, en lugar de utilizar un slider o carrusel con acceso secuencial que reduce las probabilidades que sean advertidas, se toma ventaja del área visible mostrando todas al mismo tiempo.

Las novedades contarían con imágenes de estilos muy variados y, por esa razón, se añadió un degradado semitransparente por sobre ellas que suaviza su carga cromática, permite que coexistan armoniosamente unificándolas con la estética de Gigared y se encarga de destacar la selección activa al ocultarse de forma parcial.

El recurso fue más tarde replicado en otras áreas del sitio, lo cual ayudó a desplegar un estilo consistente en todas las secciones.

Luego de las novedades se incluyen los packs de productos junto a sus características principales, a través las cuales el usuario puede tomar una decisión informada sobre la contratación de alguno de ellos.

Internet, televisión y telefonía se han convertido en commodities cuyo valor se transfiere casi por si solo. Proveer un enlace directo a la página de contratación validó la intuición inicial que se tuvo al respecto: el flujo de comportamiento de nuevos clientes revela que menos del 35% visita las secciones de productos antes de contratar un pack.

Secciones de producto

Para quienes si necesitan saber más antes de contratar un pack, el contenido de las secciones de los productos fue redefinido completamente en base a dos niveles de jerarquía para reducir la carga cognitiva del usuario y promover la rápida interpretación de la información más relevante.

Todos los elementos de primera jerarquía se muestran por defecto: al inicio los productos principales con sus características y preponderantes call to action, seguidos de una introducción a los productos adicionales y luego la información adicional relacionada que refuerza la venta.

El segundo lugar de jerarquía lo ocupan los detalles de los productos adicionales y aquella información no esencial para la toma de decisión de compra de los productos principales. Este tipo de contenido se muestra solo a partir de la solicitud del usuario.

En el caso de la sección de televisión, por ejemplo, los detalles de los productos adicionales se muestran en la misma página pero cubriendo el resto del contenido.

Por medio de este enfoque, el nuevo CTA específico del producto adicional seleccionado no compite con aquellos de los productos principales. En todo momento se sugiere solo un tipo de instrucción a la vez, lo cual reduce el riesgo de confusión y simplifica el proceso de toma de decisiones del usuario.

Sección Packs

En desktop, las opciones de packs prearmados y el armador personalizado de packs se disponen en 4 columnas con las características principales a la misma altura (independientemente de la variación en cantidad) para facilitar su comparación. En mobile, la disposición en columnas cambia pero la organización vertical de los packs se mantiene para que a usuarios recurrentes que ingresen desde distintos dispositivos la experiencia les resulte familiar y por ende más intuitiva.

Ya que muchos usuarios abandonaban el sitio al notar que las propuestas prearmadas de packs no se ajustaban a sus requerimientos, se construyó un configurador de packs. Con la nueva opción que permite al futuro cliente seleccionar las características que desee, los planes personalizados se convirtieron en la opción más popular representando casi el 60% de las contrataciones.

Seguido de los packs se incluyen las FAQs que mitigan al instante cualquier tipo de duda o preocupación que pudiera interferir con la intención de compra del usuario, en vez de requerir que este se contacte vía email y la espera de la respuesta abra la puerta a un eventual cambio de parecer.

Formulario de contratación

El formulario de contratación requiere que el usuario complete obligatoriamente hasta 12 campos en total.

Para reducir la percepción de complejidad, se dividió el proceso en tres pasos fácilmente digeribles y una barra de progreso es utilizada para recordar al usuario el tiempo invertido en los sencillos pasos 1 y 2, la cual minimiza la tasa de abandono a la hora de completar los campos más engorrosos en el paso 3.

También se utilizaron etiquetas flotantes que aparecen solo una vez que los campos comienzan a ser completados y hacen que cada paso del formulario luzca más pequeño y, por ende, menos intimidante.

Además, algunos campos contienen por defecto las opciones más utilizadas para ahorrar tiempo, mientras que otros indican el formato indicado justo antes que el usuario comience a rellenar los datos para prevenir errores de validación.

Velocidad y optimización

Las velocidades de conexión de las redes 3G y 4G de Argentina son de las más lentas de Sudamérica y del mundo, respectivamente. Teniendo en consideración que el +60% de las visitas provenían desde dispositivos móviles, no contar con un sitio web liviano y optimizado se traduciría en lo opuesto a los objetivos planteados: potenciales nuevos clientes abandonando el sitio y clientes actuales frustrados.

Resultados del test de velocidad y optimización web realizado en PageSpeed Insights de Google

Al trabajar en la optimización del nuevo sitio web, su velocidad de carga no representa un obstáculo y crea las condiciones ideales para atraer nuevos clientes y ofrecer soporte a los actuales.

👏 Resultados

El sitio web optimizó el proceso de adquisición de nuevos clientes y gracias a la renovada navegación, la cual facilita a clientes existentes descubrir el contenido destinado a ellos, el uso de herramientas como el buscador de programación creció hasta un +9000%.

Adicionalmente, Gigared recibe un reporte mensual del rendimiento de todos los CTA para evaluar el impacto que tiene de cada producto y pack sobre las contrataciones, lo cual posibilita identificar tendencias y mejorar la estrategia general del negocio.

🔗gigared.momentomultimedia.com

🔎¿Estás buscando un diseñador UX/UI?

Hablemos vía LinkedIn o a través de mi sitio web.

--

--