Skip to main content
Dark starry night sky background with 'Where The Stars Align With You' headline.

Kosmos Resort Website Redesign & Development

Reduced bounce rate by 10% and stabilized traffic 84% above the baseline after a WSJ feature, serving 6,800+ monthly visitors.

Visit Website

Technology

Webflow, JavaScript, Figma, Mews API

Service

Web Design, UX Design, Web Development, Responsive Design, API Integration, SEO

A website redesign and development project for Kosmos Stargazing Resort & Spa, an astrotourism resort in Alamosa, CO. Focused on enhancing the site and building a custom booking widget.

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

Old website hero section with very low contrast between the text and the background, and it shows the villa during the day time, which is less relevant to the stargazing experience.
Before
Website hero section featuring a dark galaxy background and improved contrast between the text and the background.
After

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 - Added 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

Form Submission Redesign

Old form design looks like basic HTML
Before
New form design with improved visual hierarchy, better spacing, and a more modern look that matches the overall site design.
After

Brand Ambassador Page Redesign

Split layout with beige background, contained hero photo on the right beside the heading and CTA.
Before
Full-bleed hero background with heading and Apply Here button overlaid in white text.
After
Desktop view of the booking calendar interface.Mobile view of the booking calendar interface.

Strategic Implementation: The Booking System

Self-Directed Learning

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.