Volver al portafolio
UX/UI & CROYolle Institute

Yolle Institute

Yolle Institute necesitaba una presencia digital capaz de traducir su promesa academica en una experiencia moderna de confianza, aspiracion y accion. Me encar…

Editorial hero mockup for Yolle Institute

Cliente / Producto

Yolle Institute

Industria

Healthcare Education / Career Launch

Modelo

Instituto de healthcare education orientado a career launch

Rol

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

Fecha

agosto de 2024

Audiencias activas en el flujo

Prospectos académicosAdmisionesCareer changers

Lo esencial del caso

  • Diseño UX/UI, desarrollo funcional y optimización continua dentro del mismo delivery.
  • La institucion debia presentarse como una opcion seria para estudiantes que buscan una ruta laboral concreta en salud,…
  • La experiencia se vuelve más orientada a carrera, ayudando a que los prospects se auto-seleccionen más rápido y contac…
  • 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 institucion debia presentarse como una opcion seria para estudiantes que buscan una ruta laboral concreta en salud, pero sin caer en un lenguaje generico de brochure academico. El reto era combinar aspiracion, credibilidad institucional y una navegacion simple hacia programas y admisiones.

El enfoque

Cómo se estructuró la respuesta

Defini una narrativa centrada en la empleabilidad y el entrenamiento practico, con bloques de programas destacados, prueba institucional, mensajes de autoridad y rutas claras hacia contacto o exploracion academica. La capa tecnica se resolvio con una base flexible para contenidos y actualizaciones futuras, mientras GA4 y los mapas de calor permitieron iterar copy, flujo de scroll y puntos de contacto para sostener claridad y performance. 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 institucion debia presentarse como una opcion seria para estudiantes que buscan una ruta laboral concreta en salud, pero sin caer en un lenguaje generico de brochure academico. El reto era combinar aspiracio…

Auditoría heurística

01

La institucion debia presentarse como una opcion seria para estudiantes que buscan una ruta laboral concreta en salud, pero sin caer en un lenguaje generico de brochure academico. El reto era combinar aspiracion, credibilidad institucional y una navegacion simple hacia programas y admisiones.

Yolle Institute necesitaba una presencia digital capaz de traducir su promesa academica en una experiencia moderna de confianza, aspiracion y accion. Me encargue del diseno UX/UI y del desarrollo total del sitio, incluyendo WordPress, componentes dinamicos, fo…

Sistema UX/UI: Se posicionó al instituto alrededor de empleabilidad, formación práctica y confianza.

Se equilibró una narrativa centrada en personas con detalle práctico de programas y admisiones.

Se mejoró la jerarquía para que autoridad, empatía y acción convivan en el mismo flujo.

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

Sistema visual, arquitectura y continuidad de experiencia

Defini una narrativa centrada en la empleabilidad y el entrenamiento practico, con bloques de programas destacados, prueba institucional, mensajes de autoridad y rutas claras hacia contacto o exploracion academ…

Sistema visual y estructura

01

Defini una narrativa centrada en la empleabilidad y el entrenamiento practico, con bloques de programas destacados, prueba institucional, mensajes de autoridad y rutas claras hacia contacto o exploracion academica. La capa tecnica se resolvio con una base flexible para contenidos y actualizaciones futuras, mientras GA4 y los mapas de calor permitieron iterar copy, flujo de scroll y puntos de contacto para sostener claridad y performance.

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 posicionó al instituto alrededor de empleabilidad, formación práctica y confianza.

Se equilibró una narrativa centrada en personas con detalle práctico de programas y admisiones.

Se mejoró la jerarquía para que autoridad, empatía y acción convivan en el mismo flujo.

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 implementaron secciones reutilizables en WordPress para programas, about, admisiones y contacto.

Se creó una estructura de contenido dinámico que puede crecer a medida que evolucionan programas o activos de prueba.

Se mantuvo estable el build responsive alrededor de tráfico educativo de alta intención.

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 Yolle Institute.
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 implementaron secciones reutilizables en WordPress para programas, about, admisiones y contacto.

Se creó una estructura de contenido dinámico que puede crecer a medida que evolucionan programas o activos de prueba.

Se mantuvo estable el build responsive alrededor de tráfico educativo de alta intención.

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 exploración de programas, los CTAs de admisiones y las acciones de contacto con GA4.

Se usaron mapas de calor para afinar orden, repetición y claridad de mensajes clave de enrollment.

Se ajustó el copy y el énfasis de CTA para sostener mayor confianza hacia el siguiente paso.

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 Yolle Institute.
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 experiencia se vuelve más orientada a carrera, ayudando a que los prospects se auto-seleccionen más rápido y contacten admisiones con expectativas más claras. Referencia comparable de la categoría: 45% de aumento en leads.

Estabilidad técnica

Un mensaje más fuerte alrededor de calidad clínica y condiciones de formación sostiene la credibilidad institucional más temprano en el funnel.

Aprendizaje del equipo

Una jerarquía mobile más limpia ayuda a absorber programas, beneficios y opciones de contacto sin perder contexto. Referencia comparable de la categoría: 25% de mejora en accesibilidad. CRO y analítica: Se trazó la exploración de programas, los CTAs de admisiones y las acciones de contacto con GA4. Se usaron mapas de calor para afinar orden, repetición y claridad de mensajes clave de enrollment. Se ajustó el copy y el énfasis de CTA para sostener mayor confianza hacia el siguiente paso.

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

Sigue explorando

Este caso es una pieza del sistema completo, no una isla.

Si quieres revisar otro proyecto o conversar sobre producto, UX y ejecución front-end, aquí tienes la siguiente mejor ruta.

UX/UI & CRO

Celebration School of Nursing

El objetivo era convertir una oferta academica puntual en una experiencia de captacion contundente, capaz de condensar diferenciadores, credenci…

Ver siguiente caso