Kosmos Stargazing Resort Website Redesign & Development - Project Case Study

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

Result

Collaborated with marketing to roll out the redesign, contributing to an average uplift of ~84 % increase in monthly visitors and decreased 10% bounce rate.

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 3-4 months of development time. We launched ahead of schedule, and the simplified flow contributed to a 84% increase in monthly visitors and 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.