Container Box Industri menyediakan container box plastik industri dan keranjang serbaguna dari berbagai merek ternama untuk bisnis di seluruh Indonesia. Situs ini menyatukan seluruh produknya dalam satu katalog yang bisa dijelajahi per kategori atau merek, lalu dipesan lewat WhatsApp dengan pesan yang sudah memuat nama produknya. Setiap produk juga bisa disimpan sebagai gambar lengkap dengan foto, nama, dan harganya, sehingga mudah dibagikan lewat chat.
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.
Setiap produk mudah dicari, tidak tenggelam di chat
Sebelum
Saat pemasok membagikan produknya lewat foto di chat, daftar harga, dan berkas brosur, pembeli harus menelusuri pesan lama untuk menemukan container tertentu, dan orang yang mencari lewat Google sama sekali tidak bisa menemukan produknya.
Sesudah
Setiap produk memiliki halamannya sendiri yang tersusun berdasarkan kategori dan merek, sehingga seluruh produk tersimpan di satu tempat yang bisa dibuka kembali kapan saja dan bisa ditemukan langsung lewat pencarian.
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.
Warna Merek Terlalu Terang untuk Dijadikan Teks
Kuning merek hanya memiliki rasio kontras sekitar 1,5:1 terhadap latar putih, terlalu rendah untuk teks yang mudah dibaca, padahal desainnya menginginkan baris kedua judul hero menonjol dengan warna merek. Alih-alih menggelapkan warna merek, judulnya tetap memakai teks hitam di atas pita stabilo kuning yang berulang di setiap baris. Token warna terpisah juga mengatur teks mana yang tampil di atas latar gelap dan mana yang tampil di atas tombol berwarna merek.
Satu Codebase untuk Banyak Situs
Tema dan plugin core yang sama melayani sekumpulan situs katalog, dan setiap override berkas per klien membekukan salinan lama yang berhenti menerima perbaikan core. Perbedaan antarklien dipindahkan ke data berupa design token dan konfigurasi per domain. Override berkas dibatasi seminimal mungkin, berkas keamanan sama sekali tidak boleh di-override, dan build mencatat setiap override sehingga selisihnya selalu terlihat setiap kali core berubah.
Menyembunyikan Deskripsi Ikut Menghapus Meta SEO
Deskripsi kategori disaring di seluruh situs agar tidak pernah tampil di halaman. Ternyata plugin SEO membaca meta description lewat fungsi yang sama, sehingga kategori yang punya deskripsi diam-diam kehilangan meta description yang sudah terindeks. Sekarang filternya tidak aktif selama bagian head halaman dibuat, jadi meta tag tetap ada sementara deskripsinya tetap tersembunyi di halaman.
Kombinasi Filter yang Tidak Ada Habisnya
Setiap campuran kategori, tag, merek, dan rentang harga menghasilkan URL baru, sehingga katalog besar bisa menghasilkan halaman yang nyaris tidak terbatas untuk dirayapi crawler. Batas pilihan diterapkan di server, halaman hasil filter ditandai noindex, dan aturan robots menjauhkan pola URL tersebut dari crawler sepenuhnya.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Perbaikan core otomatis sampai ke setiap situs
Request tidak wajar tidak lagi merusak halaman
194 KB hanya dimuat saat dibutuhkan
Setiap gambar dalam format WebP
Meta description tetap utuh
Kombinasi filter tidak masuk indeks
887 halaman terverifikasi setelah peluncuran
Sebelum
Di core yang dipakai banyak situs, salinan berkas keamanan khusus satu klien akan diam-diam berhenti menerima setiap perbaikan core sesudahnya.
Sesudah
Berkas keamanan tidak boleh di-override, perbedaan antarklien disimpan sebagai konfigurasi dan design token, dan build mencatat setiap override per klien sehingga selisihnya tetap terlihat.
Sebelum
Parameter request yang tidak terduga, misalnya array di tempat yang seharusnya berisi teks, bisa membuat fungsi WordPress melempar fatal error dan menampilkan error server ke setiap pengunjung yang membuka URL tersebut.
Sesudah
Parameter yang masuk divalidasi dan ditolak sebelum sampai ke kode yang bisa gagal, sehingga request yang tidak wajar mendapat respons yang bersih, bukan halaman error.
Sebelum
Pustaka yang membuat gambar produk siap unduh berukuran 194 KB dan akan diunduh serta diproses di setiap halaman produk, padahal kebanyakan pengunjung tidak pernah memakainya.
Sesudah
Pustaka tersebut baru diambil saat pengunjung membuka menu bagikan, dan setiap script lain hanya dimuat di halaman yang membutuhkannya.
Sebelum
Katalog yang penuh gambar dalam format lama akan membuat setiap halaman lambat, terutama di koneksi seluler.
Sesudah
Setiap gambar ditampilkan dalam format WebP, dan seluruh 8.477 gambar diperiksa setelah peluncuran untuk memastikan tidak ada yang rusak.
Sebelum
Menyaring deskripsi kategori di seluruh situs ikut menghapus meta description yang dibuat plugin SEO dari deskripsi tersebut, sehingga halaman yang sudah terindeks diam-diam kehilangan cuplikan pencariannya.
Sesudah
Filternya tidak aktif selama bagian head halaman dibuat, sehingga meta description tetap utuh sementara deskripsinya tetap tersembunyi di halaman.
Sebelum
Setiap kombinasi kategori, tag, merek, dan harga menghasilkan URL baru yang bisa dirayapi, sehingga crawl budget dan sumber daya server terbuang untuk halaman yang nyaris sama.
Sesudah
Batas pilihan diterapkan di server, halaman hasil filter diberi noindex, dan aturan robots menjauhkan pola tersebut dari crawler sambil tetap mengizinkan crawler pencarian AI.
Sebelum
Memeriksa beberapa halaman secara acak setelah deploy bisa melewatkan tautan rusak atau gambar yang hilang di bagian dalam katalog yang besar.
Sesudah
Database diuji impor ke salinan sementara sebelum situs live, lalu situs live diperiksa menyeluruh sesudahnya, mencakup seluruh 887 halaman dan 8.477 gambar.
