[Caso IECEO]

End-to-end UX/UI design de plataforma educativa para gestión y obtención de certificaciones laborales

[Certificación / Educación continua / Capacitación profesional]

De cero a plataforma confiable de certificación laboral, confianza, claridad y un flujo de inscripción sin fricción

Diseñé y construí la primera plataforma digital de IECEO desde investigación hasta implementación en WordPress, resolviendo las principales barreras de confianza, claridad y fricción en el registro para aumentar inscripciones confiables y medibles.

[Contexto del proyecto]

IECEO, un centro de certificaciones con validez oficial en México, carecía de presencia digital clara. Los usuarios llegaban desde redes sociales con dudas sobre la validez de los certificados y abandonaban el proceso por información fragmentada y formularios poco confiables.

[El desafio]

El reto fue crear un producto digital end-to-end que transmitiera confianza inmediata, simplificara flujos de inscripción y ofreciera accesibilidad a profesionistas y empresas.

[Solución]

Crear una plataforma web responsive con arquitectura clara, trust signals visibles, contacto inmediato vía WhatsApp y formularios optimizados, implementada en WordPress e integrada con GA4 y Microsoft Clarity para medir conversión y usabilidad.

[Resultados e impacto]

• +61% en tiempo en página tras el lanzamiento.
• Mayor tasa de contacto vía WhatsApp y formularios, reduciendo fricciones en el registro.
• Confianza institucional reforzada, gracias a certificados tangibles, testimonios reales y señales de validez oficial.
• Base escalable para incorporar planes empresariales y nuevos estándares de certificación.

[Compañía]

IECEO

[Mi rol]

UX Research

UX/UI Design

UX Writing

Data & Analytics

Arquitectura de la información

[Herramientas utilizadas]

Figma

WordPress

GA4

Microsoft Clarity

Figjam

ChatGPT

[Plataforma]

Corporate Website

Mobile

Responsive

[Duración del proyecto]

Julio 2023 - Agosto 2023

[Proyecto en vivo]

[Panorama estratégico]

🚀 IECEO buscaba pasar de la validación presencial a la confianza digital para escalar su alcance nacional en certificaciones

El instituto operaba con procesos presenciales y redes sociales dispersas, pero necesitaba un producto digital profesional que transmitiera credibilidad y simplificara el acceso a certificaciones oficiales.

🌐📊

De la validación presencial a la confianza digital

IECEO es un centro de certificaciones con validez oficial en Oaxaca que opera bajo un modelo híbrido: experiencias presenciales y una nueva plataforma digital. Con respaldo de organismos como Red Conocer e ICEMéxico, el objetivo estratégico era claro: expandir su alcance a nivel nacional, garantizando confianza y accesibilidad.


Para lograrlo, se requería un producto digital que:

• Reflejara confianza mediante señales visuales claras y contenido validado.

• Optimizar flujos de usuario con una arquitectura de información bien estructurada.

• Escalar el acceso a certificaciones con una interfaz intuitiva, responsive y accesible.

[Desafío inicial]

⚡ El reto fue transformar la incertidumbre y falta de confianza en un flujo digital claro y confiable orientado a la conversión

Los usuarios no encontraban pruebas de validez ni un proceso de registro funcional, lo que generaba abandono y desconfianza. 

Antes de la plataforma, los usuarios enfrentaban:

• Falta de confianza: no encontraban pruebas visuales ni respaldo oficial de las certificaciones.
• Información fragmentada: procesos dispersos en redes y mensajes poco claros.
• Fricción en el registro: no existía un flujo digital eficiente, lo que generaba abandono e inseguridad.

El desafío era claro: construir un producto digital desde cero que resolviera las barreras de credibilidad y simplificara el acceso, siempre alineado al objetivo de negocio: aumentar inscripciones confiables.

[Investigación con stakeholders]

🗣️ Los stakeholders revelaron que la confianza debía ser visible y el producto tenía que actuar como un sistema de conversión

Entrevisté a stakeholders de IECEO para entender objetivos de negocio, límites operativos y expectativas institucionales. El hallazgo más relevante fue que la web debía generar confianza inmediata, mostrando certificaciones oficiales y facilitando el contacto directo.
Pregunté: ¿qué quiere lograr el instituto? ¿qué debe comunicar? ¿qué limites existen (gestión, recursos, normativas)?

Insight clave: la plataforma no podía ser solo informativa, debía actuar como un sistema de conversión que transformara visitas en inscripciones confiables.

Entrevista con Stakeholders

🔑

Hallazgos Clave

Objetivo principal de la web

Generar confianza, mostrar certificaciones y credenciales, captar clientes.

Valor diferencial

IECEO es la primera certificadora en Oaxaca con validez oficial del instituto CONOCER, ofreciendo modalidad presencial y online.

Usuarios objetivo

Profesionistas, estudiantes y empresas que requieren validar sus habilidades.

Necesidad a resolver

Dar confianza y respaldo oficial frente a la falta de certificaciones que validen habilidades.

Acción principal esperada

Llenar formulario y landing page para contacto directo.

KPIs iniciales

Formularios enviados, clics en WhatsApp y visitas a páginas de certificación.

[Investigación con usuarios]

👩🏻👨🏻 Los usuarios confirmaron que sin pruebas de validez y contacto inmediato abandonarían cualquier intento de inscripción

 Entrevistas con profesionistas y PyMEs revelaron motivaciones, fricciones y la necesidad de confianza, claridad y accesibilidad en todo momento.

Entrevisté a usuarios interesados en certificarse (profesionistas, empleados, estudiantes). La mayoría buscaba validar habilidades laborales pero tenían dudas recurrentes sobre la validez oficial de las certificaciones.

Entrevistas con usuarios potenciales

🔑

Hallazgos Clave

Contexto personal

Usuarios en áreas diferentes que requieren certificarse como parte de su trabajo o por voluntad propia; algunos ya han tenido experiencias previas con certificaciones (algunas inconclusas).

Motivaciones

Buscan cumplir con requisitos laborales, ven la certificación como un valor agregado para su formación a veces como un requerimiento para diferenciarse de otros profesionistas.

Confianza y validez

La confianza depende de testimonios, avales oficiales y registro ante una institución acreditada. La duda más frecuente es la validez oficial y normatividad.

Contacto y accesibilidad

Prefieren WhatsApp como canal principal y esperan respuesta inmediata.

Fricciones

Principales motivos de descarte son las malas reseñas, ausencia de ejemplos de certificados, no mostrar número de registro.

Estos hallazgos confirmaron que el diseño debía priorizar señales de credibilidad, microcopy claro y un flujo de registro simplificado.
La principal barrera era la desconfianza en la validez de las certificaciones. Además, los usuarios necesitaban canales de contacto directo e inmediatos como WhatsApp para resolver dudas.
La investigación también evidenció que la ausencia de ejemplos de certificados y testimonios oficiales generaba fricción en el proceso de registro.

[Benchmark competitivo]

📊 Los competidores transmitían credibilidad pero fallaban en usabilidad, lo que abrió la oportunidad de diferenciar a IECEO con un flujo más claro y usable

El análisis competitivo reveló un mercado saturado de logos y sellos, pero con procesos dispersos y formularios complejos. IECEO podía destacar con claridad y simplicidad.

Analicé plataformas de certificación y educación con validez oficial para identificar patrones de UX. El benchmark reveló que los competidores destacan sellos y logos de confianza, pero cometen errores en la arquitectura de información (menús dispersos, catálogos largos sin filtros) y en la usabilidad de formularios (extensos, poco claros).

Insight clave: IECEO tenía la oportunidad de diferenciarse con un diseño centrado en la conversión, que combinara confianza visible con experiencias de usuario más fluidas.

Benchmark de institutos

🔑

Hallazgos Clave

Credibilidad

Los competidores muestran sellos oficiales y logos.

Arquitectura de información

Menús dispersos y poco jerárquicos.

Catálogo de certificaciones

Listados visibles pero largos y sin filtros.

Fricciones:

Textos largos, falta de claridad en el flujo inicial.

Contacto:

Uso de WhatsApp constante (flotante o en header).

[Primer impacto en decisiones de diseño]

🎯 La investigación revela las primeras decisiones en el diseño

Los hallazgos de la investigación definieron los pilares estratégicos del diseño:

1. Confianza primero: mostrar sellos oficiales, testimonios y certificados desde la home.
2. Contacto inmediato: integrar WhatsApp como canal visible en el header y landing.
3. Menos fricción: simplificar el formulario inicial reduciendo campos y haciéndolo más claro.

Esto marcó la transición del research a la fase de arquitectura de información y wireframes, donde cada decisión buscaba alinear la experiencia digital con los objetivos de negocio: generar inscripciones confiables y medibles.

[Síntesis]

🧩 Más de 150 hallazgos se sintetizaron en seis pilares de diseño que guiaron toda la estrategia

El análisis de entrevistas y observaciones se sintetizó en un diagrama de afinidad que reveló patrones de comportamiento, necesidades y barreras de los usuarios frente a la certificación laboral.

Zoomable image
Zoomable image

Agrupé más de 150 hallazgos en seis categorías que se convirtieron en los pilares de diseño del producto digital. Este proceso permitió transformar la complejidad de la investigación en decisiones claras sobre arquitectura de información, microcopy y signals de confianza que impactarían directamente en la conversión.

Insights principales de la investigación

🤝 Confianza y credibilidad
Necesidad de mostrar trust signals visibles: sellos oficiales, testimonios, casos de éxito y número de registro oficial.

📓 Información esencial

Claridad en costos, requisitos y listado de certificaciones, eliminando puntos de fricción en el user flow.

🏆 Motivaciones

Certificación como requisito laboral y diferenciador profesional en un mercado competitivo.

💬 Contacto

Preferencia por WhatsApp como canal principal de accesibilidad inmediata y soporte directo.

🪪 Apoyos y materiales

Ejemplos de certificados, materiales descargables y catálogos filtrables que aportan transparencia.

💢 Frenos

Formularios largos, falta de transparencia y ausencia de evidencias de validez oficial como principales conversion barriers.

Estos seis pilares se transformaron en criterios de diseño: credibilidad al frente, claridad en la información, accesibilidad en el contacto y reducción de fricciones en el registro. Con esto, se definió la arquitectura de información y los primeros wireframes que darían forma a la plataforma.

[Personas]

👥 Dos arquetipos clave mostraron que profesionistas y PyMEs compartían la necesidad de confianza inmediata pero diferían en flexibilidad y procesos empresariales

Laura buscaba rapidez y validez; Mario requería planes para equipos y facturación clara. Estos perfiles guiaron decisiones de flujo y contenido.

A partir de la investigación, definí dos arquetipos que reflejan los perfiles más representativos. Estas personas fueron esenciales para priorizar claridad en la información, señales de confianza y contacto inmediato en el diseño de la plataforma.

Laura Hernández

“Quiero una certificación que me respalde como profesional y que no me quite tiempo de mi trabajo.”

Edad: 34 años

Ocupación: Coordinadora de capacitación en una empresa mediana

Educación: Licenciatura en Administración

Lugar de residencia: Oaxaca de Juárez, Oaxaca

[Personalidad]

Responsable

Organizada

Práctica

[Contexto]

Profesional con experiencia en capacitación que busca certificarse en RedConocer para validar su perfil y mejorar el entrenamiento que ofrece a su equipo

[Objetivos]

Obtener certificación oficial como requisito laboral.

Validar su experiencia y mejorar su CV para crecer en su carrera.

Acceder a modalidades flexibles (prefiere online).

[Dolores]

Le preocupa el costo de la certificación.

Necesita ver registro oficial y ejemplos de certificados para confiar.

Se frustra con procesos poco claros o trámites largos.

[Expectativas]

Ver modalidad, requisitos, duración y precio sin tantos movimientos.

WhatsApp como contacto principal y respuesta inmediata (<10 min)

Acceso a guías de trabajo y módulos de ejemplo antes de inscribirse.

Insight de diseño:
Para Laura, el formulario debía ser breve y transparente, con información clara y señales visibles de validez oficial.

Mario López

“Necesito certificar a mi equipo de forma rápida y confiable para tener un equipo calificado.”

Edad: 40 años

Ocupación: Dueño de una PyME en Oaxaca (sector servicios)

Educación: Bachillerato concluido

Lugar de residencia: Tlacolula, Oaxaca

[Personalidad]

Orientado a resultados

Emprendedor

Pragmático

[Contexto]

Quiere certificar a varios empleados para cumplir con requisitos de clientes y mejorar la imagen de su empresa.

[Objetivos]

Certificar a su equipo de forma rápida y confiable.

Acceder a procesos claros, con facturación y soporte administrativo.

Diferenciar a su empresa frente a la competencia.

[Dolores]

Precios y tiempos no claros generan desconfianza.

No quiere invertir tiempo en procesos confusos o excesivos trámites.

Malas reseñas o falta de información oficial son motivo de descarte inmediato.

[Expectativas]

Página clara y transparente con proceso en 3 pasos.

Contacto directo (WhatsApp o llamada) para resolver dudas rápido.

Ver sellos oficiales y testimonios de empresas similares que ya se certificaron.

Insight de diseño:
Para Mario, el diseño debía priorizar un flujo simple en 3 pasos y mostrar testimonios para generar confianza.

🔑

Puntos clave comunes

Confianza y credibilidad
Mostrar sellos oficiales, testimonios y ejemplos de certificados.

Clarity first
Costos, tiempos y requisitos visibles desde el inicio.

Accesibilidad inmediata
WhatsApp como canal principal de soporte.

Simplicidad
Procesos cortos (máx. 3 pasos) que evitan abandono.

Flexibilidad
Modalidades online/presencial para diferentes necesidades.

Estas personas sirvieron como referencia constante en las fases de empathy map, user journey y arquitectura de información, asegurando que las decisiones de diseño resolvieran pain points reales y no solo supuestos de negocio.

[Empathy map]

🧠 Los mapas de empatía profundizaron en motivaciones y frenos, mostrando que la credibilidad y el contacto inmediato eran determinantes

Los empathy maps de Laura y Mario confirmaron que la falta de pruebas de validez y procesos largos eran los principales puntos de fricción. Estos mapas fueron clave para priorizar confianza, simplicidad y contacto inmediato en la arquitectura de información y los flujos de inscripción.

Zoomable image

Laura busca una certificación rápida, válida y confiable, pero se frustra cuando no encuentra sellos oficiales o ejemplos de certificados. Sus pain points giran en torno a precios poco claros y procesos largos, mientras que sus ganancias deseadas son flexibilidad online y contacto inmediato.

🔑

Impacto en diseño

Incorporar trust signals visibles (sellos, testimonios, ejemplos de certificados).

Simplificar el flujo de inscripción para que no demande tiempo extra.

Añadir guías descargables como material previo a la inscripción.

Zoomable image

Mario necesita certificar a su equipo completo de manera confiable y ágil. Se desmotiva cuando no encuentra opciones empresariales claras o propuestas personalizadas. Lo que más valora es un proceso corto, facturación clara y un panel de seguimiento.

🔑

Impacto en diseño

Crear una sección específica para empresas, con precios por grupo.

Diseñar un flujo de registro ágil en 3 pasos con confirmación inmediata.

Proveer un panel de control para dar seguimiento al avance de su equipo.

Los Empathy Maps permitieron pasar de la investigación a una comprensión profunda de motivaciones y barreras. Gracias a ellos, cada decisión posterior de UX/UI se enfocó en reducir fricciones y aumentar la confianza, alineando la experiencia digital con los objetivos de negocio (inscripciones confiables y escalables).

[User journey]

🛤️ Los recorridos revelaron la importancia de un flujo rapido y con retroalimentación casi inmediata para no abandonar rapidamente

Los Journey Maps de Laura y Mario revelaron cómo los usuarios transitan desde el primer contacto hasta la decisión de inscribirse. Estos mapas permitieron identificar puntos de fricción críticos, momentos de confianza y oportunidades claras para diseñar un flujo de conversión más eficiente.

Laura Henández (Profesionista individual)

🎯

Insight

 Laura busca una certificación rápida y válida, pero se enfrenta a costos poco claros y testimonios poco creíbles. Su confianza aumenta al ver requisitos y reseñas, pero se frustra con procesos poco específicos y pagos limitados.

🔑

Impacto en el diseño

Mostrar sellos oficiales y número de registro en la home.

Ofrecer testimonios en video y ejemplos de certificados reales.

Incluir WhatsApp fijo como CTA principal, con respuestas rápidas y FAQs automatizadas.

Diversificar métodos de pago y mostrar guías descargables antes de inscribirse.

Mario López (empresario PyME)

🎯

Insight

Mario necesita certificar a varios empleados a la vez, pero encuentra páginas genéricas y sin propuestas personalizadas. Se preocupa por la falta de claridad en precios por grupo y la ausencia de un flujo adaptado a empresas.

🔑

Impacto en el diseño

Crear un bloque “Certifica a tu empresa” con planes diferenciados.

Simplificar formularios con campos mínimos y confirmación inmediata.

Incluir propuestas personalizadas en PDF con desglose de beneficios y condiciones de facturación.

Diseñar un panel de seguimiento para monitorear el avance del equipo.

Laura busca una certificación rápida y válida, pero se enfrenta a costos poco claros y testimonios poco creíbles. Su confianza aumenta al ver requisitos y reseñas, pero se frustra con procesos poco específicos y pagos limitados.

Zoomable image

Mario necesita certificar a varios empleados a la vez, pero encuentra páginas genéricas y sin propuestas personalizadas. Se preocupa por la falta de claridad en precios por grupo y la ausencia de un flujo adaptado a empresas.

Zoomable image

Los User Journeys confirmaron que el diseño debía enfocarse en credibilidad visible, simplicidad de flujos y contacto inmediato. Estos hallazgos se tradujeron directamente en la arquitectura de información y los primeros wireframes, asegurando que cada pantalla respondiera a necesidades reales y redujera fricciones en el proceso de inscripción.

[User Stories]

📖 La historias de usuario transformaron pain points en requerimientos claros para diseñar confianza, claridad y accesibilidad

Los user stories de Laura y Mario se convirtieron en guías para priorizar transparencia, flujos cortos y contacto inmediato.

👩🏻 Laura Hernández

Como profesionista que busca certificarme,

quiero ver el número de registro y los sellos oficiales en la home,

para confiar en que la certificación es válida.

Como usuaria que prefiere contacto rápido,
quiero enviar mis dudas por WhatsApp,
para recibir una respuesta inmediata sin llenar formularios largos.

👨🏻 Mario López

Como dueño de empresa,

quiero ver una sección dedicada a certificar equipos completos,

para saber que IECEO atiende también a negocios y no solo a individuos.

Como cliente empresarial,

quiero llenar un formulario corto y recibir confirmación automática,

para estar seguro de que mis datos fueron recibidos y atendidos.

🔑

Insights de la etapa de definición

La confianza se construye mostrando trust signals visibles (sellos oficiales, número de registro, ejemplos de certificados).

Los usuarios rechazan procesos largos; esperan flujos simples y rápidos (máx. 3 pasos).

El contacto inmediato vía WhatsApp es percibido como el canal más confiable.

Precios, tiempos y requisitos claros son determinantes para avanzar en la decisión.

Formularios de registro deben ser cortos, claros y con confirmación automática.

Existen diferencias críticas entre perfiles:
• Mario busca planes empresariales y facturación.
• Laura valora flexibilidad online y rapidez.

Las ganancias esperadas incluyen confianza en la validez, procesos ágiles y materiales de apoyo que transmitan seriedad.

Tanto empresas como profesionistas valoran testimonios diferenciados que refuercen la validez.

Estas historias y aprendizajes fueron la base para definir la arquitectura de información y los primeros wireframes, asegurando que cada decisión de diseño respondiera a necesidades reales y eliminara fricciones en el conversion flow.

[Priorización]

📊 La priorización con ICE Scoring aseguró que las decisiones de diseño atacaran primero los puntos de mayor impacto en confianza y conversión

Este método permitió enfocar recursos en trust signals, procesos claros y contacto inmediato, dejando en backlog lo menos crítico.

No todos los requerimientos podían implementarse al mismo tiempo. Para asegurar que el diseño respondiera a impacto real en usuarios y viabilidad técnica, utilicé el método ICE Scoring (Impact, Confidence, Ease) para priorizar.

Elegí ICE Scoring porque:
• Es una metodología ágil y rápida que permite comparar iniciativas diversas sin necesidad de grandes datasets.
• Equilibra impacto en la experiencia del usuario, confianza en la evidencia obtenida de research, y la facilidad técnica de implementación.
• Era ideal para un proyecto con plazo corto y recursos limitados, donde necesitaba justificar qué debía diseñarse primero y qué podía quedarse en backlog.

Zoomable image

Cada iniciativa fue evaluada y ordenada de acuerdo con su impacto en la experiencia del usuario y su viabilidad técnica.

🔑

Insights de ICE Scoring

🛡️ Confianza primero (puntaje 640)
• Mostrar sellos oficiales y número de registro en la home
• La confianza era el detonador de todo el conversion flow.

📊 Procesos simples y visuales (puntaje 448)
• Explicar el proceso en pasos visuales reduce la percepción de burocracia.
• Los usuarios quieren claridad en el camino antes de tomar una decisión.

💬 Contacto inmediato = decisión más rápida (puntaje 336-252)
• WhatsApp CTA fijo y formulario optimizado confirmaban la expectativa de rapidez y cero fricción.

🖼️ Prueba tangible (puntaje 336)
• Ejemplos de certificados reales generan confianza.
• “Ver para creer” es clave: si no muestran el certificado, la decisión se frena.

🏢 Segmentación empresarial (puntaje 240-80)
• Bloque “Certifica a tu empresa” y paquetes por volumen revelan que el segmento empresarial requiere soluciones diferenciadas, aunque su implementación es más compleja.

🗣️ Refuerzos de credibilidad (puntaje 180-96)
• Testimonios diferenciados, tabla comparativa de modalidades y FAQ funcionan como apoyo, pero no son los detonadores principales de conversión.

📧 Seguridad post-contacto (puntaje 252)
• Correo de confirmación inmediata genera tranquilidad y elimina la duda de si la solicitud fue recibida.

Con esta priorización, definí los requisitos mínimos de alto impacto que guiarían la arquitectura de información y wireframes iniciales, asegurando que el diseño atacara primero los pain points más críticos del user journey.

[Diseño estructural]

📐 La arquitectura se diseñó para ser simple y transparente, guiando desde la confianza inicial hasta el registro sin fricciones, con 4 secciones claras: Inicio, Nosotros, Certificaciones y Contacto

Con los hallazgos priorizados en el ICE Scoring, diseñé una arquitectura de la información enfocada en reducir fricciones, destacar señales de confianza y guiar al usuario hacia la inscripción.
El objetivo fue simplificar la navegación, hacer visible la confianza desde el inicio y reducir fricciones en el registro.
La estructura se organizó en cuatro secciones principales que responden tanto a los dolores como a las motivaciones detectadas en los empathy maps y journey maps.

• Inicio: Diseñada para generar confianza inmediata, hero con CTA visible, sellos oficiales y número de registro, proceso explicado en pasos visuales, bloque empresarial y testimonios destacados.
• Nosotros: Refuerza credibilidad institucional mostrando filosofía, valor agregado y señales de confianza.
• Certificaciones: Ofrece un listado claro con requisitos, duración, costos y ejemplos tangibles de certificados.
• Contacto: Presenta un formulario optimizado con campos mínimos y confirmación automática, además de datos de contacto visibles.

Zoomable image

Esta arquitectura convierte los insights en una estructura funcional de navegación, alineada con los objetivos de negocio: generar inscripciones confiables y reducir abandono.

[User flow]

🗺️ El user flow mostró cómo los usuarios individuales y empresariales podían llegar a la inscripción en menos pasos y con mayor seguridad

El objetivo fue reducir puntos de fricción y asegurar que los usuarios encontraran un camino claro y confiable. El flujo revela tres prioridades estratégicas:
1. Confianza al inicio: los usuarios revisan sellos oficiales, registro válido y testimonios antes de avanzar.
2. Claridad en el medio: la sección de certificaciones ofrece requisitos, costos y duración sin ambigüedad.
3. Contacto inmediato al final: integración de WhatsApp como CTA y un formulario optimizado con confirmación automática.

Además, el flujo diferencia entre usuarios individuales (Laura) y empresariales (Mario), garantizando que ambos segmentos tengan un recorrido adaptado a sus necesidades.

Zoomable image

🔑

Impacto en diseño

Friction points identificados
Procesos largos, falta de ejemplos de certificados, formularios extensos.

Decisiones derivadas
Incluir ejemplos tangibles de certificados, simplificar formularios a campos mínimos, habilitar contacto directo en todo momento.

El user flow revela que la experiencia debe ser ágil, transparente y diferenciada: confianza al inicio, información clara en medio y contacto inmediato al final.

[Identidad de marca]

⚙️ Construcción de identidad visual que da significado al crecimiento, solidez y conexión de la misión empresarial.

La identidad de IECEO no se diseñó solo como un elemento estético, sino como una extensión de la estrategia UX/UI definida en la investigación: transmitir profesionalismo, credibilidad y accesibilidad desde el primer contacto.

Zoomable image

🪾

Nombre y acrónimo (IECEO)

El acrónimo IECEO proviene de Instituto Evaluador de Competencias Laborales y Consultoría Empresarial de Oaxaca. Se eligió esta denominación por su sencillez, facilidad de pronunciación y recordación, lo que refuerza la identidad institucional y proyecta profesionalismo y confianza.


Logotipo

La forma del logotipo evoca un árbol de conocimiento y una red de competencias, símbolos que representan crecimiento, solidez y conexión. Esta imagen está directamente ligada a la misión del instituto: evaluar, fortalecer y certificar las capacidades laborales, impulsando el desarrollo profesional y empresarial en Oaxaca y en el país.


En conjunto, el nombre y el logotipo reflejan la esencia de IECEO como una institución moderna, accesible y comprometida con el aprendizaje y la mejora continua.

[Identidad visual]

🎨 La identidad visual se construyó como señal de confianza y profesionalismo

Entendí que los usuarios necesitaban confiar desde el primer contacto. Por eso, la identidad visual debía transmitir claridad, profesionalismo y credibilidad.

Zoomable image
Zoomable image

La paleta usa tonos fríos (azules y neutros) que transmiten seriedad, confianza y solidez institucional. Los secundarios aportan frescura y legibilidad, mientras que los neutros aseguran contraste y accesibilidad. En conjunto, refuerzan una imagen profesional y moderna.

Se eligió Roboto por su claridad y legibilidad digital, ideal para jerarquías en títulos y cuerpo de texto. Montserrat en botones resalta las acciones clave con un estilo geométrico y moderno. La combinación asegura lectura fluida y foco en la acción.

[Wireframes de baja fidelidad]

✏️ Los primeros wireframes permitieron validar rápidamente los flujos y jerarquias antes de invertir en el diseño visual

El prototipado rápido permitió iterar sobre estructura y contenido sin distracciones visuales.

El objetivo fue traducir la arquitectura en pantallas funcionales, asegurando que los usuarios pudieran encontrar sin esfuerzo los elementos clave:
• Trust signals visibles: sellos oficiales y número de registro en la home.
• Claridad en certificaciones: listado accesible con requisitos, duración y costos.
• Proceso simplificado: pasos explicados de manera clara y progresiva.
• Contacto inmediato: WhatsApp y formulario como salidas rápidas de acción.

Zoomable image

En esta etapa se tomó la decisión estratégica de no incluir una sección específica para empresas, ya que los stakeholders priorizaron concentrar esfuerzos en profesionistas individuales como primer segmento objetivo.
Esta decisión permitió enfocar la experiencia en un flujo más claro y directo, sin dispersar recursos en un público secundario en esta fase inicial.

El layout debía ser simple, legible y directo, priorizando confianza al inicio, claridad en medio y contacto al final. Esta validación temprana redujo riesgos antes de invertir tiempo en diseño visual detallado.

[Wireframes de mediana fidelidad]

🖥️ Los wireframes de mediana fidelidad resolvieron cada insight con soluciones claras de confianza, transparencia y contacto inmediato

Cada pantalla fue diseñada para responder a hallazgos: certificados tangibles, cards claras, formularios simplificados y WhatsApp visible.

[Hero y proceso]

Los usuarios necesitaban confianza inmediata y claridad en el proceso.

Zoomable image
1
Navbar con registro visible

El número de registro oficial se mantuvo fijo en el navbar, reforzando confianza desde cualquier punto de la navegación.

2
Hero con CTA claro

Acción destacada que facilita contacto inmediato, alineada con la necesidad de reducir pasos para conversión.

3
Hero con sellos oficiales

Señales de validez institucional, priorizadas tras los insights sobre desconfianza en certificaciones.

4
Proceso en 4 pasos visuales

Representación clara y simple que elimina la percepción de trámites burocráticos.

[Inicio]

Mostrar ejemplos reales y testimonios oficiales como trust signals decisivos.

Zoomable image
5
Certificado tangible

Imagen real de un certificado para eliminar dudas sobre autenticidad y reforzar la idea de “ver para creer”.

6
Descripción

Explicación simple del certificado.

7
Puntos clave

Desglose de elementos de validez (institución, fecha, código QR).

8
Testimonios destacados

Historias de usuarios reales que validan la experiencia con IECEO, respondiendo al dolor de falta de credibilidad.

[Certificados]

Los usuarios pedían claridad en requisitos, nombres y codígo de certificación para sentirse seguros al elegir.

Zoomable image
9
Listado visual organizado

Cada tarjeta muestra imagen, código y nombre del estándar para evitar confusión y dispersión de información.

10
Estandar de competencia

Codígo reconocido por el instituto conocer el cual da validez oficial al estandar

11
Nombre del estandar

Se agrega el nombre completo oficial del estandar de competencia.

[Certificado a detalle]

Reducir fricciones en costos, pagos y contacto fue clave para generar seguridad y conversión.

Zoomable image
12
Card de certificado principal

Imagen y descripción clara como protagonista, respondiendo a la necesidad de comprensión inmediata.

13
Requisitos y ocupaciones relacionadas

Información práctica y simple para que el usuario entienda en qué contexto aplica el certificado.

14
CTA card con beneficios

Resumen de garantías y ventajas (“Certificación oficial válida por 5 años, avalada por CONOCER y SEP”).

15
Contacto directo por WhatsApp

Refuerza el canal preferido por usuarios, garantizando inmediatez.
Ademas de un botón flotante presente.

16
Formulario optimizado

Solo dos campos obligatorios (correo y mensaje), alineado con el insight de reducir fricciones en el registro.

17
Opciones de pago visibles

Claridad en métodos y flexibilidad, eliminando dudas sobre el proceso final.

🔑 Los aprendizajes confirmaron que confianza, claridad y simplicidad eran los pilares irrenunciables para avanzar al diseño final, traducido en una experiencia digital clara, confiable y orientada a la conversión.

📐

Wireframes de mediana fidelidad

🏠 Inicio enfocado en confianza inmediata

Con los flujos validados y las jerarquías visuales claras, el siguiente paso fue avanzar hacia los wireframes de alta fidelidad, aplicando la identidad visual final y ajustando microinteracciones para entregar una experiencia profesional y confiable.

🧾 Sección “Nosotros” sintetizada

Filosofía y valores institucionales presentados de forma breve, como señal de credibilidad y profesionalismo sin saturar al usuario.

📜 Certificaciones en formato de cards

Tarjetas escaneables con requisitos básicos y botón de detalle, lo que facilita la exploración y la comparación rápida entre certificaciones.

🖼️ Página de detalle clara

Cada certificación incluye requisitos, duración y un ejemplo visual, respondiendo al dolor detectado en entrevistas sobre falta de transparencia y ejemplos reales.

💬 Contacto optimizado:
Formulario más corto y directo, acompañado de opciones adicionales (WhatsApp, teléfono, e-mail) para asegurar inmediatez y accesibilidad.

🎯 Simplificación estratégica

Se decidió pausar la sección empresarial para priorizar al público principal (profesionistas individuales), agilizando la primera versión del producto digital y reduciendo dispersión de recursos.

Con los flujos validados y las jerarquías visuales claras, el siguiente paso fue avanzar hacia los wireframes de alta fidelidad, aplicando la identidad visual final y ajustando microinteracciones para entregar una experiencia profesional y confiable.

[Wireframes de alta fidelidad]

🎨 Los wireframes de alta fidelidad aplicaron identidad visual y microinteracciones para convertir confianza en acción

La integración de marca, certificados reales y CTAs visibles reforzaron credibilidad y facilitaron la conversión.

Zoomable image

[Producto final]

🌐 El producto final se implementó en WordPress como una plataforma funcional, autogestionable y lista para escalar

La versión real incluyó arquitectura clara, diseño responsivo, formularios optimizados y analítica integrada.

🔑

Insights de diseño producto final

Empatizar: Generar confianza desde el primer vistazo

• Desde la investigación descubrimos que la validez oficial era la principal preocupación de los usuarios.

• El diseño final coloca en la home sellos oficiales, número de registro y la imagen del certificado real para disparar confianza inmediata.

Definir: Simplificación del proceso
• Los usuarios rechazaban trámites largos y confusos.
• La versión final muestra el camino en 4 pasos claros, lo que reduce fricción y transmite transparencia.

Idear: Diferenciar segmentos

• En wireframes iniciales se exploró una sección para empresas, pero los stakeholders decidieron priorizar profesionistas.

• El diseño final refleja esa estrategia, enfocándose en un flujo único y claro, pero escalable para versiones futuras.

Prototipar: Iteración de flujos y arquitectura

• Con los journey maps y el user flow se detectaron puntos de abandono (formularios extensos, falta de respuesta en WhatsApp).

• El resultado: formulario corto con confirmación automática y un CTA de WhatsApp fijo para contacto inmediato.

Testear: Priorización con ICE

• El ICE Scoring reveló que los factores de mayor impacto eran confianza, simplicidad y contacto inmediato.

• Estos elementos se integraron en la versión final como pilares del diseño: hero con sellos, pasos visuales, cards de certificaciones y contacto accesible en todo momento.

Diseño visual: Identidad y usabilidad

• Se aplicó la paleta de colores fríos (azules, blancos, grises) para transmitir seriedad y profesionalismo, con acentos modernos para accesibilidad.

• La tipografía Roboto asegura legibilidad en todo el contenido, mientras que Montserrat en los botones da fuerza a las acciones clave.

Resultados esperados: Impacto en la experiencia

• Un sitio que comunica credibilidad en segundos, guía al usuario en un recorrido simple y culmina en una acción clara (contacto o inscripción).

• El diseño está alineado con los objetivos de negocio (más inscripciones) y con las necesidades reales de los usuarios (confianza, claridad, rapidez).

[Resultados e impacto]

📊 El diseño revelo el tiempo en página en un 52-57 seg promedio

La plataforma no solo resolvió fricciones, sino que sentó bases sólidas para escalar a planes empresariales y seguir midiendo resultados con GA4/Clarity.

[Aprendizajes]

🧩 Aprendí que una buena estrategia es el detonador de conversión, que menos es más en formularios y que la identidad visual puede ser un trust signal estratégico

Estos aprendizajes refuerzan mi capacidad para liderar proyectos end-to-end y entregar productos digitales con impacto real.

[Casos de estudio]

Select this text to see the highlight effect