Logo Resmi Fadhil
Fadhil NuruzzamanSoftware Engineer
Logo Resmi Fadhil
CatalogPT Raja Rak Indonesia2024

Raja Plastik Indonesia: Website Katalog Produk

Raja Plastik Indonesia sudah punya website untuk katalog produk plastik grosirnya yang berisi lebih dari 3.000 item, tapi situs lamanya terasa usang, sulit dinavigasi, dan mulai kewalahan mengikuti pertumbuhan traffic. Proyek ini mendesain ulang situsnya jadi pengalaman yang lebih cepat dan modern, lengkap dengan konten marketing dan sinyal kredibilitas yang lebih jelas.

Preview

Jelajahi Situsnya

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

Preview desktop Raja Plastik Indonesia: Website Katalog Produk

Desktop

Preview mobile Raja Plastik Indonesia: Website Katalog Produk

Mobile

Tech Stack

Teknologi Penggerak Proyek

Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.

Logo Wordpress
Logo Elementor Pro
Logo Blocksy Pro
Logo WooCommerce
Logo LiteSpeed Cache
Logo Redis
Logo AIOSEO
Logo Cloudflare
Logo Plesk
Logo Claude

Peran

Rincian per Skill

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

Web Development

  • Mendesain ulang dan membangun ulang situs dengan WordPress, Elementor Pro, dan tema Blocksy Pro.
  • Menginstall dan mengonfigurasi setiap plugin yang dibutuhkan situs.
  • Mengorganisir ulang dan mengoptimasi katalog produk yang lebih dari 3.000 item di dalam WooCommerce.
  • Mengonfigurasi Cloudflare, aturan fail2ban custom untuk auto-ban IP yang berperilaku seperti scraper, rate limiting Nginx, dan indexing database untuk bertahan dari lonjakan traffic bot.
  • Memantau beban sistem, disk, dan penggunaan RAM untuk menjaga VPS tetap sehat di bawah skala katalog ini.
  • Mengonfigurasi SSL, backup rutin, dan optimasi kecepatan situs untuk keandalan.
  • Melakukan pemeliharaan rutin: update plugin dan tema, serta memantau performa dan uptime.

Web Design

  • Memodernisasi identitas visual keseluruhan dibanding situs lama yang usang.
  • Menyesuaikan global style, warna, dan tipografi Blocksy Pro agar sesuai branding klien.
  • Merancang pengalaman browsing produk yang bersih dan terkategori.
  • Menyusun halaman produk agar spesifikasi mudah dipindai dengan cepat.
  • Menjaga layout tetap bisa dipakai meski dengan ribuan produk yang terdaftar.
  • Merancang bagian company profile dan kredibilitas untuk membangun kepercayaan pembeli.
  • Merancang bagian showcase klien yang menonjolkan perusahaan-perusahaan yang sudah membeli dari mereka.
  • Melakukan penyesuaian responsif per halaman di luar breakpoint default tema.

Graphic Design

  • Menyesuaikan logo klien yang sudah ada untuk penggunaan web, menyesuaikan ukuran, format, dan latar belakang.
  • Merancang ikon kategori untuk navigasi visual yang lebih mudah.
  • Menyiapkan dan mengoptimasi ribuan foto produk untuk katalog.
  • Menstandarkan crop dan latar belakang gambar produk.
  • Menyiapkan fotografi untuk company profile dan fasilitas, bukan cuma produk.
  • Mengkurasi aset visual untuk bagian kredibilitas dan showcase klien.
  • Membuat favicon situs.
  • Mengompres setiap gambar ke WebP dan di bawah 200KB sebelum diunggah, tanpa penurunan kualitas yang terlihat.

Digital Marketing

  • Menulis company profile dan copy marketing yang jelas untuk membangun kredibilitas dengan pembeli.
  • Menonjolkan jangkauan brand dan hubungan klien sebelumnya untuk membangun social proof.
  • Memosisikan jangkauan pengiriman nasional sebagai poin penjualan yang membangun kepercayaan.
  • Mengoptimasi judul dan deskripsi produk untuk pencarian.
  • Menyiapkan structured data untuk visibilitas produk yang lebih baik di hasil pencarian.
  • Menyiapkan Google Search Console dan Google Analytics untuk memantau performa pencarian dan traffic.

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.
  • Katalog lebih dari 3.000 varian produk plastik grosir.
  • Katalog produk terkategori dengan filter.
  • Halaman detail produk dengan spesifikasi lengkap.
  • Judul dan deskripsi produk yang dioptimasi SEO.
  • Markup structured data untuk visibilitas mesin pencari yang lebih baik.
  • Integrasi kontak grosir untuk pembelian dalam jumlah besar.
  • Informasi jangkauan pengiriman nasional.
  • Company profile dan konten marketing yang dibangun untuk kredibilitas.
  • Informasi kontak dan alamat.
  • Galeri foto produk dan fasilitas.
  • Overview brand yang dijual.
  • Showcase perusahaan-perusahaan yang sudah membeli produk mereka.

Tantangan yang Dihadapi

Scaling untuk Katalog Lebih dari 3.000 Produk

Redesain harus menangani ribuan listing produk tanpa mengorbankan kecepatan browsing, jadi struktur katalog, query, dan resource VPS direncanakan dengan hati-hati.

Performa Halaman Dengan Banyak Gambar Produk

Ribuan gambar produk berisiko memperlambat halaman katalog, jadi lazy-loading dan kompresi gambar yang konsisten diterapkan.

Bertahan dari Lonjakan Traffic Bot

Gelombang traffic bot otomatis melonjakkan beban server dan memperlambat situs sampai nyaris berhenti. Diselesaikan lewat kombinasi Cloudflare, aturan fail2ban custom yang auto-ban IP dengan pola request mirip scraper, rate limiting tingkat Nginx, dan indexing database.

Pelajaran yang Didapat

  • Belajar seberapa banyak perencanaan awal yang dibutuhkan katalog volume tinggi (lebih dari 3.000 produk) agar tetap cepat seiring skalanya bertambah.
  • Mendapat pengalaman praktis mengoptimasi halaman yang berat gambar untuk performa.
  • Mendapat pengalaman incident response dunia nyata menangani lonjakan traffic bot di bawah tekanan produksi langsung.

Dampak

Masalah yang Terselesaikan Setelah Rilis

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

Uptime terpulihkan

Gambar di bawah 200KB

Browsing cepat di skala besar

Storefront yang dimodernisasi

Pengiriman nasional yang jelas

Showcase klien yang terlihat

Perbaikan Kritis

Downtime Situs Akibat Lonjakan Traffic Bot

Sebelum

Gelombang traffic bot otomatis melonjakkan beban server sampai situs melambat drastis dan tidak bisa diakses pengunjung asli.

Sesudah

Cloudflare, aturan fail2ban custom yang menargetkan traffic mirip scraper, rate limiting Nginx, dan indexing database mengembalikan beban ke normal dan menjaga situs tetap bisa diakses.

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.

Performa

Browsing Katalog yang Lambat di Skala Besar

Sebelum

Browsing dan filter di lebih dari 3.000 produk di situs lama terasa lambat dan kaku seiring katalog terus bertambah.

Sesudah

Redesain mengoptimasi query dan struktur katalog, menjaga browsing dan filter tetap cepat bahkan di skala itu.

Peningkatan

Storefront yang Lebih Modern dan Kredibel

Sebelum

Situs lama terasa usang dan tidak mengomunikasikan brand atau profil perusahaan dengan jelas.

Sesudah

Redesain menambahkan konten marketing yang jelas dan informasi company profile, memberi pembeli kesan pertama yang lebih kuat.

Peningkatan

Jangkauan Nasional yang Jadi Jelas

Sebelum

Jangkauan pengiriman tidak dikomunikasikan dengan jelas di situs lama.

Sesudah

Redesain menyajikan dengan jelas pengiriman nasional ke seluruh Indonesia, menghilangkan keraguan pembeli dari luar kota.

Peningkatan

Social Proof Dari Pembeli Sebelumnya

Sebelum

Situs lama tidak menampilkan perusahaan manapun yang sudah membeli dari mereka.

Sesudah

Showcase klien sekarang memberi prospek baru social proof dari perusahaan-perusahaan yang sudah mempercayai brand ini.