Landing Cupoágil y Crédito Rotativo

Esta landing tenía un propósito distinto al aplicativo interno de Cupoágil. No buscaba ordenar una operación, sino comunicar mejor una oferta comercial: explicar Cupoágil y Crédito Rotativo de forma clara, accesible y fácil de consultar desde cualquier dispositivo.

El punto de partida fueron diseños entregados por el equipo de UX. Mi trabajo consistió en llevar esa propuesta visual a una experiencia frontend funcional, responsive y alineada con el sistema de diseño del banco.

Una landing comercial no solo debe verse bien. Debe ayudar al usuario a entender rápido qué se ofrece, por qué le sirve y qué puede hacer después.

De diseño a experiencia responsive

La implementación se realizó en Angular, aplicando una metodología mobile first. Esto permitió construir primero la experiencia para pantallas pequeñas y luego escalarla hacia tablets y escritorio sin perder claridad visual.

También integré componentes del sistema de diseño SHERPA, manteniendo consistencia con el ecosistema digital de la organización y evitando resolver desde cero patrones que ya estaban definidos.

El trabajo estuvo concentrado en cuidar detalles propios de una landing comercial:

• Jerarquía clara de la información.
• Adaptación correcta entre dispositivos.
• Uso consistente de componentes visuales.
• Implementación fiel a los diseños de UX.
• Buen comportamiento en navegación móvil.

Medir también era parte del producto

Además de construir la interfaz, la landing necesitaba dejar señales para entender cómo se comportaban los usuarios. Por eso se incorporaron prácticas de SEO y herramientas de analítica como Hotjar.

Esto permitió que la página no fuera solo una pieza informativa, sino también un punto de observación para identificar interacción, navegación y posibles oportunidades de mejora.

Aportes principales

• Implementación frontend de la landing en Angular.
• Maquetación responsive con enfoque mobile first.
• Integración de componentes del sistema de diseño SHERPA.
• Ajustes visuales para mantener fidelidad con los diseños de UX.
• Aplicación de prácticas básicas de SEO.
• Integración de Hotjar para medición de comportamiento.
• Validación de visualización en diferentes tamaños de pantalla.

Stack usado

• Angular
• SHERPA
• SEO
• Hotjar

Resultado

La landing permitió presentar Cupoágil y Crédito Rotativo en una experiencia digital más clara, consistente y adaptable a distintos dispositivos.

También dejó una base de medición para observar el comportamiento de los usuarios, algo clave cuando una página no solo debe informar, sino ayudar a mejorar la comunicación comercial del producto.

Qué me dejó

Este proyecto reforzó la importancia de cuidar la ejecución frontend en piezas comerciales. En una landing, cada sección, cada breakpoint y cada decisión de jerarquía visual influye en la forma en que el usuario entiende la oferta.

También me permitió trabajar con una mirada más orientada a medición: construir la página era solo una parte; dejarla lista para aprender del comportamiento real de los usuarios era igual de importante.