Kosmos Stargazing Resort Website Redesign & Development - Project Case Study

Dark starry night sky background with 'Where The Stars Align With You' headline.

Results

Reduced bounce rate by 10% and stabilized traffic 84% above the baseline after a WSJ feature, serving 6,800+ monthly visitors. Reduced planned development scope by 80% by proposing deep-link integration over full custom booking system build.

Kosmos Resort Website Redesign & Development

Kosmos Stargazing Resort & Spa is a resort for astrotourism located in Alamosa, CO that blends luxuary and sustainibility. The project focused on enhancing the current website and develop a custom booking widget.

Visit Website

Technology

Webflow, JavaScript, Figma, Mews API

Service

Web Design, UX design, Web Development, Responsive Design, API integration, SEO

Project Overview

Kosmos Stargazing Resort needed a complete digital transformation. Their existing website was visually dated and failed to reflect the premium, immersive nature of the brand.

However, the challenge went beyond aesthetics. The critical requirement was a booking flow that prioritized villa selection over dates, which was a feature not natively supported by their property management system (Mews).

The Challenge

Stakeholders required an urgent launch to capture early reservations. The existing "date-first" flow forced users to guess availability—picking dates blindly only to find their desired villa unavailable. We needed a solution that offered a seamless, villa-first experience without 4 months-long custom build.

The Pivot

Instead of building a complex custom booking engine from scratch, I proposed a pragmatic alternative: a lightweight, custom calendar widget that deep-links directly into specific Mews booking engine states. This would solve the UX problem while drastically reducing development time and maintenance overhead.

The Hurdle

As the sole developer on a contract, I had no senior engineering support and had never worked with the Mews API. I had to independently navigate their documentation, experiment with endpoints, and engineer a solution that was both robust and secure.

Key Objectives

  1. Strategic UX: Shift from date-first to villa-first booking flow to align with user mental models.
  2. Technical Solvency: Independently learn and integrate Mews API to enable deep-linking.
  3. Brand Storytelling: Redesign the aesthetic to reflect the high-end, immersive nature of the resort.
  4. Accessibility: Ensure WCAG AA contrast compliance for fonts and contrast.
Geodesic white domes situated in a flat, grassy landscape with mountains in the distance.

Credit: Kosmos Stargazing Resort

Design

Website hero section featuring a galaxy background and a central 'Book Your Stay' call-to-action.

Homepage - Hero Section

  • Tagline for marketing
  • Big calls-to-action button with strong color contrast to draw users attention, because strong colors would pop up in user's periphery vision, guiding the user to the booking process
  • Enhancing the site's SEO to improve visibility and reach.
  • A galaxy video background to echo with the astrotourism theme
Villa booking card displaying amenities, price ($700/night), and interior photos of a bedroom inside a dome structure. Villa booking card displaying a night-time rendering of a dome illuminated against a starry desert sky.

Homepage - Villa Section

  • Key visual images and features to showcase the villa
  • We chose two vertically stacked villa cards, instead of the tabbed layout, so guests can discover both options by simply scrolling, no extra clicks required.
  • Lower interaction cost: Scrolling (native, continuous) beats clicking a tab (discrete, interruptive), especially on mobile.
  • Behavior match: Modern users expect to scroll (e.g. tiktok, instagram), not hop between tabbed views.
  • "Learn more" button if the user want to see more images and details
  • "Book this villa" button continues the booking process, opens the booking widget
Desktop view of the booking calendar interface. Mobile view of the booking calendar interface.

Strategic Implementation: The Booking System

Self-Directed Learning

Here's a rewritten version: With no senior developer to guide me, I dove into the Mews API documentation. I spent days testing endpoints by creating a copy of the Kosmos site on Webflow, directly implementing the API calls in JavaScript and using Vercel logs to debug. This self-taught knowledge was crucial in proving that a lightweight widget could replace a full custom build.

The Solution

I built a custom JavaScript calendar widget that:

  • Fetches real-time availability from Mews.
  • Auto-selects the first available date to reduce friction.
  • Generates a deep link that drops the user directly into the Mews booking engine.

The Result

This approach saved 80% of development scope. We launched ahead of schedule, and the simplified flow contributed to a smoother user journey.

Reflection

Pragmatic Engineering: This project reinforced that the best engineering solution isn't always the one with the most code. By leveraging the existing Mews ecosystem instead of rebuilding it, I delivered value faster and with less risk.

Fearless Learning: Tackling the Mews API without prior experience taught me that I can learn any technology if I break it down systematically. This confidence in self-directed learning is something I bring to every new challenge.