Gambaran Proyek
My Office Asia (MOA) adalah broker sewa flexible workspace di Hong Kong, bekerja dengan operator mulai dari WeWork, Regus, IWG, JustCo hingga penyedia butik independen.
MOA datang dengan situs lama bergaya katalog yang terlihat seperti direktori listing dan tidak menyampaikan inti penawaran mereka — advisor pribadi, gratis untuk tenant, dengan garansi balasan dua jam.
Kami mengerjakan engagement secara end-to-end: discovery, design system, development, hardening production, dan handover berdokumentasi. Hasilnya adalah situs katalog publik dan admin tertutup yang dapat dijalankan tim MOA sendiri, diarsitekturkan agar penambahan Singapura, Taipei, atau Seoul nanti hanya konfigurasi, bukan rebuild.
Tantangan
MOA tidak sekadar membutuhkan redesain. Briefnya punya empat bagian bergerak:
- Reposisi pengalaman landing di sekitar penawaran advisor, bukan feed katalog yang datar.
- Beri tim admin nyata sehingga mereka memiliki katalog tanpa bergantung pada agency untuk edit harian.
- Rilis situs sebagai SEO-ready sejak hari pertama di niche kompetitif (flexible workspace Hong Kong).
- Arsitektur fondasi agar menambah pasar Asia baru nanti adalah perubahan konfigurasi, bukan penulisan ulang.
- Serahkan proyek dalam keadaan production-ready — tanpa TODO, tanpa nilai hardcoded, dengan dokumentasi.
Yang Kami Bangun — Situs Publik
Katalog publik adalah permukaan tempat calon klien MOA mendarat. Kami merancangnya di sekitar penawaran advisor, dengan inventori listing sebagai bukti pendukung, bukan headline.
- Landing fokus pada proposisi advisor (balas dua jam, gratis untuk tenant), dengan katalog sebagai bukti dukung.
- Pencarian katalog dengan filter distrik × tipe ruang × ukuran tim × operator, plus profil gedung dan operator.
- Halaman listing dengan galeri foto, fakta yang dibagikan dalam gedung, dan opsi terkait yang relevan.
- Lapisan editorial untuk bobot SEO: studi kasus, panduan distrik, how-it-works, FAQ, dan artikel longform.
- Formulir kontak dengan pengiriman terjamin dan anti-spam defense-in-depth (tanpa ketergantungan CAPTCHA pihak ketiga).
- Responsif penuh dari 320px hingga monitor 4K, dengan capping editorial pada layar ultra-wide.
Yang Kami Bangun — Admin
Admin memungkinkan tim MOA mengelola katalog sendiri tanpa keterlibatan engineering. Ini area tertutup, dirancang untuk realitas tim kecil, bukan IT enterprise.
- Otorisasi sisi server dengan 2FA TOTP opsional — bekerja untuk tim kecil tanpa overhead akun per-user.
- CRUD penuh untuk listing dan gedung dengan upload gambar dan validasi.
- Asisten editorial berbasis Claude di dalam admin untuk copywriting dan pemolesan konten.
- Runbook operasi terdokumentasi sehingga tim dapat melatih staf baru tanpa kami.
Keputusan Arsitektur & Engineering
Lima keputusan struktural membentuk codebase. Masing-masing membeli kapabilitas bisnis spesifik — bukan selera engineering semata.
White-label ready sejak hari pertama
Meski hanya pasar Hong Kong yang aktif, arsitektur mendukung banyak pasar dan brand. Data konten, brand token, dan metadata SEO terisolasi dari layer komponen, sehingga menambah Singapura atau Taipei nanti tidak memerlukan penulisan ulang UI. Ekspansi regional menjadi keputusan operasional, bukan proyek build.
Struktur domain-driven
Layering ketat tanpa dependensi ke atas: domains (tipe dan kontrak) → server (logika bisnis dan adapter database) → components (UI) → app (komposisi rute saja). Rute tidak pernah menyentuh tabel database — semua lewat provider boundary. Migrasi dari Supabase ke Postgres langsung atau provider lain tidak akan menyentuh UI.
Server-first React
App Router dengan Server Components di mana memungkinkan. Dari sekitar 400 komponen, hanya 83 yang berupa client component, dan setiap satu dibenarkan (state, event handler, atau API browser). Ini meminimalkan bundle JavaScript dan meningkatkan time-to-interactive.
Defense-in-depth untuk formulir publik
Tanpa ketergantungan reCAPTCHA atau Turnstile eksternal. Field honeypot, cek umur form (memfilter replay instan), rate limit per-IP, dan validasi Zod di sisi server. Menghentikan spam tanpa membuat prospek nyata melewati puzzle.
Design system terokenisasi penuh
Setelah desain disetujui, kami menjalankan refactor CSS sembilan tahap: setiap warna, ukuran font, radius, shadow, spacing, dan durasi motion adalah token semantik. Hasil: nol nilai font-size hardcoded di 144 modul CSS. Perubahan global apa pun — warna aksen, skala spacing dasar, motion feel — adalah satu edit di globals.css.
Atlas-edge fluid layout
Alih-alih breakpoint tetap untuk gutter horizontal, satu clamp(24px, 5.55vw, 80px) yang mengontrolnya. Konten beradaptasi mulus dari mobile ke desktop dan ditahan dalam rentang editorial 1600px pada layar lebar — pola Apple / Stripe / Linear — sehingga layout tidak melebar di monitor 4K.
Kesiapan Produksi
Sebelum handover, kami menjalankan audit end-to-end di setiap dimensi yang memengaruhi kualitas peluncuran.
- Security headers: X-Frame-Options, Content-Type-Options, Referrer-Policy, Permissions-Policy lengkap, Cross-Origin-Opener-Policy.
- SEO: sitemap dinamis mencakup country / district / building / listing / operator, robots.txt dengan staging guard, JSON-LD structured data, dan metadata per halaman.
- Aksesibilitas: aria-label, skip link, penanganan prefers-reduced-motion, 143 gambar dekoratif ditandai aria-hidden, landmark semantik di seluruh halaman.
- Performa: rendering server-first, loading skeleton pada empat rute traffic tertinggi, bundle analyzer opsional, next/image dengan sizes yang benar di mana-mana.
- Operasi: /api/health untuk uptime monitoring, cutover produksi yang terdokumentasi, dan README diperluas dengan runbook tim.
- Build produksi: ~5 detik kompilasi, 71 halaman statically generated, nol error TypeScript, nol console.log di produksi.
Dalam Angka
Tech Stack
Galeri Proyek
Studi Kasus
Mari bangun sesuatu yang
membawa Anda maju.
Kami merancang, meluncurkan, dan mengembangkan sistem yang bekerja sebagai satu kesatuan — bukan tumpukan tools yang terpisah. Ceritakan website, alur pemesanan langsung, portal, atau platform operasional yang Anda butuhkan; kami akan menjelaskan scope dan langkah berikutnya sebelum pekerjaan dimulai.