Club Vieques
Crafting a Boutique Digital Experience on a Budget
Club Vieques
Crafting a Boutique Digital Experience on a Budget
Club Vieques
Crafting a Boutique Digital Experience on a Budget
TYPE
Website Design and Development
Industry
Hospitality
Duration
9 weeks
Tools
Figma, Framer, Microsoft Office, Adobe CC, Google Workspace, ChatGPT-4, Claude
Team/Role
Sole designer: led research, UX, UI, branding, content strategy, and no-code implementation in Framer
TYPE
Website Design and Development
Industry
Hospitality
Duration
9 weeks
Tools
Figma, Framer, Microsoft Office, Adobe CC, Google Workspace, ChatGPT-4, Claude
Team/Role
Sole designer: led research, UX, UI, branding, content strategy, and no-code implementation in Framer
TYPE
Website Design and Development
Industry
Hospitality
Duration
9 weeks
Tools
Figma, Framer, Microsoft Office, Adobe CC, Google Workspace, ChatGPT-4, Claude
Team/Role
Sole designer: led research, UX, UI, branding, content strategy, and no-code implementation in Framer
Club Vieques needed a digital presence to attract travelers before the resort opened. I led the brand story, designed a mobile-first site in Framer, and used AI tools to support research, writing, and development—delivering a flexible experience the team could grow without developer support.
Club Vieques needed a digital presence to attract travelers before the resort opened. I led the brand story, designed a mobile-first site in Framer, and used AI tools to support research, writing, and development—delivering a flexible experience the team could grow without developer support.
Club Vieques needed a digital presence to attract travelers before the resort opened. I led the brand story, designed a mobile-first site in Framer, and used AI tools to support research, writing, and development—delivering a flexible experience the team could grow without developer support.
The Outcome
Launched a polished site that delivered early bookings and set the foundation for growth.
The approach
Reframed the brand to better connect with modern travelers and broaden appeal.
The impact
Fully booked ahead of opening, with a digital experience that scaled alongside demand.
The Outcome
Launched a polished site that delivered early bookings and set the foundation for growth.
The approach
Reframed the brand to better connect with modern travelers and broaden appeal.
The impact
Fully booked ahead of opening, with a digital experience that scaled alongside demand.
The Outcome
Launched a polished site that delivered early bookings and set the foundation for growth.
The approach
Reframed the brand to better connect with modern travelers and broaden appeal.
The impact
Fully booked ahead of opening, with a digital experience that scaled alongside demand.
Problem
How do you market a resort before it’s built?
Problem
How do you market a resort before it’s built?
Problem
How do you market a resort before it’s built?
Club Vieques needed a website to promote a resort still under construction—just weeks from opening. Initially envisioned as a boutique retreat for gay men, the brand pivoted to welcome all guests after early booking trends. The goal was to create a digital presence that reflected its inclusive, elegant vibe and inspired trust from early bookers before the property even opened.
Club Vieques needed a website to promote a resort still under construction—just weeks from opening. Initially envisioned as a boutique retreat for gay men, the brand pivoted to welcome all guests after early booking trends. The goal was to create a digital presence that reflected its inclusive, elegant vibe and inspired trust from early bookers before the property even opened.
Club Vieques needed a website to promote a resort still under construction—just weeks from opening. Initially envisioned as a boutique retreat for gay men, the brand pivoted to welcome all guests after early booking trends. The goal was to create a digital presence that reflected its inclusive, elegant vibe and inspired trust from early bookers before the property even opened.
No finished rooms. No final photos. Just a view—and a story that needed telling.
No finished rooms. No final photos. Just a view—and a story that needed telling.
No finished rooms. No final photos. Just a view—and a story that needed telling.
Discovery
Understanding the Vision and the Vacationer
Discovery
Understanding the Vision and the Vacationer
Discovery
Understanding the Vision and the Vacationer
I kicked off with interviews to understand the owners’ goals, concerns, and what kind of guest they hoped to attract. Light market research helped shape two guest archetypes, while a competitive audit revealed gaps in structure, tone, and content. These insights grounded the brand voice and mapped a more focused user experience.
I kicked off with interviews to understand the owners’ goals, concerns, and what kind of guest they hoped to attract. Light market research helped shape two guest archetypes, while a competitive audit revealed gaps in structure, tone, and content. These insights grounded the brand voice and mapped a more focused user experience.
I kicked off with interviews to understand the owners’ goals, concerns, and what kind of guest they hoped to attract. Light market research helped shape two guest archetypes, while a competitive audit revealed gaps in structure, tone, and content. These insights grounded the brand voice and mapped a more focused user experience.
Casual Chic
Relaxed but intentional. The brand balances modern design with laid-back island living—no luxury for luxury’s sake, just good taste with room to breathe.
Casual Chic
Relaxed but intentional. The brand balances modern design with laid-back island living—no luxury for luxury’s sake, just good taste with room to breathe.
Flirty & Inviting
A little playful, a little polished. Messaging leads with warmth and intimacy, striking the right tone between exclusive and approachable.
Flirty & Inviting
A little playful, a little polished. Messaging leads with warmth and intimacy, striking the right tone between exclusive and approachable.
Flirty & Inviting
A little playful, a little polished. Messaging leads with warmth and intimacy, striking the right tone between exclusive and approachable.
Natural Beauty
The experience starts with the land. Design choices foreground the island’s lushness, letting real views and local textures take the spotlight.a
Natural Beauty
The experience starts with the land. Design choices foreground the island’s lushness, letting real views and local textures take the spotlight.a
Natural Beauty
The experience starts with the land. Design choices foreground the island’s lushness, letting real views and local textures take the spotlight.a
Meet the Guests
These lightweight personas captured two sides of the target audience — helping shape tone, layout, and messaging throughout the site.
Meet the Guests
These lightweight personas captured two sides of the target audience — helping shape tone, layout, and messaging throughout the site.
Meet the Guests
These lightweight personas captured two sides of the target audience — helping shape tone, layout, and messaging throughout the site.
Julian the Jetsetter
Design-forward and privacy-seeking, but still wants fun and connection on his terms.
Julian the Jetsetter
Design-forward and privacy-seeking, but still wants fun and connection on his terms.
Julian the Jetsetter
Design-forward and privacy-seeking, but still wants fun and connection on his terms.
Nadia the Nature Lover
A laid-back weekender from the region, drawn to simplicity, sunshine, and low-key escapes.
Nadia the Nature Lover
A laid-back weekender from the region, drawn to simplicity, sunshine, and low-key escapes.
Nadia the Nature Lover
A laid-back weekender from the region, drawn to simplicity, sunshine, and low-key escapes.
Competitive Positioning
Inclusive messaging was everywhere. We leaned into tone and visuals to carve out space—keeping LGBTQ+ roots while broadening appeal.
Competitive Positioning
Inclusive messaging was everywhere. We leaned into tone and visuals to carve out space—keeping LGBTQ+ roots while broadening appeal.
Competitive Positioning
Inclusive messaging was everywhere. We leaned into tone and visuals to carve out space—keeping LGBTQ+ roots while broadening appeal.
Local Trends, New Territory
An audit of regional brands confirmed inclusive messaging was table stakes—clear tone and strong visuals became our edge.
Local Trends, New Territory
An audit of regional brands confirmed inclusive messaging was table stakes—clear tone and strong visuals became our edge.
Local Trends, New Territory
An audit of regional brands confirmed inclusive messaging was table stakes—clear tone and strong visuals became our edge.
These insights gave us the direction we needed: build trust fast, lead with personality, and make every moment feel intentional—especially on mobile.
These insights gave us the direction we needed: build trust fast, lead with personality, and make every moment feel intentional—especially on mobile.
These insights gave us the direction we needed: build trust fast, lead with personality, and make every moment feel intentional—especially on mobile.
Solutions
Building Toward Launch
Solutions
Building Toward Launch
Solutions
Building Toward Launch
With just weeks until opening, we used a 2x2 grid to prioritize scope and move fast. Every decision supported one goal: launch a flexible, elevated experience that would grow with the brand. The sections below outline how I translated that vision into design and implementation.
With just weeks until opening, we used a 2x2 grid to prioritize scope and move fast. Every decision supported one goal: launch a flexible, elevated experience that would grow with the brand. The sections below outline how I translated that vision into design and implementation.
With just weeks until opening, we used a 2x2 grid to prioritize scope and move fast. Every decision supported one goal: launch a flexible, elevated experience that would grow with the brand. The sections below outline how I translated that vision into design and implementation.
Prioritization & Planning
To define scope and direction, I mapped ideas against effort and impact, then translated them into architecture, wireframes, and workflows.
Prioritization & Planning
To define scope and direction, I mapped ideas against effort and impact, then translated them into architecture, wireframes, and workflows.
Prioritization & Planning
To define scope and direction, I mapped ideas against effort and impact, then translated them into architecture, wireframes, and workflows.
Prioritization Grid
Used a 2x2 framework to focus scope and identify high-impact features.
Information Architecture
Defined the site structure around core pages and user priorities.
Wireframe Sketches
Quick iterations clarified layout and structure around real user needs.
Mid-Fidelity Wires
Refined structure and interaction flows to prepare for visual design.
Prioritization Grid
Used a 2x2 framework to focus scope and identify high-impact features.
Information Architecture
Defined the site structure around core pages and user priorities.
Wireframe Sketches
Quick iterations clarified layout and structure around real user needs.
Mid-Fidelity Wires
Refined structure and interaction flows to prepare for visual design.
Prioritization Grid
Used a 2x2 framework to focus scope and identify high-impact features.
Information Architecture
Defined the site structure around core pages and user priorities.
Wireframe Sketches
Quick iterations clarified layout and structure around real user needs.
Mid-Fidelity Wires
Refined structure and interaction flows to prepare for visual design.
Prioritization Grid
Used a 2x2 framework to focus scope and identify high-impact features.
Information Architecture
Defined the site structure around core pages and user priorities.
Wireframe Sketches
Quick iterations clarified layout and structure around real user needs.
Mid-Fidelity Wires
Refined structure and interaction flows to prepare for visual design.
Prioritization Grid
Used a 2x2 framework to focus scope and identify high-impact features.
Information Architecture
Defined the site structure around core pages and user priorities.
Wireframe Sketches
Quick iterations clarified layout and structure around real user needs.
Mid-Fidelity Wires
Refined structure and interaction flows to prepare for visual design.
Prioritization Grid
Used a 2x2 framework to focus scope and identify high-impact features.
Information Architecture
Defined the site structure around core pages and user priorities.
Wireframe Sketches
Quick iterations clarified layout and structure around real user needs.
Mid-Fidelity Wires
Refined structure and interaction flows to prepare for visual design.
Prioritization Grid
Used a 2x2 framework to focus scope and identify high-impact features.
Information Architecture
Defined the site structure around core pages and user priorities.
Wireframe Sketches
Quick iterations clarified layout and structure around real user needs.
Mid-Fidelity Wires
Refined structure and interaction flows to prepare for visual design.
Prioritization Grid
Used a 2x2 framework to focus scope and identify high-impact features.
Information Architecture
Defined the site structure around core pages and user priorities.
Wireframe Sketches
Quick iterations clarified layout and structure around real user needs.
Mid-Fidelity Wires
Refined structure and interaction flows to prepare for visual design.
Visual System
With no final photography, the design relied on typography, color, and image direction to express the brand and hint at the experience to come.
Visual System
With no final photography, the design relied on typography, color, and image direction to express the brand and hint at the experience to come.
Visual System
With no final photography, the design relied on typography, color, and image direction to express the brand and hint at the experience to come.
Layout Flexibility
Designed responsive components that flexed for future content.
Color & Contrast
Set tone with warm neutrals and accessible contrast.
Imagery Direction
Blended lifestyle and candid imagery to hint at the guest experience.
Layout Flexibility
Designed responsive components that flexed for future content.
Color & Contrast
Set tone with warm neutrals and accessible contrast.
Imagery Direction
Blended lifestyle and candid imagery to hint at the guest experience.
Layout Flexibility
Designed responsive components that flexed for future content.
Color & Contrast
Set tone with warm neutrals and accessible contrast.
Imagery Direction
Blended lifestyle and candid imagery to hint at the guest experience.
Layout Flexibility
Designed responsive components that flexed for future content.
Color & Contrast
Set tone with warm neutrals and accessible contrast.
Imagery Direction
Blended lifestyle and candid imagery to hint at the guest experience.
Layout Flexibility
Designed responsive components that flexed for future content.
Color & Contrast
Set tone with warm neutrals and accessible contrast.
Imagery Direction
Blended lifestyle and candid imagery to hint at the guest experience.
Layout Flexibility
Designed responsive components that flexed for future content.
Color & Contrast
Set tone with warm neutrals and accessible contrast.
Imagery Direction
Blended lifestyle and candid imagery to hint at the guest experience.
Layout Flexibility
Designed responsive components that flexed for future content.
Color & Contrast
Set tone with warm neutrals and accessible contrast.
Imagery Direction
Blended lifestyle and candid imagery to hint at the guest experience.
Layout Flexibility
Designed responsive components that flexed for future content.
Color & Contrast
Set tone with warm neutrals and accessible contrast.
Imagery Direction
Blended lifestyle and candid imagery to hint at the guest experience.
Technical Architecture
I handled implementation in Framer, structuring the site with modular components and page-level overrides to support updates post-launch.
Technical Architecture
I handled implementation in Framer, structuring the site with modular components and page-level overrides to support updates post-launch.
Technical Architecture
I handled implementation in Framer, structuring the site with modular components and page-level overrides to support updates post-launch.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Component Library
Built a reusable component library using atomic design principles to support fast builds and consistent UX.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Component Library
Built a reusable component library using atomic design principles to support fast builds and consistent UX.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Component Library
Built a reusable component library using atomic design principles to support fast builds and consistent UX.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Component Library
Built a reusable component library using atomic design principles to support fast builds and consistent UX.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Component Library
Built a reusable component library using atomic design principles to support fast builds and consistent UX.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Component Library
Built a reusable component library using atomic design principles to support fast builds and consistent UX.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Component Library
Built a reusable component library using atomic design principles to support fast builds and consistent UX.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Component Library
Built a reusable component library using atomic design principles to support fast builds and consistent UX.
Responsive Templates
Built flexible layouts with adaptive behaviors for every screen size.
Content Strategy
I planned the content, wrote the site copy, and implemented SEO and analytics—ensuring visibility, consistency, and insights from day one.
Content Strategy
I planned the content, wrote the site copy, and implemented SEO and analytics—ensuring visibility, consistency, and insights from day one.
Content Strategy
I planned the content, wrote the site copy, and implemented SEO and analytics—ensuring visibility, consistency, and insights from day one.
Search-Optimized Content
Wrote and tagged content to improve ranking for local and interest-based travel.
Search-Optimized Content
Wrote and tagged content to improve ranking for local and interest-based travel.
Search-Optimized Content
Wrote and tagged content to improve ranking for local and interest-based travel.
Impact
Results That Traveled
Impact
Results That Traveled
Impact
Results That Traveled
The site launched in just nine weeks and was fully booked ahead of opening. Guests described the experience as polished and welcoming, helping the resort stand out in a competitive travel market.
The site launched in just nine weeks and was fully booked ahead of opening. Guests described the experience as polished and welcoming, helping the resort stand out in a competitive travel market.
The site launched in just nine weeks and was fully booked ahead of opening. Guests described the experience as polished and welcoming, helping the resort stand out in a competitive travel market.
Guests described the site as “beautiful,” “clean,” and “easy to use,” reinforcing brand trust before the resort even opened.
Guests described the site as “beautiful,” “clean,” and “easy to use,” reinforcing brand trust before the resort even opened.
Guests described the site as “beautiful,” “clean,” and “easy to use,” reinforcing brand trust before the resort even opened.
