RA Mutiara Islam Kendari rutin menjalankan kampanye iklan Meta dan TikTok setiap musim penerimaan siswa baru. Karena itu, mereka membutuhkan landing page yang dibuat khusus untuk mengubah trafik berbayar tersebut menjadi pendaftar, bukan sekadar halaman informasi umum yang biasa dibagikan secara organik lewat WhatsApp.
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.
Terlacak, bisa di-retarget, dan disempurnakan dengan data nyata
Sebelum
Tidak ada cara untuk mengetahui pengunjung mana yang datang dari iklan, menjangkau mereka lagi lewat iklan lanjutan, atau memakai data pengunjung nyata seperti breakpoint, ukuran layar, lokasi, dan waktu loading sebagai dasar keputusan desain.
Sesudah
Tracking bawaan kini mencatat pengunjung yang datang dari iklan agar bisa dijangkau lagi lewat retargeting, sementara data breakpoint, ukuran layar, lokasi, dan waktu loading menjadi dasar penyempurnaan halaman secara berkelanjutan.
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.
Waktu Pengerjaan yang Sangat Singkat
Landing page harus rilis sebelum musim pendaftaran dimulai, jadi pengerjaan awalnya dipercepat dengan Tailwind CSS agar proses styling lebih cepat.
Mengoptimasi untuk Trafik Iklan Berbayar, Bukan Hanya Pengunjung Organik
Pengunjung yang datang dari iklan Meta dan TikTok berperilaku berbeda dari pengunjung organik, jadi struktur halaman dan kontennya terus disempurnakan berdasarkan data Google Analytics tentang breakpoint, ukuran layar, lokasi, dan waktu loading.
Mencapai Skor Google PageSpeed Sempurna
Mendapatkan skor hijau di keempat kategori PageSpeed membutuhkan optimasi yang cermat pada pemuatan gambar, JS, dan CSS di banyak breakpoint perangkat.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Rilis tepat waktu, tanpa bagian yang dipangkas
PageSpeed hijau di keempat kategori
Gambar di bawah 200KB
Setiap perubahan tercatat, setiap perubahan bisa dikembalikan
Sebelum
Membuat desain kustom penuh dari nol dengan tenggat ketat sebelum musim pendaftaran dimulai berisiko membuat halaman terlambat rilis, atau ada bagian yang harus dipangkas agar tepat waktu.
Sesudah
Pendekatan CSS utility-first mempercepat proses styling secara signifikan, sehingga tenggat terpenuhi tanpa mengorbankan kualitas desain dan tanpa memangkas satu pun bagian yang direncanakan.
Sebelum
Performa awal tidak konsisten di keempat kategori Google PageSpeed.
Sesudah
Optimasi berkelanjutan pada pemuatan gambar, JS, dan CSS membuat keempat kategori menjadi hijau.
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
Memperbarui halaman tanpa version control atau proses deployment yang terstruktur berisiko membuat perubahan tidak tercatat, atau merusak halaman live tanpa cara untuk mengembalikannya.
Sesudah
Codebase dikelola di GitHub dan di-deploy lewat pipeline hosting yang terhubung, sehingga setiap perubahan tercatat dan bisa dikembalikan kapan saja jika ada yang rusak.
