Coopenae
Simplificando la Banca Cooperativa: Reduciendo la fricción cognitiva para aumentar la conversión y el engagement.
CLIENTE
Coopenae · Costa Rica
MI ROL
Lead UX/UI Designer
PLAZO
3 Semanas
ENTREGABLES
45 pantallas Desktop + Mobile
HERRAMIENTAS
Figma · Gemini · ChatGPT
Introducción
Un repositorio de información desordenado disfrazado de sitio web
Coopenae es la institución líder del sector cooperativo en Costa Rica, con casi 60 años de trayectoria. Sin embargo, su web corporativa —el principal punto de contacto y confianza para potenciales asociados— se encontraba en un estado de colapso funcional. Fui contratado para liderar una misión de rescate: diseñar la experiencia completa del sitio (45 pantallas entre Desktop y Mobile) en un plazo agresivo de apenas 3 semanas.
Este caso documenta cómo, ante la restricción de tiempo, las decisiones de criterio importan más que las decisiones de ejecución. Qué investigar, qué priorizar y qué conscientemente no hacer definió el resultado final.
El sector cooperativo financiero era nuevo para mí. Llegué sin supuestos heredados y pude cuestionar decisiones de arquitectura que el equipo interno ya no veía.
Investigación
Validando el desastre estructural
A pesar de la urgencia, el proyecto inició con una fase de diagnóstico profundo para no diseñar sobre suposiciones.
Evaluación Heurística
Realicé un análisis de la web anterior para detectar violaciones de usabilidad. El hallazgo fue crítico: el sitio fallaba sistemáticamente en consistencia y en la relación entre el sistema y el mundo real. La arquitectura era un reflejo de procesos administrativos internos, no de modelos mentales de usuario.
Benchmarking Competitivo
Analicé cómo los referentes del sector financiero y fintech gestionaban su arquitectura de información. Esto me permitió identificar patrones de éxito y estándares de navegación que los asociados ya tenían incorporados, reduciendo la curva de aprendizaje en el nuevo sitio.
Estrategia
El Workshop de Alineación
Con la evidencia en mano, lideré dos sesiones de trabajo con los stakeholders (2 horas cada una). No presenté soluciones para que las aprobaran — construí el diagnóstico junto a ellos. La priorización de flujos surgió del conocimiento del negocio de los stakeholders validado contra mi análisis estructural.
Los stakeholders aportaron contexto que ningún benchmark podía darme: qué dudas generaban más llamadas al call center, qué secciones causaban más confusión en las sucursales, qué productos tenían mayor intención de búsqueda pero menor tasa de conversión. Ante la imposibilidad de realizar pruebas con usuarios externos, esa inteligencia colectiva fue el sustituto más robusto disponible.
IA como herramienta de criterio
IA como herramienta de criterio, no de atajo
Gemini para el inventario de contenido: Procesé el inventario del sitio anterior para generar propuestas de agrupación por afinidad temática. Esto me permitió validar en horas una taxonomía que habría tomado días de card sorting manual, y llegar al workshop con hipótesis fundamentadas en lugar de intuiciones.
ChatGPT para las variantes de contenido: Para cada uno de los 30 bloques de contenido heredado, generé 3 variantes con distintos niveles de simplificación. Mi criterio de selección fue siempre el mismo: ¿cuál reduce la carga cognitiva sin perder la precisión legal que una cooperativa financiera requiere? La IA generó opciones; yo tomé decisiones.
El resultado fue un lenguaje que pasó de nombrar estructuras administrativas internas a describir beneficios reales para el asociado — sin sacrificar la exactitud que el sector financiero demanda.
Arquitectura de Información
Reestructuración por perfiles y necesidades
Organizamos la información por perfiles y necesidades (Para vos, Para tu empresa). Establecí una jerarquía lógica de tres niveles: el Home como centro de mando, las páginas de categoría como distribuidores inteligentes y las páginas de producto como puntos finales de conversión.
Ejecución UI
La Interfaz como Ordenador Logístico
Toda la UI fue creada desde cero. Diseñé un sistema visual que actúa como un mapa de navegación:
Revelación Progresiva
Acordeones verticales para gestionar la carga visual. Esconden la complejidad técnica y la muestran solo cuando el usuario la solicita.
Feedback de Navegación
Hovers y CTAs con estados muy notables. Si la estructura antes era confusa, la respuesta de la interfaz ahora debía ser obvia y confirmatoria.
Decisiones difíciles
Lo que conscientemente no diseñé
Con 21 días, 45 pantallas y cero margen de error, la decisión más crítica no fue qué diseñar, sino qué conscientemente no diseñar. Durante el workshop identifiqué tres flujos secundarios que el cliente quería incluir. Mi criterio fue claro: incorporarlos fragmentaría la arquitectura central antes de que estuviera validada.
Propuse documentarlos como deuda de diseño planificada — con especificaciones detalladas para una segunda fase. Esto requirió sostener una posición incómoda: entregarle al cliente menos de lo que pedía para entregarle más de lo que necesitaba. La aceptación llegó cuando pude mostrar, sobre el sitemap comparativo, cómo esos flujos habrían colapsado la jerarquía recién construida.
De Pestañas a Acordeones
Mi propuesta inicial incluía tabs. El cliente solicitó acordeones. En lugar de defender mi propuesta por defecto, validé que la petición era técnicamente acertada: en mobile, las tabs fragmentan la estructura y ocultan el contexto. El acordeón permite lectura lineal y funciona mejor con lectores de pantalla. El cliente tenía razón. Reconocerlo y argumentarlo técnicamente fortaleció la confianza en el proceso.
Iteración del card de producto (3 versiones)
Las dos primeras fallaron por la misma razón: priorizaban la descripción del producto sobre el beneficio del asociado. La tercera funcionó cuando reformulé la pregunta de diseño — no ¿qué es este crédito? sino ¿qué problema de vida resuelve? Ese cambio de perspectiva transformó un componente informativo en un punto de conversión.
Resultado
Entregado a tiempo. Cliente satisfecho.
Las 45 pantallas — Desktop y Mobile — se entregaron dentro del plazo, completas con anotaciones para desarrollo y una librería de componentes documentada. Coopenae quedó conforme y satisfecha con el resultado, destacando especialmente la claridad de la organización de la información y la calidad de la UI.
El equipo pasó directamente a desarrollo sin necesitar un ciclo de rediseño. Las métricas post-lanzamiento están siendo monitoreadas.
