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 significantly more than a presentation page. Required was a digital system that:

• conveys a premium brand experience
• supports informed investor decision-making through facts, transparency, and storytelling
• consistently provides bilingual content (English/Indonesian)
• bundles analytics, CRM and lead funnel in a unified platform
• designed for high speed and strong SEO performance with a mobile-first approach

In short: Brand Experience + Conversion Engine + scalable technical architecture.

Approach

1 — Architecture & Technology

We completely rebuilt the platform based on a modern, scalable stack:

• Next.js 14 + React for performance and SEO-optimized rendering
• Storyblok CMS for flexible content structures
• Static Site Generation for international loading speed
• lit-element components for reusable UI building blocks
• Swiper.js for immersive, visual storytelling sequences
• Deployment via Vercel, including HTTP/3, CDN caching, automatic deployments

The result: an extremely fast, stable foundation, designed to support scalability and future expansion.

2 — Integrated Analytics and CRM Flow

We developed a complete analytics ecosystem that measures all touchpoints:

• Google Tag Manager, GA4, Facebook Pixel, Yandex Metrica
• Event tracking for scroll depth, map interactions, CTA clicks
• CRM integration via Make webhooks
• Central lead processing in a Notion-based CRM
• Real-time notifications for the sales team

This creates a fully automated funnel designed to minimize manual handling and reduce the risk of data loss across the funnel – from first impression to qualified inquiry.

3 — UX & Visual Identity

The website follows a clear, linear narrative structure: Hero → Vision → Location Map → Architecture → Investment Offer We developed:

• a consistent brandbook (typography, color palette, tone of voice)
• interactive modules like Google Maps, WhatsApp Chat, micro-animations
• a calm, trustworthy aesthetic that reflects premium real estate
• mobile-optimized page layouts for international audiences

The experience combines emotion (storytelling) with structure (investment arguments).

4 — Conversion System & Funnel

Every module became part of a data-driven sales funnel:

• Reverse Squeeze Page → Lead magnet / Downloads
• Application Form → Qualification and automatic data enrichment
• Thank-You Page → Onboarding & handover to CRM
• A/B tests for headlines, CTAs and visuals
• Rule-based lead qualification using predefined behavioral signals

This created a measurable, optimizable funnel for performance marketing.

Results

• Lighthouse score of up to 97/100 under standardized mobile test conditions
• Significantly reduced page load times compared to the previous platform version
• Generated qualified leads through paid acquisition campaigns, with average CPL values around $64 during the initial test campaigns
• 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