Rediseño de la web de un colegio público de Leganés: arquitectura de la información, análisis heurístico, sistema de diseño y prototipo en Figma.
Rol
Diseño UX/UI
Tecnologías·
Figma · FigJam
Herramientas
UX research · UI design · Análisis heurístico
El CEIP José María de Pereda es un colegio público de Educación Infantil y Primaria ubicado en Leganés, Madrid.
El problema era claro: la web presentaba una arquitectura de la información confusa, un diseño visual obsoleto sin coherencia visual y una experiencia de usuario que no respondía a las necesidades reales de sus usuarios principales: las familias, alumnado y profesorado.
El proyecto consistió en realizar un análisis heurístico completo de la web existente, identificar los problemas más críticos y proponer un rediseño integral que mejorara la usabilidad, la accesibilidad y la estética del sitio, manteniendo siempre la identidad del centro.
The Escape Book nace como una solución para unificar esta experiencia en una única plataforma intuitiva que permite explorar nuevas salas mediante filtros y gestionar salas jugadas, favoritas o pendientes. Además, la plataforma se adapta a distintos perfiles (visitantes, usuarios registrados, empresas y administradores), cada uno con necesidades y funcionalidades específicas.
Web original
Web rediseñada
Metodología centrada en el usuario, desde la investigación hasta el prototipo de alta fidelidad.
Análisis heurístico de la web original. Identificación de los 10 problemas más críticos usando las heurísticas de Nielsen.
Arquitectura de la información nueva. Moodboard, paleta de color y sistema tipográfico adaptados a un colegio público.
Wireframes de las páginas clave: Home, Contacto y Profesorado. Definición de componentes y flujos de usuario.
Prototipo de alta fidelidad en Figma con interacciones reales. Sistema de diseño completo y rediseño de logo.
Evalué la web aplicando las 10 heurísticas de Nielsen. Estos son los 6 problemas más críticos que determinaron las decisiones de rediseño
Serveridad: 4 (Crítico)
El menú tiene demasiados niveles de profundidad y no existen elementos como breadcrumbs, lo que obliga al usuario a recordar dónde está y cómo volver.
Heurística: Aliviar la carga de memoria del usuario
Serveridad: 4 (Crítico)
La web no está correctamente adaptada a dispositivos móviles: el contenido se desborda, los botones no son accesibles y la navegación se vuelve incómoda.
Heurística: Flexibilidad y eficiencia de uso
Serveridad: 3 (Alta)
Se detecta una falta de coherencia en estilos visuales (tipografía, colores, botones) y patrones de interacción, lo que genera confusión y reduce la confianza del usuario.
Heurística: Consistencia y estándares
Serveridad: 3 (Alta)
Bloques de texto densos sin jerarquía visual. Información clave (horarios, admisiones, calendario) enterrada entre contenido secundario, lo que dificulta encontrar la información relevante.
Heurística: Estética y minimalistmo
Serveridad: 3 (Alta)
Contraste de color por debajo de los mínimos WCAG 2.1 AA. Fuentes de menos de 12px. Sin textos alternativos en imágenes ni etiquetas en formularios.
Heurística: Prevenir errores / Accesibilidad
Serveridad: 2 (Medio)
No hay indicadores de estado en acciones como navegación, carga o interacción. El usuario no recibe feedback sobre lo que ocurre en el sistema.
Heurística: Mostrar el estado del sistema
El rediseño resuelve cada uno de los problemas identificados con decisiones de diseño claras y justificadas. No es solo un cambio estético: es una solución estructural.
Menú simplificado a 5 secciones principales con acceso directo a los contenidos más buscados por las familias.
Paleta de colores definida (morado, amarillo, rosa), tipografía Fredoka + Quicksand, componentes reutilizables en Figma.
Prototipo funcional en móvil, tablet y escritorio. Interfaz adaptada desde las pantallas más pequeñas.
Logo actualizado manteniendo la identidad del centro, más limpio y versátil para su uso en digital.
Tamaño mínimo de 16px en cuerpo de texto. Fuentes sin serifas claras (Fredoka, Quicksand). Línea de texto nunca superior a 75 caracteres.
Todos los pares color-fondo superan el ratio de contraste de 4.5:1 exigido por WCAG 2.1 nivel AA. Verificado con herramientas de auditoría de color.
Lenguaje claro y sin tecnicismos. Uso de iconos para apoyar la comprensión lectora, especialmente importante para el alumnado más pequeño.
Todos los campos de formulario tienen etiquetas visibles y mensajes de error claros.
Estructura de headings consistente, zonas de contenido predecibles, reducción de elementos que puedan sobreestimular al usuario y menú bien organizado con categorías comprensibles
Este proyecto me permitió aplicar por primera vez un proceso completo de UX: desde la auditoría de la web existente hasta el prototipo interactivo, pasando por la definición del sistema de diseño.