10 de abril de 2026

Visión general

Banco del Austro (BdA) es uno de los bancos privados consolidados del Ecuador. Su sitio público — bancodelaustro.com — es el primer punto de contacto para una gran parte de sus clientes actuales y prospectos, y sin embargo había acumulado los síntomas habituales de un sitio institucional de larga trayectoria: navegación densa, llamadas a la acción en competencia, tipografía inconsistente entre campañas de marketing y páginas de producto, y una portada que intentaba servir a todas las audiencias a la vez y terminaba sirviendo bien a ninguna. El proyecto es un rediseño multidisciplinario: como Investigador de UX interno del banco, lidero la investigación y la dirección de diseño, trabajando directamente con el equipo de desarrollo interno de BdA en la viabilidad de implementación y con el equipo de marketing en el posicionamiento, los espacios promocionales y el tono de marca.

Investigación UX

Antes de mover un solo píxel, el trabajo fue investigación.

• Entrevistas con stakeholders con los product owners de tarjetas de crédito, hipotecas, banca de empresas y canales digitales para entender qué espacio de la portada se disputaba cada grupo y por qué.
• Análisis profundo de analítica en la portada actual: profundidad de scroll, mapas de clics, puntos de abandono entre la portada y el login de banca en línea, y la cola larga de términos que la gente escribe en el buscador del sitio.
• Desarme competitivo de bancos pares en Ecuador y en la región LATAM (Produbanco, Banco Pichincha, Banco Guayaquil, además de referencias como BBVA e Itaú) — no para copiar, sino para mapear las convenciones visuales de la categoría para que el rediseño de BdA pueda elegir deliberadamente dónde conformarse (señales de confianza, seguridad) y dónde diferenciarse (densidad de contenido, movimiento, tono).
• Entrevistas con usuarios con un pequeño panel de clientes actuales y no clientes para sacar a la luz las preguntas reales de la primera visita: "¿puedo confiar en esto?", "¿dónde inicio sesión?", "¿qué me ofrece este banco específicamente a mí?"
• Auditoría de contenido de cada enlace, banner y espacio promocional actualmente en la portada, etiquetado por dueño, fecha de última actualización y CTR medible — lo que le dio a marketing una lista corta basada en evidencia de qué mantener, retirar o consolidar.

El resultado de esta fase es un brief de investigación escrito y una lista priorizada de problemas que marketing, ingeniería y yo firmamos antes de que comience el diseño.

Dirección UI

• Una jerarquía clara sobre el pliegue: una promesa principal, una acción principal (login de banca en línea), un espacio editorial secundario propiedad de marketing. Basta de carruseles que compiten consigo mismos.
• Una paleta sobria y confiable anclada en los colores de marca existentes de BdA, con uso cuidadoso del espacio en blanco y un solo acento para acción — porque en banca, la sobriedad visual es una señal de confianza.
• Un sistema tipográfico construido sobre un sans neutro moderno emparejado con un display ligeramente más cálido para titulares, para suavizar el tono institucional sin perder autoridad.
• Librería de componentes en Figma — botones, cards, bloques promocionales, tablas de tasas, bloques de disclaimers — mapeada 1:1 a los componentes que el equipo de desarrollo interno realmente construirá, para que diseño y código no se separen.
• Movimiento y micro-interacciones usados con moderación: hover states sutiles, un scroll-reveal calmado para las secciones, sin parallax de gimmick.
• Accesibilidad como restricción de primera clase: contraste WCAG AA verificado en cada combinación de color, estados de foco diseñados (no solo heredados), y todas las imágenes promocionales con alt text significativo redactado junto con marketing.

Trabajo con desarrollo y marketing

• Con desarrollo: sesiones de trabajo semanales para revisar la viabilidad de componentes, acordar una librería de componentes y asegurar que el handoff esté en un formato (tokens + variantes de Figma) que mapee limpiamente al código.
• Con marketing: co-propiedad de los espacios promocionales. Marketing mantiene el control total del calendario editorial, pero el sistema de diseño restringe cómo se renderizan las campañas — para que un nuevo banner de Black Friday no pueda romper accidentalmente el ritmo visual de la portada.
• Gobernanza: establecer un proceso ligero de "cambio de portada" para que futuros swaps de banners, lanzamientos de producto y divulgaciones regulatorias tengan un hogar en el sistema sin necesidad de un rediseño cada vez.

Galería

Características clave

• Hero enfocado que expresa la propuesta de valor del banco en una oración y da a los clientes recurrentes una ruta de login inequívoca.
• Cards de clústeres de producto que agrupan ofertas personales, de empresa y de patrimonio con revelación progresiva en lugar de un mega-menú plano.
• Utilidades tool-first: calculadoras, localizador de sucursales/cajeros y tasas de cambio expuestos donde la investigación mostró que los usuarios los buscan.
• Espacios evergreen + campaña separados limpiamente, para que marketing se mueva rápido sin desestabilizar los flujos permanentes.
• Layout mobile-first: dado que la mayoría del tráfico de primer contacto es móvil, cada componente se diseña primero para pantallas pequeñas y se expande hacia arriba.

Tecnologías y herramientas

• Investigación: entrevistas con stakeholders, análisis GA4 / heatmaps, sesiones remotas moderadas con usuarios, auditorías competitivas.
• Diseño: Figma (variables, auto-layout, variantes de componentes), FigJam para síntesis de investigación.
• Handoff: tokens de diseño exportados a la librería de componentes del equipo de desarrollo, acompañados de especificaciones de interacción escritas.
• Implementación (en colaboración con los ingenieros de BdA): stack frontend moderno basado en componentes, alineado con las restricciones de la plataforma existente del banco, con foco en Core Web Vitals y accesibilidad desde el día uno.

Resultados medibles (hasta ahora)

• 18 entrevistas con stakeholders en producto, marketing, compliance y servicio al cliente, capturadas en un repositorio de investigación compartido.
• Análisis profundo de analítica sobre 12 meses de datos de GA4, sacando a la luz los puntos reales de abandono y la cola larga de búsquedas internas que impulsa la nueva arquitectura de información.
• Sesiones moderadas de usabilidad con 9 participantes (una mezcla de clientes actuales y no clientes) probando el prototipo de la nueva portada, cada una produciendo una transcripción y un registro priorizado de fricciones.
• Auditoría de contenido catalogando cada enlace, banner y espacio promocional de la portada actual con dueño, fecha de última actualización y click-through — entregando a marketing una lista corta basada en evidencia de qué mantener vs. retirar.
• Librería de componentes en Figma con más de 30 componentes mapeados 1:1 al stack de implementación, eliminando el sobrecosto de reinterpretación de diseño a código.
• Objetivos acordados con el negocio para post-lanzamiento: un 25% de aumento en el click-through del CTA principal de la portada, una reducción del 15% en el tiempo hasta el botón de login en móvil y una caída medible en tickets de soporte del tipo "¿dónde encuentro X en el sitio web?".

Resultado

Una portada que se lee como una tienda digital moderna y confiable en lugar de un muro de vallas publicitarias. Más importante, un sistema compartido — artefactos de investigación, una librería de componentes y un proceso de gestión de cambios — que los equipos propios de BdA mantienen y evolucionan desde dentro, para que el sitio siga mejorando sin regresar a la densidad e inconsistencia que disparó el rediseño en primer lugar.