Diseño de producto end-to-end para una plataforma de experiencias rurales
Impacto: 213 inconsistencias de tokens auditadas y corregidas
Stack
- Figma
- FigJam
- Notion
- Figma Tokens
Resumen del proyecto
Las experiencias rurales en España existen pero están dispersas y son difíciles de encontrar o reservar. Las plataformas actuales no combinan una buena UX con un enfoque rural y apoyo a la comunidad local, y el proceso de reserva suele ser confuso y la información visual escasa. Landora centraliza el descubrimiento y la reserva de experiencias rurales (culturales, gastronómicas y naturales) de forma sencilla y accesible, apoyando a las comunidades locales.
Reto
Las zonas rurales se despueblan mientras las ciudades sufren turismo masivo, y existe una alta demanda de experiencias únicas pero ninguna plataforma centralizada que las albergue. El proceso de reserva en las opciones existentes suele ser confuso, anticuado o incompleto. Los usuarios acaban buscando en varios sitios sin encontrar una solución unificada.
Mi rol · Diseño de Producto y Design System · En solitario, de principio a fin: investigación, IA, diseño de UI, accesibilidad (WCAG AA), handoff a desarrollo.
Objetivos
Objetivos de producto
- Aumentar las tasas de conversión de reservas.
- Posicionar Landora como referente en turismo rural.
- Apoyar a las comunidades locales conectándolas con usuarios urbanos.
- Escalar el catálogo de experiencias por categoría.
Objetivos de usuario
- Reservar experiencias rurales rápido y sin fricción.
- Encontrar experiencias verificadas con información visual fiable.
- Descubrir experiencias en una sola plataforma sin buscar en varios sitios.
- Confiar en la plataforma antes de comprometerse con el pago.
1. Investigación
Se realizaron cinco entrevistas en profundidad en audio, con transcripción y análisis completos, con participantes de entre 25 y 60 años de perfiles diversos. Las preguntas cubrieron hábitos generales de reserva, barreras para experiencias rurales, experiencias previas y la "app ideal". Se complementó con una encuesta en Google Forms con unas 20 respuestas de usuarios con perfiles distintos.
La oportunidad de Landora: UX de alta calidad + enfoque rural + apoyo a la comunidad local, todo en una plataforma.
- Insight clave: Complejidad de la reserva
- Insight clave: Confianza visual
- Insight clave: Búsqueda fragmentada
| Plataforma | Fortaleza | Debilidad |
|---|---|---|
| Ecotur | Informativa | No orientada a reservas directas |
| Airbnb | Excelente UX y reservas | Sin enfoque rural ni impacto comunitario |
| Rusticae | Selección editorial de calidad | Enfoque exclusivo, sin valor comunitario |
2. Definición
- Personas y user journeys.
- Flujos de usuario para exploración, detalle y reserva.
- Arquitectura de información (IA) para organizar categorías y experiencias.
- Priorización de funcionalidades clave.
3. Diseño
El proceso comenzó con wireframes de baja fidelidad para validar la estructura antes de invertir en el sistema visual. Una vez validadas la arquitectura y los flujos, se desarrollaron prototipos interactivos en Figma, y el sistema visual se construyó sobre tres pilares: claridad, jerarquía y accesibilidad.
- Wireframes de baja fidelidad para validar la estructura.
- Prototipos interactivos en Figma.
- Sistema visual basado en claridad, jerarquía y accesibilidad.
Decisiones de diseño
Se eligió el morado sobre el verde porque es más distintivo y encaja con la motivación del usuario de escapar de la rutina y buscar experiencias con sentido.
El morado original no cumplía WCAG 2.1 AA (ratio mínimo 4.5:1), verificado con un plugin de Figma. El morado original se reservó para el branding decorativo, y la rampa lila primaria se calibró al nivel 600 para todos los elementos interactivos, cumpliendo el ratio 4.5:1 en todos los casos de texto e interacción.
- Pantalla de pre-checkout: selección de fecha, hora y número de personas con visualización de coste en tiempo real.
- Checkout de 3 pasos: resumen del pedido, datos personales y pago.
- La información de la actividad permanece visible durante todo el proceso.
- Política de cancelación y aviso de soporte incluidos en el paso de pago.
- Librería de componentes publicada en Figma como librería independiente, separada del archivo de pantallas.
- Arquitectura de tokens estructurada en dos capas, valores primitivos y alias semánticos, cubriendo color, tipografía, espaciado, padding, radio y grid.
- Paleta de color accesible, verificada contra los estándares de contraste WCAG 2.1 AA.
- 20+ componentes: botones, campos de texto, selector de calendario, barra de navegación, tarjetas, stepper, resumen de checkout y tarjetas modulares.
- Completamente documentado para handoff a desarrollo, auditado por consistencia y publicado como sitio de documentación independiente.
| Problema identificado | Decisión de diseño | Impacto esperado |
|---|---|---|
| Proceso de reserva excesivamente complejo | 1 pantalla de configuración + checkout de 3 pasos con información persistente | Reducción de la fricción y del abandono |
| Falta de información visual fiable | Tarjeta de reserva con galería deslizable + reseñas verificadas | Mayor confianza del usuario antes de confirmar |
| Experiencia de búsqueda fragmentada | Plataforma centralizada con navegación clara por categorías | Menor tiempo de búsqueda y mejor finalización de tareas |
| El morado de marca no cumplía WCAG 2.1 AA | Se separó el color de marca del color de interacción, rampa lila primaria calibrada al nivel 600 | Accesibilidad completa sin sacrificar la identidad visual |
Handoff y documentación del DS
Más allá del diseño de la interfaz, traté el UI kit de Landora como un sistema pensado para ser entregado, no solo un conjunto de pantallas. Eso implicó auditar cada token por consistencia, estructurar una arquitectura de tokens en dos capas y documentar el cumplimiento de accesibilidad antes de darlo por terminado.
El color ya estaba definido como Estilos de Figma, pero el espaciado, el padding, el radio y la tipografía aún no estaban estructurados como tokens reutilizables. Convertí los estilos de color a Variables y construí el resto de escalas desde cero.
En lugar de inventar una escala arbitraria, revisé el uso real en toda la librería de componentes para ver qué valores ya estaban en juego, lo que reveló un patrón claro en espaciado y padding (4, 8, 12, 16, 24, 32, 64) junto a decenas de valores sueltos que no encajaban. Ese patrón se convirtió en la escala primitiva.
Antes de generar cualquier documentación de handoff, hice una auditoría de tokens en toda la librería de componentes en lugar de asumir que ya era consistente. La auditoría reveló inconsistencias reales: 213 valores de espaciado y padding, un patrón de 6px y 10px, y radios de esquina fuera de escala.
En lugar de documentar el sistema tal cual estaba, usé la auditoría para imponer una escala limpia basada en 4px, resolviendo cada excepción según su contexto en lugar de redondear ciegamente al valor más cercano. Por ejemplo, el radio del contenedor de una tab bar (20px) se subió a 24px para ajustarse a su superficie mayor, manteniéndolo visualmente distinto de elementos interactivos más pequeños a 8px. Los elementos decorativos ajenos al sistema de diseño real, como el icono de batería de la barra de estado de un mockup, se excluyeron deliberadamente de la escala de tokens en lugar de forzarlos en ella.
Con los tokens y componentes auditados y bien nombrados, generé un sitio de documentación independiente en Zeroheight, cubriendo fundamentos (color, tipografía, espaciado, padding, radio), especificaciones de componentes (anatomía, variantes, estados) y guías de accesibilidad, construido directamente desde el archivo de Figma para un handoff preciso a desarrollo.
a) Entregables clave
El diseño final ofrece una solución digital coherente que combina un sistema visual sólido con una experiencia de reserva clara y accesible. Mediante un flujo optimizado y decisiones de diseño justificadas con investigación real, Landora ofrece a los usuarios una plataforma fiable para gestionar reservas con el mínimo esfuerzo cognitivo, respaldada por un design system totalmente documentado y listo para producción, con tokens primitivos y semánticos, preparado para el handoff a desarrollo.
b) Aprendizajes de diseño
La consistencia no es algo que se consigue por construcción: se erosiona a través de cientos de pequeños ajustes manuales, incluso en un proceso cuidadoso. Auditar el sistema de tokens a posteriori, en lugar de asumir que estaba limpio, reveló inconsistencias reales que no habría detectado de otra forma. Y no todo valor irregular es un error a corregir: distinguir una decisión de diseño legítima (un radio mayor en una superficie más grande) de una desviación real (un valor decimal por redimensionar a mano) requirió criterio, no solo automatización.
c) Próximos pasos
Si el producto se desarrollara más allá del prototipo, se explorarían las siguientes mejoras:
- Realizar tests de usabilidad con usuarios reales para validar los flujos de reserva y detectar puntos de fricción no identificados en el proceso de diseño.
- Extender la capa de tokens semánticos para cubrir elevación y movimiento (sombras, tiempos de transición), completando el sistema más allá de color, espaciado y tipografía.
- Desarrollar la versión móvil nativa, priorizando flujos de reserva rápidos y la gestión activa de reservas.
Resultado
Se identificó una oportunidad de mercado real: ninguna plataforma existente combina UX de alta calidad con enfoque rural y apoyo comunitario. Se simplificó el proceso de reserva a 1 pantalla de configuración + 3 pasos de checkout con información contextual persistente. Sistema de color accesible: rampa lila primaria de nivel 600 para cumplir WCAG 2.1 AA (ratio > 4.5:1). UI Kit documentado como design system listo para producción, 20+ componentes, tokens primitivos y semánticos, auditados por consistencia y publicados como librería de handoff independiente. Prototipo interactivo completamente testeable en Figma.
