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.

icon Visit Website
arrow

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 a 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.
a luxury villa with white domes in a beautiful landscape

Credit: Kosmos Stargazing Resort

Design

reference

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
stargazing villa card galaxy villa card

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

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 months of development time. We launched on 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.