Matahari Hills

Matahari Hills is a visionary real-estate project in Bali focused on sustainable living. Our task was to translate the project's philosophy — environmental awareness, investment value, and architectural harmony — into a modern web experience that could engage investors and buyers alike.

Challenge

The client needed more than a presentation website — they needed a digital system that informs, convinces, and converts. Key requirements:

• Create a premium, high-trust online presence aligned with investor expectations.
• Design an interface that works seamlessly in English and Indonesian.
• Integrate analytics, communication, and lead-management tools into a single conversion funnel.
• Deliver a fast, mobile-first experience optimized for search and performance.

Approach

1 — Architecture & Technology

We rebuilt the entire platform using Next.js 14 and React, with Storyblok CMS for flexible content management. The site uses static generation for speed, lit-element for reusable UI components, and Swiper.js for smooth visual storytelling. Deployed on Vercel, the platform benefits from automatic builds, CDN delivery, and HTTP/3 optimization.

2 — Integrated Analytics and CRM Flow

We embedded a complete analytics ecosystem — Google Tag Manager, GA4, Facebook Pixel, Yandex Metrica — to track every step of the visitor journey. Lead forms connect directly to Notion-based CRM through Make webhooks, ensuring zero loss between form submission and sales follow-up.

3 — UX & Visual Identity

The website's structure follows a clean scroll-based narrative: hero sections → project vision → location map → architecture gallery → investment offer. We built a brand-book defining typography, color palette, and tone of voice to align web and offline assets. Interactive elements include a Google Maps integration, WhatsApp chat widget, and micro-animations that emphasize trust and elegance.

4 — Conversion System & Funnel

Every landing-page section was mapped to the sales funnel:

• Reverse Squeeze Page → download guide / join newsletter
• Application Form → qualification and data enrichment
• Thank-You Page → onboarding and CRM handoff

This system allowed A/B testing and automatic lead scoring based on user behavior.

Results

• Delivered a high-performance Next.js website with 97/100 Lighthouse score
• Reduced page load time by 60% compared to the previous version
• Generated qualified leads via Google and Facebook ads at an average CPL of $64
• Enabled real-time reporting and CRM sync through Make automations
• Created a consistent brand identity for web, social media and investor materials

Insights

• Premium UX and performance directly impact trust in high-value B2C products.
• Integrating CRM and analytics from day one saves dozens of hours of manual work each month.
• Building with Next.js and Storyblok provides startup-grade flexibility even for traditional industries like real estate.

Tech Stack