[Caso 03]
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]
IECEO: Diseño desde cero de una plataforma digital confiable
De una idea inicial a un sitio web completo que transmite confianza, simplifica procesos y facilita la inscripción en certificaciones oficiales.
[Resumen del proyecto]
Diseñé desde cero la página web del Instituto Evaluador de Competencias (IECEO), creando una solución digital que comunicara validez oficial, organizara la información de forma clara y ofreciera un flujo de registro sencillo y confiable.
El proyecto partió de la fase inicial, investigación, definición de usuarios y arquitectura, hasta llegar a la construcción visual final, integrando UX Research, Design Thinking y diseño de interfaz en un mismo proceso.
[Problema identificado]
IECEO no contaba con una presencia digital estructurada, lo que generaba tres retos principales:
• Falta de confianza: sin una web clara, los usuarios dudaban de la validez de las certificaciones.
• Sobrecarga y dispersión de información en canales externos que no mostraban procesos claros.
• Ausencia de flujos digitales que facilitaran contacto o registro inmediato.
El desafío fue construir desde cero una experiencia digital transparente y confiable, capaz de generar credibilidad, simplificar la decisión de certificarse y aumentar las inscripciones.
[Area de enfoque]
Certificación
Educación continua
Capacitación profesional
B2C
[Mi rol]
UX Research
Interaction Design
UX Writing
UX/UI Design
Arquitectura de la información
Data & Analytics
[Herramientas utilizadas]
Figma
WordPress
GA4
Microsoft Clarity
Figjam
ChatGPT
[Plataforma]
Corporate Website
Mobile
Responsive
[Duración del proyecto]
Julio 2023 - Agosto 2023
[Panorama estratégico]
🌐📊
IECEO Visión y expanción
IECEO busca consolidarse como uno de los principales centros de certificaciones con validez oficial en la ciudad de Oaxaca, ofreciendo un modelo híbrido que combina experiencias presenciales y plataformas digitales de aprendizaje. Desde un enfoque de UX/UI orientado al usuario, la iniciativa se centra en diseñar experiencias accesibles, escalables y centradas en las necesidades reales de los estudiantes, tanto a nivel local como nacional.
En el ámbito digital, IECEO apuesta por una estrategia de expansión online para llegar a toda la República Mexicana, aumentando la tasa de inscripción y facilitando el acceso a certificaciones de calidad. Con el respaldo de organismos reconocidos como Red Conocer e ICEMéxico, se asegura credibilidad y confianza en la experiencia del usuario.
Este contexto permite identificar oportunidades de diseño en áreas clave como la arquitectura de la información, la optimización de flujos de usuario y la implementación de interfaces intuitivas que potencien el alcance del producto digital y fortalezcan su propuesta de valor en un mercado cada vez más competitivo.
[Analisis e investigación]
💡
Durante la fase de investigación y descubrimiento se permitió comprender tanto la visión del negocio como las necesidades reales de los usuarios y el contexto competitivo.
Esta fase se dividió en tres frentes: entrevistas con stakeholders, entrevistas con usuarios potenciales y un benchmark competitivo de certificadoras.
Entrevista con Stakeholders
🎯
Objetivo
Entender la visión institucional de IECEO, sus metas de negocio y los elementos estratégicos que debía cubrir la nueva página web para alinear los objetivos de certificación con la experiencia digital.
🔑
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.
Benchmark competitivo
🎯
Objetivo
Analizar el ecosistema digital de certificadoras y plataformas educativas con validez oficial para identificar mejores prácticas en UX/UI, detectar oportunidades de diferenciación y asegurar que la propuesta de IECEO estuviera alineada con los estándares del mercado.
🔑
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).
Entrevistas con usuarios potenciales
🎯
Objetivo
Identificar las necesidades, motivaciones y puntos de dolor de usuarios interesados en certificaciones, con el fin de diseñar una experiencia digital que genere confianza, simplifique la decisión y fomente la conversión.
🔑
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.
[Diagrama de afinidad]
💡
Con la información de entrevistas y observaciones, se realizó un diagrama de afinidad para organizar patrones de comportamiento, necesidades y frustraciones de los adultos mayores. Este proceso permitió transformar datos dispersos en insights clave de diseño.
Insights de la investigación
👥 Conexión social significativa
Buscan relaciones auténticas con familiares, amigos y nuevas personas con intereses en común.
📱 Tecnología simple y confiable
Prefieren herramientas fáciles, conocidas y seguras como WhatsApp, llamadas y mensajes claros.
🙋 Aprendizaje acompañado
Necesitan explicaciones paso a paso y apoyo cercano para usar nuevas tecnologías sin frustración.
💬 Conversaciones con valor
Disfrutan hablar de hobbies, pasatiempos, consejos prácticos y experiencias compartidas.
🚧 Limitaciones y retos
Enfrentan barreras como desconfianza en apps nuevas, poca movilidad física y dificultad para relacionarse.
💡
A partir del diagrama de afinidad y los insights, necesitaba dar rostro a las necesidades y fricciones detectadas. Por eso definí protopersonas que representan a los perfiles más comunes, con sus objetivos, motivaciones y dolores, para orientar el diseño hacia soluciones reales y centradas en el usuario.
[Personas]
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.
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.
🔑
Puntos clave
• La confianza depende de mostrar sellos oficiales, testimonios y ejemplos de certificados.
• La claridad en costos, tiempos y requisitos es un factor decisivo para inscribirse.
• El contacto inmediato vía WhatsApp es el canal preferido y esperado.
• La simplicidad del proceso (máx. 3 pasos) evita abandono y genera seguridad.
• La flexibilidad de modalidades (presencial y online) amplía el alcance y reduce fricciones.
💡
Tras definir las protopersonas, decidí profundizar en sus emociones y comportamientos a través de empathy maps. Este paso me permitió entender no solo qué buscan Mario y Laura, sino también cómo lo piensan, sienten, escuchan y expresan en su día a día. De esta manera, pude identificar con mayor claridad los puntos de dolor y las ganancias que el diseño debía resolver.
[Empathy map]
[User journey map]
💡
Analizar los recorridos de ambos perfiles me permitió entender los altibajos emocionales que experimentan en sus interacciones digitales:
Rodolfo vive la socialización en WhatsApp como algo directo, cuidadoso y cercano, dependiendo mucho de la reciprocidad para mantenerse motivado.
Carmen vive Facebook como un espacio colectivo y de aporte, donde disfruta la retroalimentación, pero se frustra cuando no recibe respuesta.
La experiencia digital de los adultos mayores se caracteriza por emociones intensas y fluctuantes, que van desde la ilusión inicial hasta la frustración cuando no hay reciprocidad.
[User Stories]
👩🏻 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 al mostrar sellos oficiales, número de registro y ejemplos de certificados.
Los usuarios rechazan procesos largos y burocráticos; esperan flujos simples (máx. 3 pasos).
El contacto inmediato vía WhatsApp es percibido como el canal más confiable y esperado.
Precios, tiempos y requisitos claros son determinantes para avanzar en la decisión.
El formulario de registro debe ser corto, claro y con confirmación automática para generar seguridad.
Existen diferencias clave entre perfiles: Mario busca planes empresariales y facturación; Laura valora flexibilidad, modalidad online y rapidez.
Las ganancias esperadas incluyen: confianza en la validez, procesos ágiles, y materiales de apoyo que transmitan seriedad y acompañamiento.
Tanto empresas como profesionistas valoran testimonios diferenciados que refuercen la validez.
💡
Despues de recorrer todas las fases de definición, obtuve una visión clara de qué necesitan y esperan los usuarios.
Estos aprendizajes revelaron múltiples oportunidades de diseño, pero era necesario priorizar cuáles generarían mayor impacto en la experiencia y al mismo tiempo serían viables para implementar. Para lograrlo, utilicé el marco ICE Scoring (Impact, Confidence, Ease), que me permitió ordenar y evaluar cada iniciativa de mejora con base en el valor que aportaba al usuario y al negocio.
[ICE Scoring (Impact, Confidence, Ease)]
🔑
Insights de la etapa de definición
🛡️ Confianza primero
• Mostrar sellos oficiales y número de registro en la home fue la iniciativa con mayor puntaje (640).
• Los usuarios necesitan prueba visible e inmediata de validez para seguir navegando.
📊 Procesos simples y visuales
• Explicar el proceso en pasos visuales (448) 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
• WhatsApp CTA fijo (336) y formulario optimizado con confirmación automática (252) confirman que los usuarios esperan respuestas inmediatas y cero fricciones al registrarse.
🖼️ Prueba tangible
• Ejemplos de certificados reales (336) generan confianza.
• “Ver para creer” es clave: si no muestran el certificado, la decisión se frena.
🏢 Segmentación empresarial
• Bloque “Certifica a tu empresa” (240) y paquetes por volumen (80) revelan que el segmento empresarial requiere soluciones diferenciadas, aunque su implementación es más compleja.
🗣️ Refuerzos de credibilidad
• Testimonios diferenciados (180), tabla comparativa de modalidades (180) y FAQ (96) funcionan como apoyo, pero no son los detonadores principales de conversión.
📧 Seguridad post-contacto
• Correo de confirmación inmediata (252) genera tranquilidad y elimina la duda de si la solicitud fue recibida.
💡
La experiencia digital de los adultos mayores se caracteriza por emociones intensas y fluctuantes, que van desde la ilusión inicial hasta la frustración cuando no hay reciprocidad. Por eso, el diseño priorizó un feedback inmediato, navegación simplificada y confianza en la interacción.
[Arquitectura de la información]
💡
Con los hallazgos priorizados en el ICE Scoring, diseñé una arquitectura de la información que refleja directamente las necesidades y expectativas de los usuarios. 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 —Inicio, Nosotros, Certificaciones y Contacto— que responden tanto a los dolores como a las motivaciones detectadas en los empathy maps y journey maps.
[User flow]
💡
Con la arquitectura definida, diseñé un user flow que mapea los pasos que los usuarios siguen desde que ingresan al sitio hasta que completan el registro o contacto. El objetivo fue identificar rutas claras, reducir puntos de fricción y asegurar que tanto individuos como empresas encuentren un camino adaptado a sus necesidades.
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]
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.
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 de IECEO no es solo un elemento estético, sino una extensión de la estrategia definida en el proyecto. Entendí que los usuarios necesitaban confiar desde el primer contacto. Por eso, la identidad visual debía transmitir claridad, profesionalismo y credibilidad.
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]
💡
Con la arquitectura definida y los recorridos de usuario claros, pasé a los wireframes de baja fidelidad. Estos me permitieron validar rápidamente la distribución de la información y los flujos principales sin distraerme con aspectos visuales.
El objetivo fue traducir la estructura en pantallas funcionales, identificar jerarquías de contenido y asegurar que los usuarios encontraran con facilidad los elementos clave: sellos oficiales, certificaciones, pasos del proceso y contacto inmediato.
[Wireframes de mediana fidelidad]
💡
Después de validar la arquitectura y los wireframes de baja fidelidad, pasé a una versión de mediana fidelidad, donde pude trabajar con mayor detalle la jerarquía visual, la disposición de elementos y el flujo de interacción.
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.
📐
Wireframes de mediana fidelidad
🏠 Inicio enfocado en confianza inmediata
Hero con CTA claro, sellos oficiales visibles y explicación en pasos simples.
🧾 Sección “Nosotros” sintetizada
Filosofía y valores institucionales presentados de forma breve para reforzar credibilidad.
📜 Certificaciones en formato de cards
Listados escaneables con requisitos básicos y botón para detalle, esto mejora la exploración y comparación.
🖼️ Página de detalle clara
Cada certificación incluye requisitos, duración, costo y ejemplo visual de certificado.
💬 Contacto optimizado:
Formulario más corto y directo, acompañado de información de soporte (teléfono, e-mail).
🎯 Simplificación estratégica
Se eliminó la sección empresarial para priorizar foco en el público principal y agilizar la primera versión del producto digital.
[Wireframes de alta fidelidad]
🔑
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).
[Casos de estudio]
