michael trovela
product + ux design
michael trovela
product + ux design
michael trovela
product + ux design
Club Vieques
Crafting a Boutique Digital Experience on a Budget
TYPE
Branding, Website Design & Development
Industry
Hospitality
Duration
9 Weeks
Key Contributions
Research, UX/UI Design, Content Strategy, Branding, Visual Design
Team/Role
Solo Project
TYPE
Branding, Website Design & Development
Industry
Hospitality
Duration
9 Weeks
Key Contributions
Research, UX/UI Design, Content Strategy, Branding, Visual Design
Team/Role
Solo Project
TYPE
Branding, Website Design & Development
Industry
Hospitality
Duration
9 Weeks
Key Contributions
Research, UX/UI Design, Content Strategy, Branding, Visual Design
Team/Role
Solo Project
Overview
Key Facts
Designed, built, and launched a fully branded resort website—seamlessly integrating UX, visual design, and technical implementation.
9 wks
From concept to launch—an end-to-end experience designed and built in record time.
9 wks
From concept to launch—an end-to-end experience designed and built in record time.
9 wks
From concept to launch—an end-to-end experience designed and built in record time.
100%
Fully reserved during peak season, proving the site’s effectiveness.
100%
Fully reserved during peak season, proving the site’s effectiveness.
100%
Fully reserved during peak season, proving the site’s effectiveness.
1. Challenge
Building a Digital Vision Before Breaking Ground
1. Challenge
Building a Digital Vision Before Breaking Ground
1. Challenge
Building a Digital Vision Before Breaking Ground
Club Vieques faced a unique challenge: marketing a resort still under construction. Initially conceived as an exclusive gay men's boutique resort, it evolved to welcome all guests based on early booking trends. Our task was to create an engaging digital presence that would showcase the resort's inclusive, refined aesthetic—before the physical property was complete.
The resort under construction, two weeks before opening.
2. Key Insights
Shaping an Inclusive Vision
2. Key Insights
Shaping an Inclusive Vision
2. Key Insights
Shaping an Inclusive Vision
The research focused on three key areas: stakeholder interviews for brand positioning, user personas for decision-making guidance, and competitive analysis to develop the value proposition. Through this process, we identified opportunities within our technical and resource constraints. Notably, the competitive analysis highlighted ways to stand out in the local hospitality market.
Brand Discovery
Through in-depth owner interviews, we established key brand attributes:
Brand Discovery
Through in-depth owner interviews, we established key brand attributes:
Brand Discovery
Through in-depth owner interviews, we established key brand attributes:
i
Casual Chic
Fun, friendly, stylish with relaxed elegance
ii
Flirty & Inviting
Balanced playful and refined messaging
iii
Natural Beauty
Emphasized Vieques' serene setting
User Research
Our initial research focused on our primary persona, Julian the Jetsetter:
44-year-old Creative Director from NYC seeking stylish, LGBTQ+-friendly escapes that balance luxury with authenticity
Values inclusive spaces, upscale amenities, and opportunities to connect with like-minded travelers in a relaxed setting
Discovers destinations through social media, researches on mobile but finalizes bookings on desktop
To reflect the evolving audience, I expanded the research to include Nadia, a marketing executive from San Juan who likes to take daytrips to islands in the region. Her perspective helped us create messaging that balances sophistication with inclusivity while emphasizing the connection to nature and local culture.
Read more +
Our initial research focused on our primary persona, Julian the Jetsetter:
44-year-old Creative Director from NYC seeking stylish, LGBTQ+-friendly escapes that balance luxury with authenticity
Values inclusive spaces, upscale amenities, and opportunities to connect with like-minded travelers in a relaxed setting
Discovers destinations through social media, researches on mobile but finalizes bookings on desktop
To reflect the evolving audience, I expanded the research to include Nadia, a marketing executive from San Juan who likes to take daytrips to islands in the region. Her perspective helped us create messaging that balances sophistication with inclusivity while emphasizing the connection to nature and local culture.
Read more +
Our initial research focused on our primary persona, Julian the Jetsetter:
44-year-old Creative Director from NYC seeking stylish, LGBTQ+-friendly escapes that balance luxury with authenticity
Values inclusive spaces, upscale amenities, and opportunities to connect with like-minded travelers in a relaxed setting
Discovers destinations through social media, researches on mobile but finalizes bookings on desktop
To reflect the evolving audience, I expanded the research to include Nadia, a marketing executive from San Juan who likes to take daytrips to islands in the region. Her perspective helped us create messaging that balances sophistication with inclusivity while emphasizing the connection to nature and local culture.
Read more +
Primary Persona
Primary Persona
Primary Persona
Secondary Persona
Secondary Persona
Secondary Persona
Competitive Analysis
Analysis of similar boutique resorts showed that Vieques' hospitality landscape mainly featured inclusive properties welcoming diverse guests. This validated the decision to pivot from an exclusively gay men's resort to an inclusive property while maintaining an LGBTQ+-friendly identity.
Competitive Analysis
Analysis of similar boutique resorts showed that Vieques' hospitality landscape mainly featured inclusive properties welcoming diverse guests. This validated the decision to pivot from an exclusively gay men's resort to an inclusive property while maintaining an LGBTQ+-friendly identity.
Competitive Analysis
Analysis of similar boutique resorts showed that Vieques' hospitality landscape mainly featured inclusive properties welcoming diverse guests. This validated the decision to pivot from an exclusively gay men's resort to an inclusive property while maintaining an LGBTQ+-friendly identity.
Constraints & Parameters
i
Tight timeline and limited budget
i
Tight timeline and limited budget
i
Tight timeline and limited budget
ii
Limited photography required design strategies that minimized reliance on high-quality, immersive images
ii
Limited photography required design strategies that minimized reliance on high-quality, immersive images
ii
Limited photography required design strategies that minimized reliance on high-quality, immersive images
iii
Technical requirement to integrate with CloudBeds booking engine
iii
Technical requirement to integrate with CloudBeds booking engine
iii
Technical requirement to integrate with CloudBeds booking engine
3. Design Decisions
Creating a Scalable Digital Presence
3. Design Decisions
Creating a Scalable Digital Presence
3. Design Decisions
Creating a Scalable Digital Presence
Building a seamless digital experience starts with a strong foundation. From prioritizing high-impact features to structuring intuitive navigation, every element was designed for clarity, efficiency, and scalability. This section outlines the strategic decisions that shaped the Club Vieques website—ensuring a flexible, high-converting platform that meets both guest needs and business goals.
2x2 Grid
Prioritizing the right features was key to creating a seamless booking experience. Using a 2x2 matrix, we identified high-impact, feasible solutions that balanced conversion goals with scalability. This framework ensured Club Vieques launched with essential, guest-focused features while laying the groundwork for future enhancements.
2x2 Grid
Prioritizing the right features was key to creating a seamless booking experience. Using a 2x2 matrix, we identified high-impact, feasible solutions that balanced conversion goals with scalability. This framework ensured Club Vieques launched with essential, guest-focused features while laying the groundwork for future enhancements.
2x2 Grid
Prioritizing the right features was key to creating a seamless booking experience. Using a 2x2 matrix, we identified high-impact, feasible solutions that balanced conversion goals with scalability. This framework ensured Club Vieques launched with essential, guest-focused features while laying the groundwork for future enhancements.
IA and Wireframes
Structuring the site for clarity and ease of use was essential to delivering a seamless guest experience. Through a strategic information architecture (IA) framework, we streamlined navigation, ensuring intuitive pathways to key actions like booking, exploring amenities, and travel planning. Wireframes translated this structure into a functional design, balancing clarity, conversion, and scalability while maintaining the resort’s premium, inviting feel.
Read more +
IA and Wireframes
Structuring the site for clarity and ease of use was essential to delivering a seamless guest experience. Through a strategic information architecture (IA) framework, we streamlined navigation, ensuring intuitive pathways to key actions like booking, exploring amenities, and travel planning. Wireframes translated this structure into a functional design, balancing clarity, conversion, and scalability while maintaining the resort’s premium, inviting feel.
Read more +
IA and Wireframes
Structuring the site for clarity and ease of use was essential to delivering a seamless guest experience. Through a strategic information architecture (IA) framework, we streamlined navigation, ensuring intuitive pathways to key actions like booking, exploring amenities, and travel planning. Wireframes translated this structure into a functional design, balancing clarity, conversion, and scalability while maintaining the resort’s premium, inviting feel.
Read more +
A streamlined navigation built for clarity and ease—balancing intuitive wayfinding with a playful, premium feel to guide guests seamlessly through booking, experiences, and travel planning.
A streamlined navigation built for clarity and ease—balancing intuitive wayfinding with a playful, premium feel to guide guests seamlessly through booking, experiences, and travel planning.
A streamlined navigation built for clarity and ease—balancing intuitive wayfinding with a playful, premium feel to guide guests seamlessly through booking, experiences, and travel planning.
Exploring layout and interactions that enhance clarity and engagement, adapting to limited photo assets while preserving a premium feel.
Exploring layout and interactions that enhance clarity and engagement, adapting to limited photo assets while preserving a premium feel.
Exploring layout and interactions that enhance clarity and engagement, adapting to limited photo assets while preserving a premium feel.
Determining content hierarchy on the 'Stay' page.
Determining content hierarchy on the 'Stay' page.
Determining content hierarchy on the 'Stay' page.
Designing for clarity and engagement without relying on immersive imagery.
Designing for clarity and engagement without relying on immersive imagery.
Designing for clarity and engagement without relying on immersive imagery.
Visual Design Strategy
The visual design strategy for Club Vieques balances casual elegance with a warm, inviting atmosphere. A classic modern serif paired with a clean sans-serif conveys luxury and clarity. The color palette, inspired by the island’s natural environment, features bright accents with white as the dominant color for an airy feel. Ample white space and stylized image containers create visual interest while compensating for limited immersive photography. The result is a design that’s effortlessly chic, flirty, and built for future growth.
Read more +
Visual Design Strategy
The visual design strategy for Club Vieques balances casual elegance with a warm, inviting atmosphere. A classic modern serif paired with a clean sans-serif conveys luxury and clarity. The color palette, inspired by the island’s natural environment, features bright accents with white as the dominant color for an airy feel. Ample white space and stylized image containers create visual interest while compensating for limited immersive photography. The result is a design that’s effortlessly chic, flirty, and built for future growth.
Read more +
Visual Design Strategy
The visual design strategy for Club Vieques balances casual elegance with a warm, inviting atmosphere. A classic modern serif paired with a clean sans-serif conveys luxury and clarity. The color palette, inspired by the island’s natural environment, features bright accents with white as the dominant color for an airy feel. Ample white space and stylized image containers create visual interest while compensating for limited immersive photography. The result is a design that’s effortlessly chic, flirty, and built for future growth.
Read more +
Custom stylized image containers add visual interest and structure, balancing layout while working with limited photography
Custom stylized image containers add visual interest and structure, balancing layout while working with limited photography
Custom stylized image containers add visual interest and structure, balancing layout while working with limited photography
A refined color palette inspired by the island’s natural beauty pairs with a modern serif and clean sans-serif for effortless readability and elegance.
A refined color palette inspired by the island’s natural beauty pairs with a modern serif and clean sans-serif for effortless readability and elegance.
A refined color palette inspired by the island’s natural beauty pairs with a modern serif and clean sans-serif for effortless readability and elegance.
A blend of vector artwork, curated photography, and AI-generated imagery creates a cohesive, immersive visual experience.
A blend of vector artwork, curated photography, and AI-generated imagery creates a cohesive, immersive visual experience.
A blend of vector artwork, curated photography, and AI-generated imagery creates a cohesive, immersive visual experience.
Technical Architecture
The technical architecture was designed to be both scalable and maintainable, with a focus on standardized components and flexible templates that could adapt as the resort grows.
Technical Architecture
The technical architecture was designed to be both scalable and maintainable, with a focus on standardized components and flexible templates that could adapt as the resort grows.
Technical Architecture
The technical architecture was designed to be both scalable and maintainable, with a focus on standardized components and flexible templates that could adapt as the resort grows.
Core Elements
Core Elements
Modular design system—Components that can be mixed and matched for new pages
Gallery blocks—Picture windows create striking image crops that elevate limited photo asse
Persistent 'Book Now' Button—Strategically placed call-to-ac
Scalable template system—allows for future growth
Key Deliverables
Established standardized image sizing and formatting guidelines
Established standardized image sizing and formatting guidelines
Developed responsive layout specifications
Read more +
Modular design system—Components that can be mixed and matched for new pages
Gallery blocks—Picture windows create striking image crops that elevate limited photo assets
Persistent 'Book Now' Button—Strategically placed call-to-action
Scalable template system—allows for future growth
Key Deliverables
Established standardized image sizing and formatting guidelines
Established standardized image sizing and formatting guidelines
Developed responsive layout specifications
Read more +
Core Elements
Modular design system—Components that can be mixed and matched for new pages
Gallery blocks—Picture windows create striking image crops that elevate limited photo assets
Persistent 'Book Now' Button—Strategically placed call-to-action
Scalable template system—allows for future growth
Key Deliverables
Established standardized image sizing and formatting guidelines
Established standardized image sizing and formatting guidelines
Developed responsive layout specifications
Read more +
Templates include Home, Accommodations, Sub pages (for Play and Relax pages), and Contact page.
Templates include Home, Accommodations, Sub pages (for Play and Relax pages), and Contact page.
Templates include Home, Accommodations, Sub pages (for Play and Relax pages), and Contact page.
Atomic design system designed with scalability in mind.
Atomic design system designed with scalability in mind.
Atomic design system designed with scalability in mind.
Modular gallery blocks use strategically sized picture windows to create visual interest while working within the constraints of limited high-quality photography assets.
Modular gallery blocks use strategically sized picture windows to create visual interest while working within the constraints of limited high-quality photography assets.
Modular gallery blocks use strategically sized picture windows to create visual interest while working within the constraints of limited high-quality photography assets.
Video demo showing how the Play page adapts across desktop, tablet, and mobile views while maintaining visual quality.
Video demo showing how the Play page adapts across desktop, tablet, and mobile views while maintaining visual quality.
Video demo showing how the Play page adapts across desktop, tablet, and mobile views while maintaining visual quality.
Content Framework
The content framework prioritizes adaptable, engaging content that optimizes search visibility while maintaining consistent messaging. The strategy focuses on high-impact copy that can scale with future updates.
Content Framework
The content framework prioritizes adaptable, engaging content that optimizes search visibility while maintaining consistent messaging. The strategy focuses on high-impact copy that can scale with future updates.
Content Framework
The content framework prioritizes adaptable, engaging content that optimizes search visibility while maintaining consistent messaging. The strategy focuses on high-impact copy that can scale with future updates.
Core Elements
Flexible content strategy that evolves with the resort's needs
Consistent brand voice throughout
Strategic internal linking for SEO
Key Deliverables
SEO optimization guidelines
SEO optimization guidelines
Asset management system with planned updates to showcase diverse guest experiences
Cross-linking component documentation
Read more +
Core Elements
Flexible content strategy that evolves with the resort's needs
Consistent brand voice throughout
Strategic internal linking for SEO
Key Deliverables
SEO optimization guidelines
SEO optimization guidelines
Asset management system with planned updates to showcase diverse guest experiences
Cross-linking component documentation
Read more +
Core Elements
Flexible content strategy that evolves with the resort's needs
Consistent brand voice throughout
Strategic internal linking for SEO
Key Deliverables
SEO optimization guidelines
SEO optimization guidelines
Asset management system with planned updates to showcase diverse guest experiences
Cross-linking component documentation
Read more +
Highlighting the strategic keywords and phrases that drive organic traffic to the site, reflecting our target audience's search behavior.
Highlighting the strategic keywords and phrases that drive organic traffic to the site, reflecting our target audience's search behavior.
Highlighting the strategic keywords and phrases that drive organic traffic to the site, reflecting our target audience's search behavior.
Content strategy documentation showing how SEO keywords, metadata, and page content were organized and tracked throughout development to ensure consistent messaging and searchability.
Content strategy documentation showing how SEO keywords, metadata, and page content were organized and tracked throughout development to ensure consistent messaging and searchability.
Content strategy documentation showing how SEO keywords, metadata, and page content were organized and tracked throughout development to ensure consistent messaging and searchability.
SEO Component Blocks—Design elements that combine search-optimized content with elegant typography and lush visuals to enhance both visibility and visual appeal.
SEO Component Blocks—Design elements that combine search-optimized content with elegant typography and lush visuals to enhance both visibility and visual appeal.
SEO Component Blocks—Design elements that combine search-optimized content with elegant typography and lush visuals to enhance both visibility and visual appeal.
4. Impact
& Ongoing Progress
4. Impact
& Ongoing Progress
4. Impact
& Ongoing Progress
The website launch marked a significant milestone for Club Vieques, delivering both immediate results and laying the groundwork for future growth. Here's how the solution made a difference:
Results
The website launched on time, allowing the resort to secure bookings for the winter season.
Flexible design systems enabled seamless updates, including translation-ready content for a Spanish version.
Results
The website launched on time, allowing the resort to secure bookings for the winter season.
Flexible design systems enabled seamless updates, including translation-ready content for a Spanish version.
Results
The website launched on time, allowing the resort to secure bookings for the winter season.
Flexible design systems enabled seamless updates, including translation-ready content for a Spanish version.
Post-Launch Support
Implemented comprehensive analytics and tracking
Provided ongoing technical guidance
Created new assets quickly when needed
Developing plans to integrate social media feeds and user-generated content into the site
Post-Launch Support
Implemented comprehensive analytics and tracking
Provided ongoing technical guidance
Created new assets quickly when needed
Developing plans to integrate social media feeds and user-generated content into the site
Post-Launch Support
Implemented comprehensive analytics and tracking
Provided ongoing technical guidance
Created new assets quickly when needed
Developing plans to integrate social media feeds and user-generated content into the site
Ongoing Initiatives
Content updates to showcase new property developments
Refinement of analytics strategy based on user behavior
Implementation of personalization features
Expansion of multilingual support for international markets
Ongoing Initiatives
Content updates to showcase new property developments
Refinement of analytics strategy based on user behavior
Implementation of personalization features
Expansion of multilingual support for international markets
Ongoing Initiatives
Content updates to showcase new property developments
Refinement of analytics strategy based on user behavior
Implementation of personalization features
Expansion of multilingual support for international markets
Full house, happy guests: Screenshots showing 100% occupancy and guest praise for the website's design.
Full house, happy guests: Screenshots showing 100% occupancy and guest praise for the website's design.
Full house, happy guests: Screenshots showing 100% occupancy and guest praise for the website's design.
“The site is beautiful and our guests think so too. We also loved the cost savings of having Michael handle everything himself.”
–Paul Vail, Owner
“The site is beautiful and our guests think so too. We also loved the cost savings of having Michael handle everything himself.”
–Paul Vail, Owner
“The site is beautiful and our guests think so too. We also loved the cost savings of having Michael handle everything himself.”
–Paul Vail, Owner
