Back to portfolio
UX/UI & CROGANA Business Solutions

GANA Business Solutions

GANA Business Solutions exigia una presencia digital mas madura para presentar CFO, finance, accounting y payroll bajo una sola narrativa de estabilidad finan…

Editorial hero mockup for GANA Business Solutions

Cliente / Producto

GANA Business Solutions

Industria

Financial Services / Consulting B2B

Modelo

Consultoría financiera y servicios corporativos B2B

Rol

Diseño UX/UI · Desarrollo WordPress · Tracking en GA4 · Mapas de calor · Optimización CRO

Fecha

August 2024

Audiencias activas en el flujo

SMEsDecision makers financierosEquipos administrativos

Lo esencial del caso

  • Diseño UX/UI, desarrollo funcional y optimización continua dentro del mismo delivery.
  • La oferta mezclaba varias lineas de servicio con distinta profundidad consultiva, por lo que el riesgo principal era l…
  • Los visitantes identifican más rápido qué línea de servicio responde a su necesidad, aumentando la probabilidad de inq…
  • La narrativa visual se alineó con la tipografía validada en el sitio live: Montserrat / Open Sans.
WordPressGA4HeatmapsFigmaCRO Iteration

El desafío

Qué necesitaba resolverse

La oferta mezclaba varias lineas de servicio con distinta profundidad consultiva, por lo que el riesgo principal era lucir difusa o generica. El sitio debia simplificar el entendimiento del portafolio, generar credibilidad en sectores sensibles como educacion y healthcare y convertir el trafico en solicitudes de consulta calificadas.

El enfoque

Cómo se estructuró la respuesta

Plantee una arquitectura de informacion con una narrativa central de estabilidad financiera y luego distribui el detalle por lineas de negocio para reducir friccion cognitiva. Disene un sistema visual sobrio pero cercano, implemente componentes y plantillas administrables para servicios, blog y captacion, y conecte GA4, eventos clave y observacion de heatmaps para iterar contenido, CTA y rendimiento segun el comportamiento real de los usuarios. La dirección visual se ancló a la tipografía live Montserrat / Open Sans.

Fase 01

Diagnóstico de fricción, claridad de valor y lectura de intención

La oferta mezclaba varias lineas de servicio con distinta profundidad consultiva, por lo que el riesgo principal era lucir difusa o generica. El sitio debia simplificar el entendimiento del portafolio, generar…

Auditoría heurística

01

La oferta mezclaba varias lineas de servicio con distinta profundidad consultiva, por lo que el riesgo principal era lucir difusa o generica. El sitio debia simplificar el entendimiento del portafolio, generar credibilidad en sectores sensibles como educacion y healthcare y convertir el trafico en solicitudes de consulta calificadas.

GANA Business Solutions exigia una presencia digital mas madura para presentar CFO, finance, accounting y payroll bajo una sola narrativa de estabilidad financiera. Lidere el rediseno UX/UI y el desarrollo end-to-end del ecosistema web, desde la capa funcional…

Sistema UX/UI: Se replantearon múltiples líneas de servicio en una narrativa consultiva más calmada y legible.

Se diseñó un sistema visual premium pero práctico para escanear ofertas complejas.

Se equilibraron prueba, detalle de servicio y disparadores de conversión sin caer en un tono promocional.

Síntesis de oportunidades

02

La síntesis del caso combinó lectura de fricción, jerarquía editorial y priorización sobre señales reales de intención para mover la experiencia hacia una conversión más clara.

El encargo consistió en traducir una oferta compleja en una historia más legible, convincente y accionable para la audiencia correcta.

La tipografía de marca validada en el sitio live se incorporó al sistema editorial del caso: Montserrat / Open Sans

Vista desktop principal de GANA Business Solutions.
Captura desktop representativa usada para explicar el diagnóstico de la experiencia.
Fase 02

Sistema visual, arquitectura y continuidad de experiencia

Plantee una arquitectura de informacion con una narrativa central de estabilidad financiera y luego distribui el detalle por lineas de negocio para reducir friccion cognitiva. Disene un sistema visual sobrio pe…

Sistema visual y estructura

01

Plantee una arquitectura de informacion con una narrativa central de estabilidad financiera y luego distribui el detalle por lineas de negocio para reducir friccion cognitiva. Disene un sistema visual sobrio pero cercano, implemente componentes y plantillas administrables para servicios, blog y captacion, y conecte GA4, eventos clave y observacion de heatmaps para iterar contenido, CTA y rendimiento segun el comportamiento real de los usuarios.

La dirección visual se trabajó para sostener una lectura editorial más clara, densa y coherente con el nivel del servicio, sin perder claridad funcional.

Sistema UX/UI: Se replantearon múltiples líneas de servicio en una narrativa consultiva más calmada y legible.

Se diseñó un sistema visual premium pero práctico para escanear ofertas complejas.

Se equilibraron prueba, detalle de servicio y disparadores de conversión sin caer en un tono promocional.

La dupla tipográfica de marca se trasladó al board y al sistema del caso: Montserrat / Open Sans

Workflows y entregables

02

Entrega web: Se construyeron páginas modulares de servicio en WordPress, bloques de insights y superficies de contacto.

Se crearon secciones reutilizables para nuevas ofertas, artículos y actualizaciones.

Se estabilizó el comportamiento responsive para que tarjetas editoriales y CTAs se mantuvieran consistentes.

La macroestructura editorial se mantuvo consistente con la skill ux-ui-design-pro para conectar apertura, sistema, ejecución, impacto y lectura responsive.

Board editorial de GANA Business Solutions.
Mockup editorial que resume el sistema visual del caso.
Fase 03

Implementación funcional, analítica y optimización continua

Diseño, desarrollo, instrumentación y mejora continua se ejecutaron como una sola capa de entrega. Marco de referencia aprobado: 45% de aumento en leads.

Implementación y refinamiento

01

Entrega web: Se construyeron páginas modulares de servicio en WordPress, bloques de insights y superficies de contacto.

Se crearon secciones reutilizables para nuevas ofertas, artículos y actualizaciones.

Se estabilizó el comportamiento responsive para que tarjetas editoriales y CTAs se mantuvieran consistentes.

La implementación preservó reutilización, contenido dinámico y continuidad responsive para que el caso pueda seguir evolucionando sin romper la coherencia del sistema.

Medición y aprendizaje

02

CRO y analítica: Se trazó la intención mediante eventos de GA4 sobre servicios principales, profundidad de scroll e inicios de formulario.

Se usaron mapas de calor para identificar dudas alrededor del naming de servicios y la ubicación de acciones.

Se refinó el copy y el orden de secciones para mejorar la calidad del lead antes del paso de consulta.

Referencia aprobada: 45% de aumento en leads.

Referencia aprobada: 25% de aumento en accesibilidad con una referencia de 98/100 WCAG.

Vista mobile principal de GANA Business Solutions.
Captura mobile representativa para la implementación y optimización responsive.
Impacto

Lo que cambió después de rediseñar el flujo

Esta capa evita inflar cifras o forzar narrativa de performance donde no corresponde. El foco está en cambios observables de claridad, operación y experiencia.

Resultado sintetizado

Referencia comparable de la categoría: 45% de aumento en leads.

Referencias aprobadas

Marco cuantitativo validado desde la data estática del caso. Se muestra como referencia aprobada, no como promesa pública bajo NDA.

  • 45% de aumento en leads.
  • 25% de aumento en accesibilidad con una referencia de 98/100 WCAG.

Agilidad operativa

Los visitantes identifican más rápido qué línea de servicio responde a su necesidad, aumentando la probabilidad de inquiries con mayor contexto. Referencia comparable de la categoría: 45% de aumento en leads.

Estabilidad técnica

Una historia consultiva más clara hace que la firma se perciba más madura y reduce la duda en la evaluación B2B temprana. Referencia comparable de la categoría: 25% de mejora en accesibilidad.

Aprendizaje del equipo

El build modular soporta actualizaciones continuas de ofertas, prueba y thought leadership sin rediseñar layouts. CRO y analítica: Se trazó la intención mediante eventos de GA4 sobre servicios principales, profundidad de scroll e inicios de formulario. Se usaron mapas de calor para identificar dudas alrededor del naming de servicios y la ubicación de acciones. Se refinó el copy y el orden de secciones para mejorar la calidad del lead antes del paso de consulta.

Algunos detalles operativos, capturas o nombres se condensan para proteger contexto sensible y mantener el foco en las decisiones de producto, experiencia y sistema.

Keep exploring

This case is one piece of the full system, not an island.

If you want to review another project or talk about product, UX, and front-end execution, here is the next best route.

Figma

Automatización de Onboarding e Identidad Visual para Plataforma Financiera

Caída de usuarios del 70% durante el flujo de KYC.

View next case