VivaFem

Responsive web design of a hotel-spa for women.

Description.

In a world where the fast pace of life and daily responsibilities leave little room for self-care, women face a growing need to disconnect from their surroundings and reconnect with themselves.

VivaFem is a women-focused hotel and spa that emerges as a case study aimed at designing a digital solution to meet this need, blending wellness, creativity, and relaxation into a single accessible and functional space. Beyond creating a responsive website, the challenge was to envision how this product could seamlessly integrate into real life, developing a concrete and actionable value proposition.

Collaborators.

Client.

Year.

2024

Role.

UX Design UI Design

Company.

Escuela La Hauss Final project

Tools.

Figma Adobe Illustrator

Prototype.

Echa un vistazo

Phase 1: Empathize

1. Survey

To deeply understand the users' needs, a survey was conducted among women aged 28 to 45. The data gathered provided insights into their preferences, habits, and motivations regarding wellness getaways.

The survey identified key user needs, highlighting a preference for short to medium-length getaways, affordable budgets, and activities focused on physical wellness, creativity, and mental relaxation. These findings were crucial in creating a proposal tailored to their interests.

2. Benchmark

A heuristic analysis was carried out on three platforms offering similar services to VivaFem: Hotel Los Ángeles, MASQi, and SHA Wellness.

The analysis identified best practices, such as minimalist design and clear error prevention mechanisms, but also highlighted areas for improvement, particularly in mobile accessibility, visual consistency, and the use of comparison tables. These findings formed the basis for strategic design decisions for VivaFem, prioritizing an accessible, user-centered experience.

Phase 2: Define

1. User Personas

Based on survey results, two User Personas were developed to represent VivaFem's potential clients. Using an Empathy Map, a deep understanding of their needs was achieved, guiding design decisions.

Marina and Olga represent two distinct yet complementary target client profiles. Both seek disconnection and wellness, but while Marina prioritizes personalization and cost, Olga needs reassurance in her decision to take a break.

2. Problem Statement

"Women aged 28 to 45 seek an accessible and personalized platform offering wellness getaways tailored to diverse preferences for duration, budget, and activities."

3. Solution

The product should feature:

  • A balance of physical, creative, and relaxation activities.
  • Comparison tables to simplify users' decision-making process.
  • An intuitive experience that encourages users to plan their getaways.
  • An optimized booking system to reduce steps and provide real-time feedback.
  • A clear information architecture with a visual hierarchy to facilitate navigation.

Phase 3: Ideate

A card-sorting exercise was conducted to organize information clearly and coherently, enabling users to easily find what they need and achieve their goals.

The user flow was specifically designed for the checkout process, focusing on concrete steps that guide users from entry to successfully completing a booking. Each stage was designed to be simple and clear, ensuring a seamless experience toward the final action.

Wireframes

After defining the information architecture and user flow, I created wireframes. The initial structure helped visualize how to organize the simpler sections of the website, while more complex elements required deeper analysis.

A clear example is the comparison table, where ensuring clarity and functionality for both mobile and desktop versions was essential. Various design alternatives were explored to find a solution that maintained visual consistency and usability without compromising the responsive design. The final design organizes data in an accessible and easy-to-read manner across devices.

With a solid foundation, the next step was creating a robust visual system connecting conceptual elements to the final prototypes. Inspired by Atomic Design principles, this system ensures consistency and flexibility across all visual components.

Phase 4: Prototype

Design System

I developed a design system to ensure visual and functional consistency throughout the project. This system includes colors, typography, icons, and essential components, organized according to Atomic Design principles to maintain clear hierarchy and facilitate reuse in different contexts.

This system simplifies future platform expansion, allowing new sections or features to be added without compromising user experience or design consistency.

Prototype

During the prototyping phase, all screens were developed with the breakpoints established by Bootstrap to ensure a fully responsive experience. Specific versions for mobile, tablet, and desktop were designed, ensuring each component adapted perfectly to various resolutions while maintaining functionality and visual coherence.

Interactions for all three devices were also considered, incorporating smooth transitions and intuitive navigation optimized for each format’s unique characteristics. The result is an interactive prototype that demonstrates how users will experience the final product across all devices.

Findings

The project achieved its main objectives: designing a balance between physical, creative, and relaxation activities, paired with clear information architecture and well-defined visual hierarchy for easy navigation. Comparison tables support user decision-making, while the intuitive experience motivates them to plan their getaways. The booking system was optimized by reducing steps and providing real-time feedback to ensure a smooth experience.

Next Steps

  • Conduct usability testing to validate the designed experience and gather direct user feedback.
  • Explore integrating new features that enrich the experience, such as personalized recommendations and collaborative tools.
  • Evaluate adding more activities and destinations to broaden the platform's reach.

Year.

2024

Role.

UX Design UI Design

Company.

Escuela La Hauss Final project

Tools.

Figma Adobe Illustrator

Prototype.

Echa un vistazo