La Ruta del Císter
2024 · 4 min de lectura
Turismo, rediseñado
La Ruta del Císter tiene patrimonio, paisaje y personalidad. Lo que no tenía era una interfaz que la acompañara. Este rediseño parte de sus puntos de fricción para replantear su experiencia digital: más accesible, más intuitiva y visualmente coherente. ¿Puede el diseño estar a la altura de siglos de historia?
Rediseño de interfaz
Accesibilidad
Mobile first
Rol
Diseñadora UX/UI
Equipo
Individual
Duración
4 meses
Herramientas
Figma
Resultado
Rediseño mobile first de menú, buscador y formulario, con contraste AA
Aprendizaje
Cambios estructurales simples, como menú, filtros y feedback, mejoran la experiencia
Escuchar
Proceso de análisis
Empecé analizando la interfaz original. Perfilé al visitante por hipótesis, no con entrevistas, y evalué la web con las heurísticas de Nielsen: solo cumplía 3 de 22. Los problemas principales:
•
Jerarquías confusas en el menú y el pie
•
Landing con pocos elementos
•
Buscador de alojamiento con solo dos filtros (tipología y comarca)
•
Formulario sin feedback, que no avisaba de si había un error ni de si la consulta se había enviado
Después hice un benchmarking de cinco webs turísticas (Club Aramón, Travel Japan, Patronato de la Alhambra, Puente de Bizkaia y Tourisme Alberta) y saqué 13 criterios aplicables, entre ellos una arquitectura poco profunda, un look and feel coherente y fotografías de gran formato
Ordenar
Arquitectura de la información
Con eso rehice la arquitectura de la información en un árbol de contenidos:
•
Renombré secciones que se confundían (como "información práctica", que pasó a llamarse "información") y recoloqué otras por afinidad: los platos típicos pasan de "qué hacer" a "dónde comer".
•
Quité los menús laterales duplicados y recogí los idiomas en un desplegable.
•
Añadí buscador, "mi perfil" y "FAQs y ayuda".
•
Separé un apartado por monasterio y fusioné "fotos y vídeos" con "no te puedes perder"
Después llevé la estructura a wireframes de la home, "dónde dormir" y "contacta", en móvil y escritorio
Traducir
Identidad gráfica
La Ruta del Císter tiene un rico patrimonio histórico y cultural. Busqué hacer referencia a éste gráficamente, evocando el sosiego, la tradición y la naturaleza que la caracteriza de un modo cercano y amable. Para ello, me serví de un moodboard que definió los siguientes criterios:
•
Texturas naturales, como la roca o la madera
•
Paleta de amarillo terroso, que evoca las piedras de los monasterios, y burdeos, que remite al vino tinto local y a la naturaleza circundante.
•
Tipografía con serifa que transmite tradición, con contraformas redondeadas que aportan cercanía.
•
Fotografías luminosas, de alto contraste y saturadas, que resaltan la arquitectura y el paisaje.
Rediseño de la interfaz
Este rediseño se hizo bajo un enfoque mobile first, lo que asegura una experiencia óptima en smartphones. Además, es escalable, con lo que las pantallas se adaptan a dispositivos de mayor tamaño.
Diseñé primero las pantallas de móvil y después las de escritorio, con las mismas mejoras en ambas:
•
El menú pasa a dos niveles y el pie profundiza uno más
•
La landing suma una introducción y previsualizaciones (monasterios, mapa de la GR-175)
•
El buscador de alojamiento añade fechas, habitaciones, huéspedes y una casilla "voy a hacer la GR-175" para buscar por tramos.
•
El formulario muestra cuatro estados (básico, enfocado, válido y error) y un botón de enviar desactivado, con una frase que explica cuándo se activa
Landing page
Página de búsqueda de alojamiento
Formulario de contacto
Guía de estilo
Para mantener la coherencia en futuras actualizaciones, elaboré una guía de estilo en Figma: retículas, tipografías (Fraunces para títulos y botones, Hannari para el cuerpo), colores, iconografía y elementos interactivos y de formulario. Cuidé especialmente el contraste: comprobé la paleta con Contrast Checker hasta llegar al nivel AA de la WCAG, lo que me obligó a iterar varias veces el color primario.
El final
Conclusiones
El rediseño ataca los problemas estructurales de la web original: menú, filtros y feedback del formulario. El siguiente paso sería validar las mejoras con usuarios reales mediante tests de usabilidad, para iterar antes de una hipotética implementación: ¿se entiende el menú nuevo?, ¿se encuentran los filtros?, ¿se interpreta bien el feedback del formulario?