VivaFem

Diseño web responsive de un hotel-spa para mujeres.

Descripción.

En un mundo donde el ritmo acelerado y las responsabilidades cotidianas dejan poco espacio para el autocuidado, las mujeres enfrentamos una creciente necesidad de desconectar del entorno y reconectar con nosotras mismas.

VivaFem es un hotel-spa para mujeres, que surge como un caso de estudio enfocado en diseñar una solución digital para atender esta necesidad, combinando bienestar, creatividad y relajación en un único espacio accesible y funcional. Más allá de crear una página web responsive, el reto fue imaginar cómo este producto podría integrarse en la realidad, desarrollando una propuesta de valor concreta y aplicable.

Colaboradores.

Cliente.

Año.

2024

Rol.

Ux Design Ui Design

Compañía.

Escuela La Hauss

Herramientas.

Figma Adobe Illustrator

Prototipo.

Echa un vistazo

Fase 1: Empatizar

1. Encuesta

Para comprender a fondo las necesidades de las usuarias, se realizó una encuesta a un grupo de mujeres entre 28 y 45 años. La recopilación reveló de datos que permitieron identificar sus preferencias, hábitos y motivaciones en relación con escapadas de bienestar:

No items found.

La encuesta ayudó a definir las necesidades de las usuarias, destacando la preferencia por escapadas de corta o mediana duración, presupuestos accesibles y actividades centradas en el bienestar físico, la creatividad y la relajación mental. Estos hallazgos fueron clave para crear una propuesta adaptada a sus intereses.

2. Benchmark

Se realizó un análisis heurístico de tres plataformas que ofrecen servicios similares a VivaFem: Hotel Los Ángeles, MASQi y SHA Wellness.

No items found.

Este análisis permitió identificar buenas prácticas como el diseño minimalista y mecanismos claros de prevención de errores, pero también resaltó áreas de mejora, especialmente en la accesibilidad móvil, consistencia visual y uso de tablas comparativas. Estos hallazgos sirvieron como base para tomar decisiones estratégicas en el diseño de VivaFem, priorizando una experiencia accesible y centrada en el usuario.

Fase 2 - Definir

1. User Persona

Basados en los resultados de las encuestas, se desarrollaron dos User Personas que representan a las posibles clientas de VivaFem. A través de un Mapa de Empatía, se generó una comprensión profunda de sus necesidades, facilitando la toma de decisiones de diseño.

No items found.

Marina y Olga reflejan dos perfiles distintos pero complementarios de clientas objetivo. Ambas buscan desconexión y bienestar, pero mientras Marina prioriza la personalización y el precio, Olga necesita sentirse respaldada en su decisión de tomarse un descanso.

2. Identificando el problema

Las mujeres de 28 a 45 años desean una plataforma accesible y personalizada que ofrece escapadas de bienestar diseñadas para satisfacer diversas preferencias de duración, presupuesto y actividades.”


3. Solución

Crear un producto que tenga las siguientes características:

  • Incluir un balance entre actividades físicas, creativas y de relajación.
  • Proporcionar tablas comparativas para facilitar la toma de decisiones de las usuarias.
  • Diseñar una experiencia intuitiva que motive a las usuarias a planificar sus escapadas.
  • Optimizar el sistema de reserva para reducir pasos y proporcionar retroalimentación en tiempo real.
  • Implementar una arquitectura de información clara con jerarquía visual que facilite la navegación.
No items found.

Fase 3. Idear

Realicé un ejercicio de card sorting para organizar la información de manera clara y coherente, permitiendo a los usuarios encontrar fácilmente lo que necesitan y cumplir sus objetivos.

El user flow se diseñó específicamente para el proceso de checkout, enfocándose en pasos concretos que guíen al usuario desde su entrada hasta la finalización exitosa de la reserva. Cada etapa fue diseñada para ser simple y clara, garantizando una experiencia fluida y sin fricciones hacia la acción final de compra.

No items found.

Wireframes

Una vez definida la arquitectura de la información y el user flow, procedí a crear los wireframes. La estructura inicial me permitió visualizar cómo organizar las secciones más simples de la web, pero hubo elementos más complejos que requerían un análisis más profundo.

Un ejemplo claro es la tabla comparativa, donde debía asegurar que la información fuera clara y funcional tanto en versión móvil como en desktop. Exploré varias alternativas de diseño para encontrar una solución que mantuviera la coherencia visual y la usabilidad, sin que la experiencia del usuario se viera afectada por los cambios en el diseño responsive. Finalmente, logré organizar los datos de forma que se mantuvieran accesibles y fáciles de leer en cualquier dispositivo.

No items found.

Con las bases bien establecidas, el siguiente paso fue crear un sistema visual sólido que conectara cada elemento conceptual con los prototipos finales. Inspirado en los principios del Atomic Design, este sistema asegura consistencia y flexibilidad en todos los componentes visuales.

Fase 4. Prototipar

Design System

Creé un sistema de diseño para asegurar la consistencia visual y funcional en todo el proyecto. Este sistema incluye colores, tipografías, iconos y componentes esenciales, organizados según los principios de Atomic Design para mantener una jerarquía clara y facilitar su reutilización en diferentes contextos. 

No items found.

Este sistema simplifica la expansión futura de la plataforma, permitiendo añadir nuevas secciones o funcionalidades sin comprometer la experiencia del usuario ni la consistencia del diseño.

Prototipo

En la fase de Prototipar, todas las pantallas fueron desarrolladas teniendo en cuenta los breakpoints establecidos por Bootstrap para garantizar una experiencia totalmente responsive. Diseñé versiones específicas para móvil, tablet y desktop, asegurándome de que cada componente se adaptara perfectamente a las distintas resoluciones sin perder funcionalidad ni coherencia visual.

Además, se trabajó en la interacción para los tres dispositivos, incorporando transiciones fluidas y una navegación intuitiva, optimizada para las características únicas de cada formato. El resultado es un prototipo interactivo que refleja cómo los usuarios experimentarán el producto final en cualquier dispositivo.

No items found.

No items found.

No items found.

Resultados

El proyecto logró cumplir con sus objetivos principales: se diseñó un balance entre actividades físicas, creativas y de relajación, acompañado de una arquitectura de información clara que facilita la navegación mediante una jerarquía visual bien definida. Además, las tablas comparativas ayudan a las usuarias en la toma de decisiones, mientras que la experiencia intuitiva diseñada las motiva a planificar sus escapadas. Finalmente, se optimizó el sistema de reservas, reduciendo pasos y que pueda proporcionar una retroalimentación en tiempo real para garantizar una experiencia fluida.

Próximos Pasos

  • Realizar pruebas de usabilidad para validar la experiencia diseñada y obtener feedback directa de las usuarias.
  • Explorar la integración de nuevas funcionalidades que enriquezcan la experiencia, como recomendaciones personalizadas y herramientas colaborativas.
  • Evaluar la incorporación de más actividades y destinos para ampliar el alcance de la plataforma.
No items found.

Año.

2024

Rol.

Ux Design Ui Design

Compañía.

Escuela La Hauss

Herramientas.

Figma Adobe Illustrator

Prototipo.

Echa un vistazo