Case Study — Diseño UX-UI · Talento Digital SENCE
Case Study — Diseño UX-UI · Talento Digital SENCE
¿Cómo rediseñar una plataforma EdTech para que sea usable, accesible y escalable, eliminando la fricción en la exploración e inscripción de cursos?
Una EdTech solicitó el rediseño de su plataforma de cursos online debido a problemas detectados en la experiencia actual. La interfaz presentaba dificultades en la navegación, jerarquía visual poco clara y ausencia de un sistema de diseño consistente.
Esto generaba desorientación en la exploración, sobrecarga cognitiva, fricción en el proceso de búsqueda e inscripción, y una experiencia poco coherente entre dispositivos.
Objetivos del proyecto:
Aplicar las 10 heurísticas de Jakob Nielsen para identificar problemas en la plataforma referente.
Definir lineamientos de diseño basados en los hallazgos del análisis.
Diseñar una interfaz clara, coherente y responsive (móvil y escritorio).
Desarrollar un prototipo interactivo en alta fidelidad y validarlo con usuarios.
Documentar el sistema mediante guidelines basadas en Atomic Design.
Se aplicó la metodología de Evaluación Heurística basada en las 10 heurísticas de usabilidad de Jakob Nielsen sobre Udemy como plataforma de referencia, evaluando navegación, estructura de categorías, jerarquía visual y flujos de inscripción.
Tipografía
Paleta de colores
La paleta equilibra rigor académico (azul primario) con calidez y accesibilidad (naranja melocotón). Todas las combinaciones principales superan los estándares WCAG con ratios de contraste de hasta 16.19:1.
Dejar de usar plantillas genéricas de Canva. Necesita entender la composición y jerarquía visual para crear contenido original que destaque en el feed de sus clientes.
Temarios que no especifican si el nivel es para principiantes o avanzados.
Necesita ver comparativa rápida de duración y modalidad.
Gestiona redes sociales para varias marcas. Domina la estrategia de contenido pero siente que sus diseños no destacan. Valora la eficiencia — necesita validar rápidamente duración, metodología asincrónica y ejercicios prácticos.
Objetivo de Elena: Aprender fundamentos de diseño gráfico para mejorar la estética de las publicaciones que crea para sus clientes.
Flujo de navegación en la interfaz
Tres vistas principales de la plataforma — Home, catálogo de cursos y página de curso individual — diseñadas para resolver los problemas detectados en el análisis heurístico.
Home
Catálogo de cursos
Página del curso
Test de usabilidad moderado con 5 usuarios que representan el perfil objetivo — adultos entre 20 y 40 años, familiarizados con internet e interesados en cursos online. Herramienta: prototipo interactivo en Figma.
Objetivo: Evaluar si la organización de los cursos resulta clara para el usuario.
Objetivo: Comprobar si los usuarios identifican correctamente las cards de cursos.
Objetivo: Verificar la legibilidad de la información de duración en las cards.
Objetivo: Evaluar la visibilidad del indicador de certificación dentro del curso.
Resultados cualitativos
Los usuarios señalaron que la navegación es clara y fácil de entender.
Las categorías ayudan a encontrar cursos rápidamente sin fricción.
La página del curso presenta la información de forma ordenada y jerárquica.
Insight: Un usuario buscó el catálogo en el menú antes de usar el botón principal de exploración, revelando una oportunidad de mejora en la jerarquía del CTA.
A partir del test se identificaron oportunidades de mejora en la visibilidad del CTA principal. Se reforzó la jerarquía visual del botón "Explorar cursos" para facilitar la exploración inicial.
CTA poco diferenciado del contenido hero
Imagen del hero ocupaba demasiado espacio visual
Título y bajada comprimidos
Mayor separación visual entre CTA y contenido
Imagen reducida para centrar atención en el CTA
Título, bajada y CTA ocupan espacio mayor y centrado