Sistema de diseño para Wellness Stay
Contexto
¿Qué es Wellness Stay?
Wellness Stay es un proyecto experimental para poner en práctica nuevas herramientas de IA dentro del proceso de creación y diseño de un producto digital. Wellness Stay es un proyecto ficticio que simula una plataforma digital o marketplace de reservas de retiros de bienestar: yoga, mindfulness, detox, etc.
Objetivo
Nuevas herramientas de IA en los procesos de diseño
El propósito de este caso de estudio es la creación de un sistema de diseño desde cero — bases de diseño, tokens y componentes — para la construcción automatizada de la interfaz mediante herramientas de IA, así como la creación de la documentación para proporcionar el contexto y los requerimientos necesarios.
- Comprender el mercado y analizar los principales flujos y patrones UI
- Definir el usuario objetivo
- Construir una base visual (foundations) y sistema de diseño escalable (tokens + componentes)
- Implementar los assets y documentación para desarrollo
- Creación en entorno real con IDE
- Subida al repositorio
- Creación de Storybook como fuente de la verdad
Benchmark
Investigación del mercado de las plataformas de retiros holísticos
Para comenzar, analicé plataformas del sector travel + wellness que existen actualmente en el mercado. Analicé los flujos de la reserva de retiros y los elementos UI comunes. Al mismo tiempo, recogí los distintos estilos visuales de los competidores para escoger un estilo diferenciador.
User persona
¿Qué perfil tiene el usuario que reserva estos servicios?
Pude identificar dos grupos de segmentos de user persona principales que resumí en estos dos perfiles:
Dirección visual
Moodboard
Teniendo en cuenta el perfil de usuario, el estilo de los competidores y el tipo de producto, desarrollé un moodboard para definir la dirección visual:
Sistema de diseño
Creación de las bases de diseño
Comencé estableciendo las foundations, los elementos visuales fundamentales de la interfaz: el color, la tipografía, los iconos, las grillas, los espaciados (márgenes y paddings), radios de esquina y grosor de los bordes.
Arquitectura de tokens
Traduje las foundations a una arquitectura de tokens: color, tipografía, espaciado, radios de esquina y grosor de bordes. Nombrar cada decisión visual permite reutilizarla de forma consistente en Figma y en código.
Arquitectura de componentes
Con el objetivo de construir una interfaz única y a medida, diseñé los componentes básicos que contiene todo marketplace de alojamientos — buscador, cards, botones y navegación — y los integré en el editor de código mediante el MCP de Figma. Previamente creé los specs de los elementos para proporcionar la máxima información al IDE.
Documentación
Documentación técnica
El siguiente paso fue generar la documentación en formato README.md para incluir en el proyecto. En este documento se explica en qué consiste el proyecto.
Implementación
De diseño a código
Una vez creado el archivo del proyecto, integré lo anterior para validar el sistema de diseño en un entorno real. Decidí implementarlo utilizando Cursor como IDE. No utilicé frameworks, sino que opté por una implementación en HTML, CSS y JavaScript con los elementos previamente creados.
Una vez generado el contexto para el IDE: bases del estilo y documentación, generé los prompts específicos para generar las secciones de la home:
- hero section (buscador y propuesta de valor)
- destacados
- categorías principales
- footer
Además de esto, generé el Storybook como fuente de la verdad, donde almacenar todos los elementos de la interfaz. En un futuro, podrá ir siendo actualizado según requerimientos nuevos del producto.
Conclusión
Aprendizajes extraídos del proyecto.
Este proyecto me permitió practicar la creación de sistemas de diseño y su implementación en IA que permitan generar la interfaz y todos sus elementos de manera sistemática, consistente y eficaz.
Desde esta perspectiva estratégica y estructurada, utilizando este flujo de trabajo, es posible escalar un producto de forma sistemática y consistente.