Logo Resmi Fadhil
Fadhil NuruzzamanSoftware Engineer
Logo Resmi Fadhil
Landing PageRA Mutiara Islam Kendari2023

RA Mutiara Islam Kendari: Landing Page PPDB

RA Mutiara Islam Kendari rutin menjalankan kampanye iklan Meta dan TikTok tiap musim penerimaan, jadi mereka butuh landing page yang dibangun khusus untuk mengonversi traffic berbayar itu, bukan sekadar halaman informasi umum yang biasa dibagikan secara organik lewat WhatsApp.

Preview

Jelajahi Situsnya

Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.

Preview desktop RA Mutiara Islam Kendari: Landing Page PPDB

Desktop

Preview mobile RA Mutiara Islam Kendari: Landing Page PPDB

Mobile

Tech Stack

Teknologi Penggerak Proyek

Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.

Logo HTML
Logo CSS
Logo JavaScript
Logo Tailwind CSS
Logo VSCode
Logo Claude
Logo Cloudflare Pages
Logo GitHub
Logo Yarn
Logo Figma

Peran

Rincian per Skill

Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.

Web Development

  • Membeli domain dan mengonfigurasi DNS agar mengarah ke Cloudflare Pages.
  • Membangun landing page dengan HTML, CSS, dan Tailwind CSS.
  • Men-deploy dan hosting halaman lewat Cloudflare Pages, dengan codebase dikelola di GitHub.
  • Mengintegrasikan Facebook Pixel untuk tracking kampanye iklan.
  • Mengimplementasikan breakpoint responsif di berbagai jenis perangkat.
  • Mengoptimasi delivery gambar, JS, dan CSS untuk mencapai skor Google PageSpeed hijau di keempat kategori.
  • Menggunakan Claude untuk mempercepat pengembangan dan pekerjaan optimasi.

Web Design

  • Merancang UI/UX secara penuh dari nol, termasuk layout, palet warna, tipografi, dan ikon.
  • Merancang struktur single-page di sekitar best practice konversi iklan: hook, bagian-bagian, dan CTA yang jelas.
  • Merancang badge scarcity untuk menciptakan urgensi pendaftaran.
  • Menyusun konten jadi bagian-bagian yang jelas: profil sekolah, statistik, kegiatan, fasilitas, galeri, langkah pendaftaran, dan FAQ.
  • Menjaga hierarki visual tetap mudah dipindai untuk orang tua yang browsing di mobile.
  • Menyempurnakan layout dan penempatan konten berdasarkan data Google Analytics soal breakpoint, ukuran layar, dan lokasi.

Graphic Design

  • Menyesuaikan logo sekolah yang sudah ada untuk penggunaan web, menyesuaikan ukuran, format, dan latar belakang.
  • Memilih palet warna dan sistem tipografi.
  • Merancang ikon sorotan sederhana untuk keunggulan dan kegiatan sekolah.
  • Memilih dan crop foto fasilitas dan kegiatan untuk galeri.
  • Mengkurasi testimoni video dan footage galeri untuk membangun kepercayaan.
  • Membuat favicon situs.
  • Mengompres setiap gambar ke WebP dan di bawah 200KB sebelum diunggah, tanpa penurunan kualitas yang terlihat.

Digital Marketing

  • Menulis copy persuasif berfokus konversi untuk tiap bagian.
  • Menyusun halaman khusus untuk mengonversi traffic berbayar dari kampanye iklan Meta dan TikTok.
  • Mengoptimasi halaman di sekitar keyword target "PPDB TK Kendari".
  • Menyiapkan Google Search Console dan Google Analytics untuk memantau traffic.
  • Mengintegrasikan Facebook Pixel untuk tracking dan retargeting kampanye iklan.
  • Menganalisis performa iklan dan data analitik untuk terus menyempurnakan struktur dan hook halaman.

Sorotan

Di Balik Layar

Tinjauan lebih dekat soal apa yang ditawarkan produk jadinya, hambatan di sepanjang jalan, dan hasil akhirnya.

Fitur Utama

  • Desain full responsive di perangkat desktop dan mobile.
  • Gambar dioptimasi untuk loading cepat.
  • Integrasi Google Analytics dan Search Console.
  • Integrasi Facebook Pixel untuk tracking kampanye iklan.
  • Profil sekolah dan sorotan program.
  • Bagian "kenapa memilih sekolah ini".
  • Badge scarcity untuk menciptakan urgensi pendaftaran.
  • Tombol call-to-action yang jelas dan menonjol.
  • Testimoni video.
  • Statistik sekolah: jumlah alumni, tahun berdiri, jumlah guru, dan rasio guru-siswa.
  • Rincian kegiatan siswa: program keagamaan, akademik, dan outdoor.
  • Informasi jenjang pendidikan dan jam sekolah, dengan rincian kegiatan detail per jam.
  • Overview fasilitas.
  • Galeri foto dan video untuk membangun kepercayaan.
  • Panduan pendaftaran langkah demi langkah dengan persyaratan dokumen.
  • Informasi lokasi.
  • Bagian FAQ.

Tantangan yang Dihadapi

Waktu Pengerjaan yang Sangat Singkat

Landing page harus rilis sebelum musim pendaftaran dimulai, jadi pembangunan awalnya dipercepat dengan menggunakan Tailwind CSS untuk styling yang cepat.

Mengoptimasi untuk Traffic Iklan Berbayar, Bukan Cuma Pengunjung Organik

Traffic yang datang dari iklan Meta dan TikTok berperilaku berbeda dari pengunjung organik, jadi struktur halaman dan konten terus disempurnakan berdasarkan data Google Analytics soal breakpoint, ukuran layar, lokasi, dan waktu loading.

Mencapai Skor Google PageSpeed Sempurna

Mendapatkan skor hijau di keempat kategori PageSpeed membutuhkan optimasi hati-hati untuk delivery gambar, JS, dan CSS di banyak breakpoint perangkat.

Pelajaran yang Didapat

  • Belajar seberapa besar deadline yang ketat mempertajam pengambilan keputusan soal apa yang benar-benar penting untuk peluncuran.
  • Belajar memperlakukan landing page sebagai aset hidup yang digerakkan data, bukan pembangunan sekali jadi, karena traffic iklan berbayar terus memunculkan hal baru untuk diperbaiki.
  • Belajar seberapa besar kecepatan halaman langsung memengaruhi performa dan efisiensi biaya kampanye iklan.

Dampak

Masalah yang Terselesaikan Setelah Rilis

Bagaimana proyek ini mengubah keadaan bagi bisnis dan penggunanya setelah rilis.

Landing page iklan khusus

PageSpeed hijau di keempat kategori

Gambar di bawah 200KB

Konten kepercayaan di atas fold

Integrasi Facebook Pixel

Panduan pendaftaran mandiri

Proses desain berbasis data

Perbaikan Kritis

Landing Page yang Dibangun Khusus untuk Traffic Iklan Berbayar

Sebelum

Kampanye iklan mengarah ke halaman generik yang tidak dibangun untuk mengonversi traffic dingin dari Meta dan TikTok, berisiko membuang budget iklan.

Sesudah

Landing page khusus berfokus konversi sekarang menangkap dan mengonversi traffic iklan secara efisien, terus disempurnakan menggunakan data performa iklan dan analitik.

Performa

Skor Google PageSpeed di Bawah Target

Sebelum

Performa awal tidak konsisten di keempat kategori Google PageSpeed.

Sesudah

Optimasi berkelanjutan untuk delivery gambar, JS, dan CSS membawa keempat kategori jadi hijau semua.

Performa

Halaman Lambat Akibat Gambar yang Tidak Dioptimasi

Sebelum

Gambar beresolusi tinggi di seluruh situs, bukan cuma satu bagian, berisiko memperlambat setiap halaman.

Sesudah

Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, menjaga halaman tetap cepat tanpa penurunan kualitas yang terlihat.

Peningkatan

Membangun Kepercayaan Cepat untuk Traffic Iklan Dingin

Sebelum

Pengunjung dingin dari iklan cuma punya beberapa detik untuk memutuskan apakah sekolah ini terasa kredibel, dengan sedikit bahan pertimbangan.

Sesudah

Testimoni video, statistik sekolah, dan galeri fasilitas memberi pengunjung dingin alasan konkret untuk cepat percaya pada sekolah ini.

Peningkatan

Kemampuan Tracking dan Retargeting Iklan

Sebelum

Tidak ada cara untuk melacak pengunjung mana yang datang dari iklan atau me-retarget mereka nanti.

Sesudah

Integrasi Facebook Pixel sekarang melacak pengunjung yang datang dari iklan dan memungkinkan kampanye retargeting.

Peningkatan

Proses Pendaftaran yang Lebih Jelas

Sebelum

Calon orang tua belum punya gambaran jelas soal langkah pendaftaran atau dokumen yang dibutuhkan sebelum memulai.

Sesudah

Panduan pendaftaran langkah demi langkah dengan persyaratan dokumen menetapkan ekspektasi yang jelas sejak awal.

Peningkatan

Iterasi Berbasis Data Dari Perilaku Pengunjung Asli

Sebelum

Keputusan desain punya sedikit sekali data pengunjung asli untuk dijadikan acuan.

Sesudah

Data breakpoint, ukuran layar, lokasi, dan waktu loading dari Google Analytics langsung membentuk penyempurnaan halaman yang berkelanjutan.