Contexto del proyecto
Este proyecto comenzó en 2023 cuando inicialmente se me asignó realizar el diseño de las pantallas del nuevo flujo de reserva online (en desarrollo). En ese momento también se vió conveniente por parte del CEO y compañeros de otros departamentos, hacer un rediseño completo de toda la plataforma de alojamientos rurales para mejorar la estética, la usabilidad, y sobre todo, optimizar el uso en móvil.
Objetivos
- Mobile first: el 87% de las personas que visitan la plataforma lo hacen con su dispositivo móvil. El 10% en escritorio y el resto en tablet. Incluso la zona interna de gestión de los propietarios es gestionada desde el móvil
- Mejorar la estética y usabilidad
- Optimizar el flujo de búsqueda de alojamiento y de solicitud de reserva
Metodología de trabajo
Mi proceso de diseño para crear el UI Kit (Design System) de TusCasasRurales.com fue el siguiente:
- Realicé un sitemap o arquitectura completa del sitio, ya que debía conocer bien todas las pantallas de la plataforma.
- Después, comencé con una auditoría completa de la interfaz existente para identificar inconsistencias visuales en los elementos.
- Posteriormente, realicé un estudio de la competencia directa e indirecta para identificar mejoras en las empresas punteras en el sector.
Fundamentos de diseño
Una vez recopilada toda la información anterior, comencé estableciendo las bases de la plataforma. Puesto que la marca carecía de una guía de estilo, basándome esencialmente en su logotipo y elementos fundamentales de la interfaz actual, establecí la paleta de colores, la escala tipográfica y las grillas para diferentes resoluciones.
Colores
Los colores utilizados en el portal hasta el momento, eran inconsistentes y carecían de variaciones para las distintas necesidades. Partiendo de los colores del logo, asigné dos verdes (principal y secundario), más el amarillo como acento (fue suavizado ya que hasta entonces se utilizaba el amarillo puro), y la paleta de los colores neutros.
Tipografía
Definí una escala tipográfica adaptable, organizada en versiones para desktop y móvil, con el fin de asegurar una lectura óptima en cualquier dispositivo.
Para los títulos utilicé Fira Sans, una tipografía de moderna y «amigable», mientras que para los textos de cuerpo empleé Montserrat, seleccionada por su claridad y versatilidad en tamaños pequeños. Además, establecí una paleta de colores específica para los textos, garantizando el contraste adecuado y manteniendo la coherencia visual en todos los niveles jerárquicos de la interfaz.
Grillas
Para estructurar el contenido de forma consistente, definí una grilla base con un ancho máximo de 1280 px. Considerando un margen mínimo de 13 px por cada lado en esta resolución, el área de contenido efectivo se mantiene dentro de un máximo de 1254 px. Esta configuración asegura una lectura equilibrada y una correcta jerarquía visual.
La adaptación de la grilla en resoluciones pequeñas fue especialmente importante para garantizar el correcto comportamiento del buscador de alojamientos, el mapa geográfico y los filtros de la sidebar, manteniendo su usabilidad y accesibilidad en todo tipo de dispositivos.
Creación de componentes (átomos, moléculas y organismos).
La creación de componentes fue imprescindible ya que la idea es dar consistencia a todos los elementos del diseño y agilizar el desarrollo de las presentes y futuras funcionalidades.
Cards de los alojamientos
La creación de los componentes de las cards fue un trabajo clave ya que la información más relevante de la plataforma, se encuentra en los contenidos de las cards de los alojamientos. La información sobre el alojamiento debe ser lo más completa posible a la vez que fácilmente escaneable por el usuario.
Creación de Secciones (plantillas)
Estas secciones son replicables en diferentes páginas, como la sección de alojamientos con ofertas, sección de alojamientos recomendados o sección de alojamientos en la provincia. Es contenido dinámico que aparece según las necesidades específicas del usuario y para mejorar el posicionamiento en buscadores.
Pantallas finales
Estas son alguna de las pantallas de los flujos principales.
Métricas de éxito (KPIs)
Para evaluar el impacto del nuevo diseño y la experiencia de usuario optimizada, he definido definido una serie de KPIs. Estas métricas permitirán analizar si las mejoras implementadas cumplen con los objetivos planteados y orientarán futuras iteraciones del producto.
- Tasas de conversión de las solicitudes de reserva o reservas.
- Engagement: número de páginas y tiempo por sesión.
- Número de abandonos en la página de precios
Aprendizajes:
En este proyecto sigo trabajando a día de hoy desde comienzos del 2023. Es la mayor fuente de aprendizaje como diseñadora, tanto en la colaboración con mis compañeros (programadores front and back, stakeholder, y otros compañeros de marketing y seo), como en la investigación y el uso de la herramienta de Figma.
- Debido a la inexperiencia en diseño por parte de la empresa no se accedió a hacer investigación con usuarios: ni test de usabilidad del diseño actual ni análisis de mapas de calor, por ejemplo.
- Hemos basado muchas decisiones en los flujos de la competencia, directa e indirecta, y en lo aceptado o no por programación dentro del framework anterior. Al final, se trataba de optimizar los flujos ya existentes con los recursos de siempre, NO partíamos de cero.
- He comenzado erróneamente a diseñar elementos de la UI al detalle y de manera definitiva, sin una idea clara y aprobada (por parte de los stakeholders), por lo que he rehecho demasiadas veces muchos elementos.
- El proyecto cuyo objetivo ha ido cambiando con el tiempo (al comienzo sólo el flujo de reserva online, después mejora de estética en la home, después la mejora en las cards de los alojamientos, después mejora en la ficha del alojamiento, etc) no se ha abordado de una manera global desde el inicio, lo que ha supuesto trabajar de manera poco efectiva.