ORBITURE: PRODUCTION WEBFLOW BUILD

GALAXY X832P-19:
A DESIGN EXPERIMENT

making data input delightful

making data input delightful

Most online forms are boring. This project explores how tactile interaction can make preference gathering engaging while powering a recommendation engine.
Most online forms are boring. This project explores how tactile interaction can make preference gathering engaging while powering a recommendation engine.

ROLE

Solo Designer/Developer

RESPONSIBILITIES

CMS architecture & relational data structure

Custom interaction design & JavaScript implementation

Recommendation algorithm development

Visual design & AI-generated imagery

Responsive design & animation systems

This project started as a challenge: Could I learn production Webflow in 3 weeks by building something technically ambitious? Rather than following tutorials, I decided to learn by shipping - creating a complete travel booking site with multi-collection CMS, custom interactions, and algorithmic recommendations. The result is a functional proof-of-concept that demonstrates rapid technical learning and the ability to implement complex logic in no-code platforms.

The goal wasn't just to make something that looked good. It was to solve a real UX problem: how do you capture nuanced user preferences in an engaging way while simultaneously collecting quantifiable data for personalization?

CHALLENGE

Most online forms are boring dropdown menus and radio buttons. They're functional but forgettable. How could I create an input method that was genuinely engaging - where the interaction itself felt meaningful - while still collecting precise data for a recommendation system?

Additionally, I needed to build this while learning Webflow from scratch. No dev team. No safety net. Just documentation, experimentation, and a deadline.

The technical challenges were clear: build a scalable CMS that could support multiple destinations, create a custom interaction pattern that converted qualitative feelings into quantitative scores, and implement matching logic that actually surfaced relevant recommendations.

ONE

APPROACH

CMS-First Thinking

I started by architecting the data structure. Three interconnected collections: Destinations, Hotels, and Activities. Each hotel and activity tagged with primary and secondary attributes across six concepts: relaxation, adventure, culture, social, nature, and luxury. This tag system would power the entire recommendation engine.

The CMS needed to be scalable - built for one destination (Junara) but designed to support multiple planets without restructuring.

I started by architecting the data structure. Three interconnected collections: Destinations, Hotels, and Activities. Each hotel and activity tagged with primary and secondary attributes across six concepts: relaxation, adventure, culture, social, nature, and luxury. This tag system would power the entire recommendation engine.

The CMS needed to be scalable - built for one destination (Junara) but designed to support multiple planets without restructuring.

I started by architecting the data structure. Three interconnected collections: Destinations, Hotels, and Activities. Each hotel and activity tagged with primary and secondary attributes across six concepts: relaxation, adventure, culture, social, nature, and luxury. This tag system would power the entire recommendation engine.

The CMS needed to be scalable - built for one destination (Junara) but designed to support multiple planets without restructuring.

I started by architecting the data structure. Three interconnected collections: Destinations, Hotels, and Activities. Each hotel and activity tagged with primary and secondary attributes across six concepts: relaxation, adventure, culture, social, nature, and luxury. This tag system would power the entire recommendation engine.

The CMS needed to be scalable - built for one destination (Junara) but designed to support multiple planets without restructuring.

Interaction Design

For the preference input, I designed a "blob form" - six sequential questions where users press and hold glowing organic shapes. Hold time converts linearly to a preference score (0-1 scale). As users progress, previous blobs dim and layer beneath, creating a unique visual composition while tracking their data.

This solved multiple problems: it's engaging, it provides nuanced input (not just yes/no), and it creates visual feedback that makes abstract preferences feel tangible.

For the preference input, I designed a "blob form" - six sequential questions where users press and hold glowing organic shapes. Hold time converts linearly to a preference score (0-1 scale). As users progress, previous blobs dim and layer beneath, creating a unique visual composition while tracking their data.

This solved multiple problems: it's engaging, it provides nuanced input (not just yes/no), and it creates visual feedback that makes abstract preferences feel tangible.

For the preference input, I designed a "blob form" - six sequential questions where users press and hold glowing organic shapes. Hold time converts linearly to a preference score (0-1 scale). As users progress, previous blobs dim and layer beneath, creating a unique visual composition while tracking their data.

This solved multiple problems: it's engaging, it provides nuanced input (not just yes/no), and it creates visual feedback that makes abstract preferences feel tangible.

For the preference input, I designed a "blob form" - six sequential questions where users press and hold glowing organic shapes. Hold time converts linearly to a preference score (0-1 scale). As users progress, previous blobs dim and layer beneath, creating a unique visual composition while tracking their data.

This solved multiple problems: it's engaging, it provides nuanced input (not just yes/no), and it creates visual feedback that makes abstract preferences feel tangible.

Algorithmic Matching

The backend logic calculates weighted scores: primary tags count as 1.0, secondary tags as 0.6. The system scores every hotel and activity against the user's six preference scores, selects the best match, and dynamically filters CMS content on the results page.

All of this runs client-side using URL parameters - no backend required.

The backend logic calculates weighted scores: primary tags count as 1.0, secondary tags as 0.6. The system scores every hotel and activity against the user's six preference scores, selects the best match, and dynamically filters CMS content on the results page.

All of this runs client-side using URL parameters - no backend required.

The backend logic calculates weighted scores: primary tags count as 1.0, secondary tags as 0.6. The system scores every hotel and activity against the user's six preference scores, selects the best match, and dynamically filters CMS content on the results page.

All of this runs client-side using URL parameters - no backend required.

The backend logic calculates weighted scores: primary tags count as 1.0, secondary tags as 0.6. The system scores every hotel and activity against the user's six preference scores, selects the best match, and dynamically filters CMS content on the results page.

All of this runs client-side using URL parameters - no backend required.

Futuristic alien landscape with smooth, layered terrain and glowing horizon under a surreal sky
Futuristic alien landscape with smooth, layered terrain and glowing horizon under a surreal sky
Futuristic alien landscape with smooth, layered terrain and glowing horizon under a surreal sky
Six small sci-fi environment thumbnails showing futuristic architecture and landscapes from the Galaxy X832p-19 project
Six small sci-fi environment thumbnails showing futuristic architecture and landscapes from the Galaxy X832p-19 project
Six small sci-fi environment thumbnails showing futuristic architecture and landscapes from the Galaxy X832p-19 project
Floating alien island landscape with lush green trees and a glowing lake, set against a giant planet in the sky
Floating alien island landscape with lush green trees and a glowing lake, set against a giant planet in the sky
Floating alien island landscape with lush green trees and a glowing lake, set against a giant planet in the sky
Floating alien island landscape with lush green trees and a glowing lake, set against a giant planet in the sky

TWO

EXECUTION

The Interactive System

Each of the six blob interactions follows the same pattern: user sees a question, presses and holds a colorful blob, the blob grows based on hold duration, user releases, and the system captures their score. Previous blobs remain visible but dimmed, creating a layered composition that visualizes their complete preference profile.

The technical implementation required custom JavaScript to manage state across six steps, calculate scores, handle visual transitions, and construct the URL parameters that power the results page.

Each of the six blob interactions follows the same pattern: user sees a question, presses and holds a colorful blob, the blob grows based on hold duration, user releases, and the system captures their score. Previous blobs remain visible but dimmed, creating a layered composition that visualizes their complete preference profile.

The technical implementation required custom JavaScript to manage state across six steps, calculate scores, handle visual transitions, and construct the URL parameters that power the results page.

Each of the six blob interactions follows the same pattern: user sees a question, presses and holds a colorful blob, the blob grows based on hold duration, user releases, and the system captures their score. Previous blobs remain visible but dimmed, creating a layered composition that visualizes their complete preference profile.

The technical implementation required custom JavaScript to manage state across six steps, calculate scores, handle visual transitions, and construct the URL parameters that power the results page.

Each of the six blob interactions follows the same pattern: user sees a question, presses and holds a colorful blob, the blob grows based on hold duration, user releases, and the system captures their score. Previous blobs remain visible but dimmed, creating a layered composition that visualizes their complete preference profile.

The technical implementation required custom JavaScript to manage state across six steps, calculate scores, handle visual transitions, and construct the URL parameters that power the results page.

CMS & Dynamic Filtering

The Webflow CMS powers everything. Hotels and activities each have primary and secondary tags, and the recommendation algorithm scores them against user preferences. The results page uses JavaScript to read URL parameters and dynamically filter CMS collection lists to show only matched content.

The Webflow CMS powers everything. Hotels and activities each have primary and secondary tags, and the recommendation algorithm scores them against user preferences. The results page uses JavaScript to read URL parameters and dynamically filter CMS collection lists to show only matched content.

The Webflow CMS powers everything. Hotels and activities each have primary and secondary tags, and the recommendation algorithm scores them against user preferences. The results page uses JavaScript to read URL parameters and dynamically filter CMS collection lists to show only matched content.

The Webflow CMS powers everything. Hotels and activities each have primary and secondary tags, and the recommendation algorithm scores them against user preferences. The results page uses JavaScript to read URL parameters and dynamically filter CMS collection lists to show only matched content.

Responsive & Polished

Despite the tight timeline, I built full responsive layouts, implemented complex animations (parallax hero sections, modal systems, smooth transitions), and created cohesive visual design using AI-generated imagery for the fictional alien world.

Despite the tight timeline, I built full responsive layouts, implemented complex animations (parallax hero sections, modal systems, smooth transitions), and created cohesive visual design using AI-generated imagery for the fictional alien world.

Despite the tight timeline, I built full responsive layouts, implemented complex animations (parallax hero sections, modal systems, smooth transitions), and created cohesive visual design using AI-generated imagery for the fictional alien world.

Despite the tight timeline, I built full responsive layouts, implemented complex animations (parallax hero sections, modal systems, smooth transitions), and created cohesive visual design using AI-generated imagery for the fictional alien world.

Four alien character portraits with names and descriptions: Empress Thalassara, Kamburian Hambaru, Tiurel Xan, and Vaelen Sahris
Four alien character portraits with names and descriptions: Empress Thalassara, Kamburian Hambaru, Tiurel Xan, and Vaelen Sahris
Four alien character portraits with names and descriptions: Empress Thalassara, Kamburian Hambaru, Tiurel Xan, and Vaelen Sahris
Futuristic alien cityscape with towering structures, glowing lights, and advanced architecture under a dramatic sky
Futuristic alien cityscape with towering structures, glowing lights, and advanced architecture under a dramatic sky
Futuristic alien cityscape with towering structures, glowing lights, and advanced architecture under a dramatic sky

THREE

OUTCOME

What I Built:

  • Functional travel site with 3 interconnected CMS collections

  • Custom 6-step interaction system with real-time visual feedback

  • Weighted recommendation algorithm with dynamic content filtering

  • Complete responsive design with complex animation systems

  • All built in 3 weeks while learning the platform

What I Proved:

  • Ability to rapidly acquire new technical skills under deadline pressure

  • Can architect scalable systems and implement sophisticated logic in no-code tools

  • Comfortable combining interaction design, data structure, and algorithmic thinking

  • Ship ambitious solo projects without requiring hand-holding

This project demonstrates that I don't just design interfaces - I think through the entire system, from data architecture to user interaction to algorithmic output. And I can learn whatever tools are needed to execute.

Futuristic city skyline on an alien planet with tall towers and ringed planets in the background
Futuristic city skyline on an alien planet with tall towers and ringed planets in the background
Futuristic city skyline on an alien planet with tall towers and ringed planets in the background
Futuristic city skyline on an alien planet with tall towers and ringed planets in the background
Curved futuristic architecture with sleek white arches and lush greenery integrated into the buildings
Curved futuristic architecture with sleek white arches and lush greenery integrated into the buildings
Curved futuristic architecture with sleek white arches and lush greenery integrated into the buildings
Wide sci-fi cityscape with futuristic structures stretching across a mountainous horizon
Wide sci-fi cityscape with futuristic structures stretching across a mountainous horizon
Wide sci-fi cityscape with futuristic structures stretching across a mountainous horizon
Digital artwork of a humanoid figure with biomechanical headgear and intricate mechanical details
Digital artwork of a humanoid figure with biomechanical headgear and intricate mechanical details
Digital artwork of a humanoid figure with biomechanical headgear and intricate mechanical details

FOUR

WHAT I LEARNED

Webflow can handle far more complexity than I expected. With proper CMS architecture and custom code, you can build sophisticated applications - not just marketing sites.

No-code doesn't mean no-logic. The hardest parts weren't the visual design - they were architecting the data relationships and getting the JavaScript right for state management and filtering.

Building under deadline constraints forces better prioritization. I had to constantly choose between "cool" and "core functionality." That tension made the final product stronger because every element had to justify its existence.

Most importantly: tutorial hell is real, but building is better. I learned more in 3 weeks of shipping than I would have in months of courses.

Futuristic city suspended in the sky, with glowing platforms and green illuminated towers above a misty landscape
Futuristic city suspended in the sky, with glowing platforms and green illuminated towers above a misty landscape
Futuristic city suspended in the sky, with glowing platforms and green illuminated towers above a misty landscape

don't tell me you haven't checked out this project yet.

don't tell me you haven't checked out this project yet.

you're seriously missing out.

CHECK IT OUT

don't tell me you haven't checked out this project yet.

you're seriously missing out.

CHECK IT OUT

© 2025 Maggie Zukowski. All rights reserved. Portfolio content is displayed for illustrative purposes only and may be subject to confidentiality restrictions.
Please contact Maggie Zukowski for detailed information regarding specific projects.

© 2025 Maggie Zukowski. All rights reserved. Portfolio content is displayed for illustrative purposes only and may be subject to confidentiality restrictions.
Please contact Maggie Zukowski for detailed information regarding specific projects.

© 2025 Maggie Zukowski. All rights reserved. Portfolio content is displayed for illustrative purposes only and may be subject to confidentiality restrictions. Please contact Maggie Zukowski for detailed information regarding specific projects.

© 2025 Maggie Zukowski. All rights reserved. Portfolio content is displayed for illustrative purposes only and may be subject to confidentiality restrictions. Please contact Maggie Zukowski for detailed information regarding specific projects.