Back to portfolio
UX/UI & CROGANA Pay

GANA Pay

GANA Pay se planteo como una experiencia B2B capaz de explicar payroll, HR, beneficios y risk management sin sonar tecnica ni fragmentada. Disene y desarrolle…

Editorial hero mockup for GANA Pay

Cliente / Producto

GANA Pay

Industria

Fintech / Payroll / HR B2B

Modelo

Payroll, HR y risk management para SMBs reguladas

Rol

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

Fecha

August 2024

Audiencias activas en el flujo

Pymes de educaciónPymes de healthcareDecision makers operativos

Lo esencial del caso

  • Diseño UX/UI, desarrollo funcional y optimización continua dentro del mismo delivery.
  • El reto era ordenar una oferta compleja para pymes de educacion y salud en una narrativa clara de primer scroll. El si…
  • La oferta se vuelve más fácil de procesar, por lo que más visitantes llegan al camino de servicio correcto con una señ…
  • 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

El reto era ordenar una oferta compleja para pymes de educacion y salud en una narrativa clara de primer scroll. El sitio debia comunicar cumplimiento, eficiencia y confianza operativa, mientras empujaba consultas calificadas desde desktop y mobile sin perder velocidad ni legibilidad.

El enfoque

Cómo se estructuró la respuesta

Estructure la experiencia alrededor de una promesa concreta de payroll y HR para SMBs reguladas, con un hero orientado a accion, bloques de servicio faciles de escanear y rutas secundarias para profundizar por necesidad. A nivel de desarrollo construi plantillas y componentes WordPress reutilizables, optimice la distribucion del contenido segun intencion, medi el comportamiento con GA4 y heatmaps, y fui ajustando microcopy, jerarquia visual y rendimiento para mejorar la tasa de contacto. 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

El reto era ordenar una oferta compleja para pymes de educacion y salud en una narrativa clara de primer scroll. El sitio debia comunicar cumplimiento, eficiencia y confianza operativa, mientras empujaba consul…

Auditoría heurística

01

El reto era ordenar una oferta compleja para pymes de educacion y salud en una narrativa clara de primer scroll. El sitio debia comunicar cumplimiento, eficiencia y confianza operativa, mientras empujaba consultas calificadas desde desktop y mobile sin perder velocidad ni legibilidad.

GANA Pay se planteo como una experiencia B2B capaz de explicar payroll, HR, beneficios y risk management sin sonar tecnica ni fragmentada. Disene y desarrolle toda la capa visual y funcional del sitio, incluyendo arquitectura WordPress, modulos dinamicos de co…

Sistema UX/UI: Se clarificaron los servicios de payroll, HR y compliance bajo una sola propuesta de valor en el primer scroll.

Se redujo la jerga con una agrupación más clara de servicios, señales de confianza y mejor jerarquía de CTA.

Se alineó el ritmo de lectura entre desktop y mobile para acelerar la auto-selección del buyer.

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 Pay.
Captura desktop representativa usada para explicar el diagnóstico de la experiencia.
Fase 02

Sistema visual, arquitectura y continuidad de experiencia

Estructure la experiencia alrededor de una promesa concreta de payroll y HR para SMBs reguladas, con un hero orientado a accion, bloques de servicio faciles de escanear y rutas secundarias para profundizar por…

Sistema visual y estructura

01

Estructure la experiencia alrededor de una promesa concreta de payroll y HR para SMBs reguladas, con un hero orientado a accion, bloques de servicio faciles de escanear y rutas secundarias para profundizar por necesidad. A nivel de desarrollo construi plantillas y componentes WordPress reutilizables, optimice la distribucion del contenido segun intencion, medi el comportamiento con GA4 y heatmaps, y fui ajustando microcopy, jerarquia visual y rendimiento para mejorar la tasa de contacto.

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 clarificaron los servicios de payroll, HR y compliance bajo una sola propuesta de valor en el primer scroll.

Se redujo la jerga con una agrupación más clara de servicios, señales de confianza y mejor jerarquía de CTA.

Se alineó el ritmo de lectura entre desktop y mobile para acelerar la auto-selección del buyer.

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 plantillas reutilizables en WordPress para soluciones, contacto y soporte.

Se estructuraron bloques de contenido dinámico para que las líneas de servicio evolucionen sin rediseñar.

Se mejoraron performance, espaciado responsive y continuidad de formularios en todos los breakpoints.

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 Pay.
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 plantillas reutilizables en WordPress para soluciones, contacto y soporte.

Se estructuraron bloques de contenido dinámico para que las líneas de servicio evolucionen sin rediseñar.

Se mejoraron performance, espaciado responsive y continuidad de formularios en todos los breakpoints.

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 mapearon eventos de GA4 para inicios de consulta, clics en servicios y finalización de formularios.

Se revisaron mapas de calor para reordenar secciones y ajustar el copy alrededor del lenguaje de compliance.

Se iteraron copies de CTA y bloques de prueba para mejorar la preparación hacia la 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 Pay.
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

La oferta se vuelve más fácil de procesar, por lo que más visitantes llegan al camino de servicio correcto con una señal de intención más fuerte. Referencia comparable de la categoría: 45% de aumento en leads.

Estabilidad técnica

Un espaciado más limpio y una jerarquía más fuerte reducen la carga cognitiva en un funnel regulado y cargado de información. Referencia comparable de la categoría: 25% de mejora en accesibilidad.

Aprendizaje del equipo

Las plantillas reutilizables de servicio aceleran los ciclos de lanzamiento y reducen el esfuerzo necesario para actualizar contenido. CRO y analítica: Se mapearon eventos de GA4 para inicios de consulta, clics en servicios y finalización de formularios. Se revisaron mapas de calor para reordenar secciones y ajustar el copy alrededor del lenguaje de compliance. Se iteraron copies de CTA y bloques de prueba para mejorar la preparación hacia la 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.

UX/UI

Diseño de una app de domicilios multiaudiencia para restaurantes independientes

Organizar una experiencia de domicilios donde restaurantes, repartidores y usuarios finales convivieran sin fricción conceptual.

View next case