Rediseño UX/UI de una plataforma educativa con +824.000 visitas. La portada no orientaba a nadie; ahora cada perfil encuentra su sitio en menos de 3 segundos.
El sitio tiene más de 824.000 visitas acumuladas y 109 suscriptores activos, pero la portada muestra el blog cronológico sin explicar qué es ni para quién. Un usuario nuevo abandona antes de los 3 segundos porque no puede orientarse. El menú tiene 10 ítems sin jerarquía que mezclan contenido para alumnos con recursos para docentes. El diseño genérico penaliza la credibilidad percibida pese a la calidad del contenido.
Auditoría basada en los 10 principios de Nielsen. Hallazgo crítico: ausencia de página de inicio orientada al usuario — la portada es el feed cronológico y el visitante no comprende el propósito en menos de 3 segundos.
Hallazgos de severidad alta: menú con 10 ítems sin jerarquía y diseño genérico que desalinea calidad de contenido con percepción visual. Severidad media: entradas sin metadatos, recursos para docentes dispersos, ausencia de optimización móvil.
Laura, docente de 30–55 años: busca recursos listos para el aula filtrados por nivel y tema, pero no puede hacerlo porque los recursos docentes están dispersos en el menú. Dispositivo principal: ordenador.
Miguel, alumno de 8–16 años: quiere practicar matemáticas de forma autónoma pero no sabe por dónde empezar porque la portada no le orienta. Dispositivo principal: móvil o tablet.
El análisis reveló que la principal barrera de uso es estructural: los usuarios
no encuentran el contenido porque la arquitectura de información y la navegación no les ofrecen un recorrido
claro.
La propuesta de mejora se articula en cuatro ejes:
1. Reorganización del contenido: reorganizar el contenido siguiendo la lógica del usuario
—curso → nivel → tipo— y crear
páginas de aterrizaje orientadas a perfil ("Empieza aquí" para alumnado y docentes), de modo que cualquier
visitante pueda orientarse en menos de tres segundos desde la portada.
2. Modernización de la
identidad visual: modernizar la
identidad visual y reforzar la jerarquía tipográfica para mejorar la legibilidad y reflejar la calidad real
del contenido.
3. Incorporación de ejercicios interactivos: incorporar ejercicios
interactivos y micro-recompensas que aumenten la
motivación y el tiempo de permanencia del alumnado.
4. Implementación de filtros y
búsqueda: implementar un sistema de filtros y
búsqueda
que permita a docentes localizar recursos específicos de forma eficiente.
Las prioridades de implementación se ordenaron según impacto y viabilidad: arquitectura de información y
páginas guía → filtros y búsqueda → identidad visual → interactividad y pruebas con usuarios.
La página de inicio se estructura en 5 bloques en orden de prioridad UX: hero con CTA doble (alumno / docente), tarjetas de nivel educativo, contenido destacado, métricas de credibilidad y footer con elementos secundarios.
La restricción principal — no modificar el flujo de trabajo del autor — condicionó la solución técnica: el bloque de últimas entradas se actualiza solo sin intervención manual.
La paleta responde a tres principios fundamentales de UX/UI aplicados a un contexto educativo:
1. Progresión por edad: Los colores más cálidos y energéticos se asignan a los
niveles más
jóvenes (Primaria). A medida que el nivel educativo avanza hacia la madurez (ESO, FP), los
colores se vuelven más fríos y serenos, transmitiendo mayor rigor académico.
2. Contraste WCAG AA: Todos los pares fondo/texto y fondo/botón cumplen un
ratio de contraste
mínimo de 4.5:1 para garantizar legibilidad en cualquier pantalla y contexto de iluminación.
3. Identidad visual coherente: Cada sección usa una familia cromática distinta
pero armónica.
Los tonos se intensifican progresivamente dentro de cada familia para reflejar avance y
complejidad.
Tipografía: DM Sans para toda la interfaz.
Cubre la página de inicio en desktop (1440 px) y móvil (390 px), la página de Primaria en el nuevo contexto visual, y la página de Profesores como nueva página de aterrizaje que agrupa Guía, Cursos y Recursos TIC.
La implementación en WordPress Studio con el tema Kadence usa exclusivamente bloques nativos de Gutenberg — sin plugins de pago ni dependencias externas. La configuración de paleta y tipografía se exporta en JSON para replicar en producción sin rehacer el trabajo.
La portada nueva orienta al visitante en menos de 3 segundos, el menú pasa de 10 a 5 ítems, y el bloque de últimas actividades se actualiza solo cada vez que el autor publica una entrada nueva.
