Rediseño web | 2024
Rol
UI Designer — Designer, Visual Designer, User flow, Prototipo responsive
Equipo
UI/UX Design Team
Deadline & Status
2 semanas, Lanzado en Julio 2024
Descripción General / Overview
La landing page de Claro Negocios necesitaba una actualización estratégica para comunicar con mayor claridad su propuesta de valor a un público empresarial y optimizar la experiencia dentro de un entorno B2B.
El rediseño se enfocó en mejorar la arquitectura de información, simplificar la navegación y destacar los beneficios clave de cada plan, manteniendo coherencia con el manual de marca. Se priorizó una estructura más clara y orientada a facilitar la evaluación de servicios por parte de empresas.
El resultado fue una interfaz más sólida, moderna y funcional, que fortaleció la presencia digital de Claro Negocios y mejoró la claridad en la comunicación de su oferta empresarial.
DESTACADOS
CONTEXTO
Un rediseño alineado al ecosistema de Claro Empresas.
Actualizar la experiencia era clave para reforzar marca y conversión.
El proyecto requería un rediseño completo de la interfaz, alineado al look & feel del brandbook de Claro Empresas.
Más allá de una actualización visual, el objetivo era ordenar la información y mejorar la presentación de los planes Full Claro, facilitando la comprensión de beneficios y reforzando la conversión (Figura 1.0).
El proyecto se desarrolló bajo un plazo ajustado, lo que exigía una ejecución clara y eficiente para cumplir con el deadline.
El rediseño debía alinearse al brandbook de Claro Empresas, respetando lineamientos visuales y consistencia dentro de su ecosistema digital.
El foco estuvo en optimizar la presentación de los planes Full Claro, priorizando claridad visual y conversión.
1.0 Landing Page anterior
IMAGEN
PROBLEMA
Una oferta empresarial potente, sin una jerarquía clara de valor.
La experiencia no guiaba de forma clara hacia la propuesta de planes y beneficios.
La estructura anterior diluía el valor de los planes Full Claro, dificultando la comprensión de la oferta y su impacto en la conversión.
La información clave convivía con múltiples mensajes y elementos, lo que impedía identificar rápidamente la propuesta principal.
Los planes y beneficios no contaban con un recorrido claro dentro de la experiencia, afectando la lectura y comparación de opciones.
Era necesario ordenar la narrativa visual sin perder identidad de marca ni generar sobrecarga en la interfaz.
EL DESAFIO
Adaptar el contenido base manteniendo claridad, identidad de marca y una experiencia visual atractiva.
Principios que guiaron el rediseño
Claridad Concisa
Que la propuesta se entienda sin esfuerzo.
Criterio compartido
Diseñar a partir de conversaciones, recomendaciones y validaciones constantes con el equipo.
Excelencia del producto
Hacer que el valor de Full Claro se sienta en cada detalle.
FLUJO DE ACTUALIZACIÓN
La columna vertebral del projecto.
Hay que empezar por algún sitio.
El rediseño de la landing de Claro Negocios partió de bases ya existente: piezas gráficas desarrolladas previamente para explicar la propuesta Full Claro en sus canales digitales (Figura 2.0)
Más que un recurso visual aislado, esta infografía condensaba la lógica, el orden y los mensajes clave que debían comunicar los planes y beneficios del producto.
La información clave convivía con múltiples mensajes y elementos, lo que impedía identificar rápidamente la propuesta principal.
Los planes y beneficios no contaban con un recorrido claro dentro de la experiencia, afectando la lectura y comparación de opciones.
Era necesario ordenar la narrativa visual sin perder identidad de marca ni generar sobrecarga en la interfaz.
2.0 Assets realizados para Claro Negocios
IMAGEN
Entender el recorrido antes de rediseñarlo
El problema no era la cantidad de pasos, sino la falta de dirección.
La landing anterior presentaba múltiples puntos de entrada a la información, pero sin un recorrido claramente definido. El usuario podía acceder a beneficios, promociones o formularios sin una secuencia que ayudara a entender qué era Full Claro, por qué era relevante y qué debía hacer después.(Figura 2.1)
Antes de proponer una nueva estructura, fue necesario analizar este recorrido y detectar dónde se perdía el foco. El rediseño partió de ordenar la experiencia en una secuencia lógica y progresiva, permitiendo que cada sección cumpla un rol claro dentro del camino hacia la conversión.
2.1 Primer flujo del sitio existente
IMAGEN
Identificar los problemas
Se analizó el flujo actual de la landing para entender cómo los usuarios recorrían la experiencia y en qué puntos se generaban fricciones en la toma de decisión (Figura 2.2).
2.2 Análisis de primer flujo
IMAGEN
¿Full Claro aplica realmente a mi negocio?
La información no dejaba claro desde el inicio si el beneficio aplicaba según el tipo de plan o servicio contratado.
¿Necesito cumplir todo o solo una parte?
Las condiciones aparecían fragmentadas, generando confusión sobre los requisitos reales.
¿Qué beneficio es realmente relevante para mí?
La falta de jerarquía hacía difícil identificar qué ventaja era la más importante según cada caso.
No está claro qué hacer primero
La experiencia no guiaba al usuario hacia un siguiente paso evidente.
Demasiadas decisiones al mismo tiempo
Beneficios, condiciones y formularios convivían sin una progresión clara.
Avanzar se siente riesgoso
La falta de validación previa generaba inseguridad antes de completar el formulario.
Replanteando el recorrido
A partir de los problemas identificados, el recorrido fue replanteado para priorizar claridad, jerarquía y progresión. (Figura 2.3)
El nuevo flujo organiza la información de forma secuencial, permitiendo que el usuario comprenda el valor, valide si aplica a su caso y avance hacia la conversión con mayor seguridad.
2.3 flujo de prototipo, categorizado
IMAGEN
El usuario entiende qué es Full Claro y para qué sirve apenas ingresa a la landing, sin necesidad de explorar todo el contenido o interactuar con el formulario.
Los beneficios se presentan en un orden lógico, facilitando identificar rápidamente qué aporta más valor según el contexto del negocio.
Los requisitos se muestran de forma clara y contextual, permitiendo saber si aplica o no antes de avanzar, sin esfuerzo adicional.
El recorrido reduce dudas y fricción, ayudando a que la decisión se tome con mayor seguridad.
El flujo acompaña la lógica del usuario empresarial: entender, validar y luego actuar.
INTERACCIÓN
No tenía que sentirse como un flujo rígido
Proceso de conversión — claridad vs. fricción.
El recorrido original priorizaba mostrar información, pero no guiaba decisiones.
En teoría, cada sección cumplía su función. En la práctica, el usuario tenía que detenerse e interpretar la información.
Lo que parecía un flujo informativo, se sentía como una serie de obstáculos cognitivos. (Figura 3.0)
El cambio de enfoque fue pasar de “mostrar todo” a acompañar cada caso, usando jerarquía, señales visuales y micro-decisiones claras que reforzaran la sensación de progreso (Figura 3.1).
3.0 Web Claro Negocios original
VIDEO LOOP
Web a rediseñar 🤔
La landing muestra múltiples beneficios al mismo nivel visual.
El usuario debe interpretar qué es Full Claro y por qué es relevante antes de saber si aplica a su negocio.
Formularios y botones aparecen desde el inicio del recorrido.
La decisión se fuerza antes de que el usuario entienda condiciones, alcance o beneficios reales.
Propuesta actual 👀
“Si tienes Claro en tu negocio y en tu celular, ya eres Full Claro.”
El usuario entiende rápidamente de qué se trata antes de decidir si le interesa.
Primero se explica el valor, luego se valida si aplica y recién después se propone convertir.
La acción se siente como el siguiente paso lógico.
3.1 Web Claro Negocios rediseño
VIDEO LOOP
No tenía que sentirse como una exploración sin rumbo.
En la versión anterior, el usuario decidía constantemente dónde mirar y qué interpreta (Figura 3.3).
El rediseño reorganiza el recorrido visual para que la interfaz priorice, sugiera y acompañe cada decisión, sin necesidad de detenerse a pensar qué sigue (Figura 3.4).
3.3 Navegación web antes
INTERACCIÓN
El usuario decide constantemente dónde mirar.
Múltiples bloques compiten entre sí, obligando a interpretar qué es importante antes de avanzar.
La navegación depende de la iniciativa del usuario.
El recorrido no sugiere un orden claro ni acompaña la lectura de beneficios y condiciones.
La acción no se siente inmediata ni segura.
La falta de jerarquía y señales claras genera dudas y retrasa la conversión.
3.4 Navegación web después
INTERACCIÓN
La interfaz prioriza lo esencial en cada momento.
El contenido se presenta en un orden lógico que reduce el esfuerzo de interpretación.
Los beneficios se entienden de un vistazo.
La estructura visual comunica qué es Full Claro y por qué importa antes de profundizar.
La conversión se siente como el siguiente paso natural.
El diseño guía la decisión, eliminando fricción y reforzando seguridad antes de actuar.
DISEÑO VISUAL
El diseño visual tenía que guiar acciones, no distraer decisiones
Proceso de conversión — claridad vs. fricción.
El rediseño visual se construyó desde la acción: primero dejar claro qué se puede hacer, luego qué elegir y finalmente decidir.
Nuestros componentes, como los botones, fueron uno de los puntos de partida en todo el recorrido, siempre alineados al design system y brandbook de Claro Negocios en su implementación web (Figura 4.0).
El uso de CTAs tipo pill y contraste alto en la UI mejora y da una sensación de priorización en la acción al ser visibles y consistentes a lo largo del recorrido.
4.0 Botones utilizados
IMAGEN
Cards — versatilidad y responsiva
Las cards funcionaron como unidades reutilizables de contenido (Figura 4.1), equilibrando claridad, jerarquía y acción en un sistema preparado para escalar.
Además con nuestra referencia visual del Brandbook Claro Negocios se trabajaron piezas exclusivas como contenedores que ayudaban a mantener ese look&feel que Claro Negocios muestra en sus distintos canales digitales y físicos (Figura 4.2).
4.1 Detalles de cards
INTERACCIÓN
4.2 Referencia de cards
IMAGEN
Información contextual cuando se necesita
En lugar de saturar la vista principal, la información clave se despliega bajo demanda mediante diálogos claros y enfocados (pop-ups) (Figura 4.3), reduciendo fricción y manteniendo la continuidad de la acción (Figura 4.4).
4.3 pop-up informativo
VIDEO LOOP
4.4 Pop-up informativo
VIDEO LOOP
RESULTADOS DEL PROYECTO
Validando decisiones con señales de atención
Validando decisiones con señales de atención
Para evaluar el impacto del rediseño, se utilizaron simulaciones de atención visual mediante IA, enfocadas en los primeros segundos de interacción.
Este análisis no busca reemplazar métricas reales de negocio, sino identificar patrones de claridad, jerarquía visual y visibilidad de acciones clave.
Distribución de la atención
Antes — Atención altamente dispersa en múltiples zonas sin jerarquía clara.
Después — Concentración progresiva en hero, beneficios clave y CTAs.
Insight UX
El usuario ya no decide “dónde mirar”, la interfaz lo guía.
Visibilidad de CTAs
Antes — CTA principal con 0.5% de atención
Muy por debajo del benchmark promedio (~2.4%)
Después — CTAs con mayor contraste y ubicación estratégica
Mayor probabilidad de ser percibidos en los primeros segundos
Insight UX
La acción dejó de ser una búsqueda para convertirse en un punto natural del recorrido.
Claridad del recorrido
Antes — Claridad visual estimada en 54%
Después — Aumento perceptible de legibilidad y escaneo vertical
Insight UX
El usuario ya no decide “dónde mirar”, la interfaz lo guía.
Jerarquía visual
Antes — Múltiples tamaños, colores y bloques compitiendo
Falta de un orden de lectura evidente
Después — Jerarquía progresiva: mensaje → beneficio → acción
Uso consistente de color, contraste y ritmo
Insight UX
El diseño pasa de informar todo a decir lo justo en el momento correcto.
Las métricas presentadas corresponden a simulaciones de atención visual y se utilizan como soporte cualitativo para decisiones de diseño.
RESULTADOS DEL PROYECTO
Un final reconfortante…
UN BUEN RESULTADO
Una experiencia pensada para convertir con claridad, sin perder alineación con el negocio ni con el brandbook de Claro Empresas.
Aprendizajes del proyecto
Encontrar claridad dentro de restricciones
Un brandbook y un ecosistema existente no limitaron el diseño, lo enfocaron.
Las restricciones ayudaron a priorizar lo que realmente impacta en la conversión.
El recorrido importa más que la cantidad de contenido
El problema no era falta de información, sino cómo se presentaba.
Ordenar el flujo permitió avanzar sin tener que “interpretar” la interfaz.
El diseño visual también es UX
Color, contraste y ritmo visual guiaron la atención y redujeron fricción.
Cada ajuste respondió a una intención clara de decisión.
La validación visual complementa a los datos
Los heatmaps confirmaron decisiones de jerarquía y ubicación de CTAs.
El comportamiento real reforzó los ajustes de contenido clave.
