Stilt Studios - Website Redesign

Role:

Lead UI/UX Designer & Framer Developer.

Tools:

Framer (CMS & Interactions), Figma, Notion (Project Management).

The Problem:

High technical complexity (3x3 modular systems) was creating cognitive load for users, leading to high bounce rates on product pages.

The Goal:

Transition the site from a static portfolio to a high-converting digital storefront that caters to both retail buyers (B2C) and real estate developers (B2B).

Strategic Thinking: The Dual-User Persona

The primary UX challenge was satisfying two very different audiences simultaneously:

  1. The Dreamer (B2C): Needs emotional storytelling, high-resolution lifestyle visuals, and "vibe" validation.

  2. The Developer (B2B): Needs technical specs, ROI data, modular scalability, and floor plans.

The Solution: I implemented a "Tiered Information Reveal" strategy. High-level lifestyle imagery captures interest (The Hook), while interactive "Technical Drawers" allow professionals to dive deep into modular specs without cluttering the UI.

Design Execution: "Spatial Branding"

To mirror the physical product—buildings that sit lightly on the land—I developed a design language centered on Weightlessness.

The "Floating" Layout

I utilized extreme white space and offset image compositions. By breaking the traditional "box" grid, the UI feels as unconstrained and airy as the villas themselves.

Interactive Modularity (Framer-Powered)

Instead of explaining the 3x3 modular system in text, I built a custom Scroll-Transform Showcase. As the user scrolls, the modular components of a villa assemble or disassemble on screen.

  • Technical Detail: Leveraged Framer's CMS filtering and sticky positioning to keep the "Core Unit" in view while the "Add-ons" (Decks, Pools, Extra Rooms) cycled through.

Immersive Storytelling (The Grün Series)

I shifted the visual hierarchy to full-bleed, high-contrast imagery. This centers the "Negative CO2" impact and the "Nature-First" philosophy, moving the user from "Shopping" to "Investing in a Movement."

Technical Infrastructure & Scalability

For a fast-growing tech-architecture firm, the website must scale as quickly as the prefabricated units.

  • Modular CMS Architecture: I built a "Global Component Library" in Framer. This allows the Stilt Studios team to deploy new product lines (e.g., Tiny House vs. Family Village) in minutes by simply swapping CMS data, ensuring the digital footprint matches their global expansion.

  • Performance Engineering: To maintain high-definition visual fidelity without sacrificing speed, I optimized asset delivery through lazy-loading and custom SVG animations for technical diagrams, ensuring a seamless experience across mobile and desktop.

The Impact: Converting Interest into Action

The redesign successfully repositioned Stilt Studios as a leader in the sustainable prop-tech space.

  • Reduced Friction: By categorizing collections into "Lifestyle Silos," the path to the "Catalog Download" (the primary lead magnet) was significantly shortened.

  • B2B Credibility: The inclusion of accessible floor plans and modular logic increased the quality of inquiries from developers and commercial partners.

  • Brand Authority: The polished, high-performance interactions removed the "trust gap," aligning the digital experience with the premium price point of the physical villas.

Recent Designs

Let's Connect

Let's Build Together

E-mail

Starting from $1,999

Linkedin

Starting from $4,999

Connect with me through Linkedin: https://www.linkedin.com/in/naufalgiffari/

Image banner

Let's Connect

Let's Build Together

E-mail

Starting from $1,999

Linkedin

Starting from $4,999

Connect with me through Linkedin: https://www.linkedin.com/in/naufalgiffari/

Image banner

Let's Connect

Let's Build Together

E-mail

Starting from $1,999

Linkedin

Starting from $4,999

Connect with me through Linkedin: https://www.linkedin.com/in/naufalgiffari/

Image banner

Create a free website with Framer, the website builder loved by startups, designers and agencies.