Islamic Green Village adalah developer perumahan syariah (bebas riba) dengan satu kawasan hunian. Sebelumnya, developer ini hanya punya situs single-page dengan ruang pengembangan yang terbatas. Proyek ini menggantinya dengan tema WordPress yang sepenuhnya custom, dibangun dari nol dengan PHP dan Tailwind CSS murni tanpa page builder. Hasilnya ada ruang untuk kalkulator KPR syariah, galeri foto, dan update progres pembangunan, yang semuanya bisa diubah sendiri oleh tim klien tanpa perlu developer untuk perubahan konten rutin.
Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.
Desktop
Mobile
Pekerjaan seperti ini biasanya dibagi ke pengembang, desainer UI/UX, desainer grafis, dan pemasar. Di proyek ini, keempat keahlian itu dikuasai satu orang, jadi setiap keputusan datang dari orang yang memahami keseluruhan proyek, bukan hanya bagiannya sendiri.
16
standar yang terpenuhi, dari kode hingga pemasaran.
Dampak bisnis di sini diukur dari 5 area: Kehadiran, Kualitas, Kepercayaan, Konversi dan Pertumbuhan. Semuanya mencakup bagaimana bisnisnya ditemukan, dipersepsikan, dan direspons.
Informasi yang tetap mudah dicari, tidak terkubur
Sebelum
Developer properti yang hanya mengandalkan media sosial untuk mengabarkan unit yang tersedia, harga, dan progres pembangunan akan melihat kabar itu tergeser oleh postingan baru dalam hitungan hari, tanpa tempat pasti yang bisa dicek ulang oleh calon pembeli yang serius.
Sesudah
Situs web menyajikan kabar yang sama di tempat yang rapi dan profesional, tersusun per halaman dan tidak tergeser di feed, sehingga calon pembeli yang serius selalu menemukan yang mereka cari.
Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.
Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.
Masalah yang muncul selama membangun proyek ini, dan hasil yang didapat dari menyelesaikannya.
Menghitung Margin KPR Syariah Secara Presisi
Rumus margin flat per tahun awalnya salah ditulis sebagai flat sekali, bukan dikali tenor. Diperbaiki dan diverifikasi ke spreadsheet perhitungan manual klien sampai hasilnya presisi.
Menghindari Markup yang Diketik Ulang di Banyak Halaman
Elemen seperti kartu CTA, tombol, dan badge terus muncul di halaman berbeda-beda, sehingga dibangun struktur ala atomic design (atoms, molecules, sections) agar tiap markup hanya diketik sekali.
Menutup Celah Keamanan Default WordPress
Instalasi WordPress default membuka banyak informasi yang bisa dipakai penyerang untuk mempelajari target sebelum melangkah lebih jauh. Celah ini ditutup dengan hardening berlapis di beberapa sisi sekaligus, dari perilaku login, penyamaran jejak teknis situs, sampai konfigurasi di level server, bukan hanya menambal satu celah yang terlihat.
Menjaga Setting Global Tetap Aman Saat Tema Diganti
Customizer bawaan WordPress menyimpan datanya sebagai theme_mod yang terikat ke tema aktif, jadi setting bisa hilang saat tema diganti. Masalah ini diselesaikan dengan plugin terpisah yang menyimpan setting sebagai option yang tidak bergantung pada tema.
Diagram Struktur Organisasi Tanpa Piksel Manual
Garis penghubung antar level organisasi harus menyatu dan bercabang dengan benar berapa pun jumlah anggotanya. Solusinya, posisi garis di desktop dihitung dari jumlah anggota per level, bukan nilai piksel yang di-hardcode dan akan berantakan begitu timnya berubah.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Arsitektur konten yang bisa berkembang
Permukaan serangan diperkecil
Celah API ditutup
Gambar di bawah 200KB
Tanpa query attachment N+1
Kompresi otomatis di setiap unggahan baru
Setting independen dari tema
Komponen reusable di seluruh situs
Sebelum
Situs single-page sebelumnya tidak memiliki ruang untuk kalkulator KPR, galeri progres, atau update berkala.
Sesudah
Tema custom yang baru punya CPT dan field ACF sendiri untuk setiap jenis konten, jadi klien bisa menambahkannya sendiri langsung dari wp-admin.
Sebelum
Instalasi WordPress default mengekspos informasi yang bisa dipakai penyerang untuk meriset target sebelum mencoba apa pun lebih jauh.
Sesudah
Hardening berlapis menutup celah-celah itu di berbagai titik, dari proteksi login sampai konfigurasi server.
Sebelum
Konten terstruktur masih bisa diakses lewat lapisan API meskipun halaman publiknya sudah dikunci. Celah ini makin berisiko kalau field sensitif ditambahkan di kemudian hari.
Sesudah
Celah itu kini sudah ditutup, sehingga mengunci halaman benar-benar ikut mengunci datanya.
Sebelum
Gambar beresolusi tinggi yang tersebar di seluruh situs, bukan hanya di satu bagian, berisiko memperlambat setiap halaman.
Sesudah
Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, sehingga halaman tetap cepat tanpa penurunan kualitas yang terlihat.
Sebelum
Tiap section yang menampilkan gambar ACF berisiko memicu query attachment-nya sendiri-sendiri, pola N+1 yang semakin parah setiap kali section baru ditambahkan.
Sesudah
Data gambar kini dimuat sekali per halaman lewat satu query batch, dan section baru otomatis ikut memakainya tanpa setup tambahan.
Sebelum
Kompresi hanya dilakukan sekali secara manual, sehingga foto yang diunggah klien nantinya akan masuk dalam ukuran penuh tanpa kompresi.
Sesudah
Pipeline khusus kini otomatis mengompres dan mengonversi setiap unggahan baru, sehingga halaman tetap cepat tanpa bergantung pada orang yang harus ingat mengoptimasi gambar secara manual.
Sebelum
Customizer bawaan WordPress menyimpan datanya dalam kondisi terikat ke tema yang sedang aktif.
Sesudah
Plugin terpisah kini menyimpan setting itu sebagai option yang independen dari tema, tetap aman meskipun tema diperbarui atau diganti nanti.
Sebelum
Elemen seperti kartu CTA dan tombol berisiko dibangun ulang dengan sedikit perbedaan setiap kali halaman baru membutuhkannya.
Sesudah
Struktur ala atomic design membuat setiap komponen hanya punya satu versi, yang dipakai ulang di banyak section di seluruh situs.
