Claro Portabilidad
Claro Personas | Junio 2024
Rol
UI Designer — Designer, Visual Designer, User flow, Prototipo Rápido
Equipo
Michael Soto, Havas Worldwide
Keiko E., Havas Worldwide
Timeline & Status
1 Semana, Lanzado en Junio 2024
Descripción General / Overview
La landing page de Portabilidad de Claro Perú necesitaba una actualización para alinear su diseño con tendencias modernas de UI y reflejar mejor la identidad de la marca.
Se rediseñó el sitio, guiado por el manual de marca de Claro y trabajando dentro de limitaciones de tiempo. Se implementó un enfoque visual moderno, se optimizaron los puntos clave para la conversión y se mejoró la estructura general de la página, priorizando la claridad y la usabilidad.
El resultado fue una experiencia renovada, atractiva e intuitiva, que fortaleció la percepción de Claro como una marca innovadora y orientada al usuario.
DESTACADOS
CONTEXTO
Una oportunidad para destacar con impacto.
El mensaje era claro y directo.
Actualizar la landing de Portabilidad era fundamental para modernizar su diseño. Más allá de una mejora visual, representaba la oportunidad de entregar una solución superior.
EL PROBLEMA
Este no iba a ser un rediseño convencional
Una acumulación de limitaciones
Las actualizaciones de diseño generalmente se implementan de manera estándar. Sin embargo, en este caso, no fue posible debido a la magnitud del rediseño y a las restricciones de tiempo.
Se tomó la decisión de desarrollar una landing page completamente nueva como solución, lo que implicó una serie de limitaciones y desafíos únicos:
Un plazo de 1.5 semanas, ya que debíamos lanzar antes de la fecha de cierre.
Limitaciones en la jerarquía. Los CTA debían destacarse para guiar al usuario.
El diseño en Figma era estático y no permitía validar dinámicamente la interacción en el desarrollo real.
EL DESAFIO
Principios de diseño fundamentales:
Claridad Concisa
Instrucciones claras, informativas y directas que guían al usuario de manera efectiva.
Retroalimentación Proactiva
Anticiparse a las necesidades del usuario y comunicar de manera proactiva el progreso y posibles errores.
Excelencia del Producto
Superar las expectativas del usuario con un diseño que no solo cumple, sino que ofrece una experiencia sobresaliente.
FLUJO DE ACTUALIZACIÓN
El eje central del proyecto.
Todo rediseño debe empezar en algún lugar.
Con el apoyo del equipo UX se formuló un prototipo preliminar en Figma con la información base del contenido. Aunque funcional como cimiento, carecía de jerarquía visual y soluciones a la altura para cumplir con las expectativas del usuario.
Análisis de navegación
La creación de una estructura definida también ayudó a destacar problemas heurísticos, como la interacción confusa con los botones principales y la ausencia de consideraciones para casos límite.
Esto permitió establecer soluciones que alinearan el diseño con los estándares de usabilidad y experiencia del usuario.
Identificando los problemas
Muchas secciones, destinadas a venta y redirección a otras páginas no favorecen a una óptimo flujo de navegación.
El objetivo es obtener mejor retención y para ello se necesita descartar secciones donde no se aproveche el contenido o en su defecto reestructurarlo en dirección al nuevo objetivo.
Recursos adaptables de acuerdo a las directrices establecidas en el manual de marca.
Prueba de usuario limitada por tiempo para realizar pruebas.
Un plazo de 1.5 semanas, ya que se debía lanzar antes de la fecha de cierre.
El diseño en Figma era estático y limitaba validar dinámicamente la interacción en el desarrollo real.
Implementando ajustes clave.
Gran parte de los problemas se resolvieron optimizando las instrucciones y retroalimentación para mejorar la percepción de avance en el flujo de navegación. (Figura 3.3)
Simplificación de contenido: Instrucciones claras con ilustraciones que destacan los pasos clave mediante indicadores visuales.
Refuerzo del proceso: Se añadieron guías al usuario paso a paso, fortaleciendo la confianza en el flujo.
Revisión de textos: En colaboración con el equipo UX, se redactaron copys más directos y accesibles.
Métodos simples para validar cada paso, garantizando una experiencia fluida.
Lo que comenzó como una restricción se convirtió en un avance clave.
En su estado inicial, la web carecía de una jerarquía narrativa clara entre secciones, lo que generaba una experiencia visual desordenada y dificultaba la comprensión fluida de la información presentada
PUNTOS CLAVE
INTERACCIÓN
Claramente Claro, inconfundiblemente moderno.
Combinando lo existente con lo nuevo.
En este proyecto no fue necesario crear un sistema de diseño desde cero.
Se diseñaron componentes personalizados según necesidades específicas, integrando elementos del manual de marca de Claro Perú con tendencias modernas de UI para lograr un diseño funcional y renovado.
Fragmentación de información clave y ausencia de jerarquía en la compresión y efectividad del mensaje.
Información dedicada a portabilidad y beneficios de Full Claro recurrente.
Banner hero no optimizado para el atractivo visual en la Landing Page.
Estilo visual desactualizado y rígido en la navegación.
Propuesta simplificada en recursos gráficos y textos
La propuesta sigue la tendencia Bento UI, modular y moderna.
Se organa mejor las secciones, fortaleciendo el storytelling.
Depende del usuario seguir las instrucciones y guía para la Portabilidad Claro
Cards — dinámicas y responsivas
Los componentes en grilla y sus similares como las cards fue un punto interesante para la organización del contenido.
Se diseñó para priorizar la legibilidad, teniendo en cuenta la adaptabilidad, flexibilidad y la facilidad de uso en distintos dispositivos.
DISEÑO FINAL
Un recorrido sin fricciones
Combinando lo existente con lo nuevo.
En este proyecto no fue necesario crear un sistema de diseño desde cero.
Se diseñaron componentes personalizados según necesidades específicas, integrando elementos del manual de marca de Claro Perú con tendencias modernas de UI para lograr un diseño funcional y renovado.
REFLEXIÓN Y STATS
Un último recorrido visual
Siempre habrá elementos mejorables
Significativamente existe una mejora visual en la interfaz y un flujo de navegación mejor distribuido entre todas las secciones presentadas en esta nueva propuesta que equilibra información clave para dar pase a su conversión entre los planes que ofrece Claro Portabilidad.
A continuación, se desarrollará un análisis de retención visual entre ambas Landing Page. Versión antigua y rediseñada.
Conclusiones del proyecto:
Mejora significativa en la atención de los CTAs
La optimización de la página resultó en un aumento del +67% en la atención hacia los botones de llamada a la acción, destacando la efectividad de los cambios implementados
Incremento en la interacción de los usuarios
a nueva versión generó un mayor interés y participación de los usuarios, lo que sugiere que el diseño mejorado guía mejor la atención y fomenta la interacción.
Optimización del flujo de atención
La landing page rediseñada logró un flujo de atención más natural y continuo, siguiendo principios de jerarquía visual y proximidad que favorecen una experiencia de usuario más fluida.
Resultados alineados con benchmarks de la industria
La atención en elementos clave de la landing superó el promedio de benchmarks de las mejores prácticas, validando la efectividad del enfoque de diseño aplicado.
Impacto positivo en la conversión
Con la retención en la Landing page actual aumentó la probabilidad de conversión en las secciones donde se busca obtener mayores resultados.
Adaptabilidad para futuras mejoras
La estructura optimizada de la landing permite realizar ajustes y pruebas A/B de manera eficiente, lo que facilita la implementación de futuras mejoras basadas en datos y retroalimentación de usuarios
