Ruta del Cister
Rediseño de la Web y App
Proyecto ficticio para la asignatura diseño de interfaces de la UOC
El objetivo principal fue modernizar la imagen digital de la ruta para ofrecer una experiencia inmersiva que refleje su riqueza histórica y cultural.
El Desafío (UX Research)
A través de un Análisis Heurístico basado en los principios de Jakob Nielsen, identifiqué puntos críticos en la plataforma original
Falta de feedback: El sistema no informaba adecuadamente al usuario sobre el éxito de sus acciones
(como en el envío de formularios).
Jerarquía visual confusa: Menús duplicados y una estética arcaica dificultaban la navegación.
Errores de usabilidad: Presencia de enlaces rotos (error 404) y falta de un buscador en la página de inicio.
Para definir la nueva estrategia, realicé un Benchmarking detallado de competidores:
Moodboard
Identidad Visual y Guía de estilo
Paleta de Colores: Se seleccionó el naranja (#E09746) como color dominante para transmitir la calidez de los atardeceres y los tonos tostados de los monumentos históricos. Se complementó con negro y blanco para lograr equilibrio y legibilidad.
Tipografía: Elegí la fuente Raleway por su simplicidad y elegancia. Se estableció una jerarquía clara con tamaños que van desde los 60px para H1 hasta los 10px para elementos secundarios en la versión escritorio.
Iconografía y Botones: Botones con esquinas redondeadas y efectos de hover (cambio a naranja claro) para proporcionar feedback inmediato al usuario.
Diseño Responsive: Utilicé una retícula de 12 columnas para escritorio y una adaptación de 4 columnas para móvil, asegurando que el contenido esencial fuera accesible en pantallas pequeñas sin saturación visual.
Prototipado y Solución Final
Desarrollé prototipos navegables en Figma que integran:
Barra de búsqueda visible en el encabezado.
Menú fijo (sticky) al hacer scroll para facilitar la navegación continua.
Formularios optimizados con mensajes de validación claros para prevenir errores.
Conclusión
Este proyecto me permitió aprender la importancia de mantener la esencia de una marca tradicional mientras se adapta a las necesidades del usuario moderno. La creación de una guía de estilo previa fue fundamental para agilizar el diseño y garantizar la armonía visual en todos los puntos de contacto del usuario.