STUDI KASUS

Transformasi Digital PT Zumatic Saka Persada: Dari Kompleks ke Sederhana

Diperbarui
Studi Kasus Redesign Website PT Zumatic Saka Persada

Pada 5 Juni 2025, saya menerima pesan WhatsApp dari tim PT Zumatic Saka Persada. Permintaannya cukup jelas: mereka ingin website yang lebih rapi, lebih mudah dikelola secara mandiri, dan tidak lagi bergantung pada bantuan teknis hanya untuk mengubah teks, gambar, atau halaman.

Klien menyampaikan:

Halo Pak, saya sedang mempertimbangkan untuk merapikan dan menyederhanakan website saya. Saya ingin bisa edit sendiri teks, gambar, dan halaman tanpa bantuan teknis. Saya tertarik migrasi ke block.

Dari sini terlihat bahwa klien sudah memahami manfaat WordPress blocks, dan kemungkinan besar sudah mempelajari layanan konversi website ke blocks yang saya tawarkan.

Ini juga bukan perkenalan pertama. Pada September 2023, klien pernah menghubungi saya untuk menyelesaikan beberapa masalah teknis di website yang sama. Jadi, proyek pada Juni 2025 ini adalah fase kedua: bukan lagi perbaikan parsial, melainkan transformasi yang lebih menyeluruh.

Saat diskusi dan audit dimulai, saya menemukan bahwa tantangannya tidak hanya soal editor konten. Desain lama memiliki masalah UI/UX, copywriting belum cukup kuat untuk mendukung konversi, dan performa teknis masih menyisakan banyak ruang perbaikan. Karena itu saya mengusulkan pendekatan yang lebih menyeluruh: konversi ke blocks sekaligus redesign. Klien setuju, dan di titik itulah proyek ini resmi dimulai.

Ringkasan Singkat

Sebelum masuk detail, ini poin utama hasil proyek ini:

  • Mobile performance: 53 → 93 (+75,47%)
  • Desktop performance: 81 → 100 (+23,46%)
  • HTTP requests: 122 → 64 (-47,54%)
  • Load time: 3,33s → 1,70s (-48,95%)
  • Workflow konten: raw HTML + builder berat → blocks + ACF
  • Adopsi tim: training turun dari 4 jam ke 1,5 jam; 90% konten bisa dikelola mandiri

Ingin audit cepat untuk memetakan potensi peningkatan di website Anda? Mulai konsultasi gratis.

Kondisi Awal & Tantangan

Fase Pertama (September 2023): Perbaikan Parsial

Saat pertama kali dihubungi pada September 2023, fokus klien masih pada perbaikan beberapa isu teknis. Namun, setelah dievaluasi, masalahnya ternyata saling terkait dan menumpuk.

Masalah keamanan dan pemeliharaan:

  • Website sering menerima spam dari contact form.
  • WordPress tidak terawat dengan baik (masih menggunakan PHP 7.2).
  • Beberapa plugin tidak kompatibel karena membutuhkan minimal PHP 7.4.

Masalah UX dan konten:

  • Desain UI kurang ramah pengguna.
  • Tabel project masih dibuat dengan raw HTML sehingga sulit diedit.
  • Tampilan website belum merepresentasikan profesionalisme perusahaan.

Fase Kedua (Juni 2025): Transformasi Menyeluruh

Ketika klien kembali menghubungi di Juni 2025, kebutuhan sudah berubah: mereka ingin sistem yang bisa dikelola tim internal tanpa friksi teknis. Ini yang menjadi titik balik dari “perbaikan” ke “transformasi”.

Baseline Performa Sebelum Optimasi

Audit performa awal memperlihatkan kondisi yang cukup memprihatinkan.

Skor PageSpeed Insights sebelum optimasi:

  • Mobile: 53 performance, 93 accessibility, 96 best practices, 85 SEO
  • Desktop: 81 performance, 98 accessibility, 96 best practices, 85 SEO

Hasil browser speed test (sebelum):

  • 122 requests
  • 3.1 MB transferred
  • 7.0 MB total resources
  • 3.33s finish time
  • 1.35s DOMContentLoaded

PageSpeed Insights sebelum optimasi (PT Zumatic)

Perbandingan Visual: Sebelum vs Sesudah

Perbandingan homepage menunjukkan perubahan paling terlihat: dari layout yang kaku menjadi struktur visual yang lebih modern, rapi, dan mudah dipindai.

Homepage lama: layout kaku dan konten kurang terstruktur
Sebelum: layout kaku, konten kurang terstruktur.
Homepage baru: layout clean, hierarki tipografi jelas, navigasi intuitif, konten terorganisir
Sesudah: layout clean, hierarki tipografi jelas, navigasi intuitif, konten terorganisir.

Transformasi Halaman Kontak

Halaman kontak juga ikut ditata ulang, dari tampilan yang sangat dasar menjadi antarmuka yang lebih jelas dan meyakinkan bagi calon klien:

After Contact Page

Kompleksitas Pengelolaan Konten

Tantangan terbesar ada di sisi operasional: pengelolaan konten terlalu teknis untuk tim non-teknis.

  • Tabel project dibuat dengan raw HTML sehingga butuh kemampuan coding untuk mengedit.
  • Ada 20 plugin aktif, termasuk WPBakery Page Builder yang kompleks.
  • Slider Revolution cukup berat dan sulit dikonfigurasi untuk kebutuhan harian.
  • Belum ada standarisasi alur kerja konten.

Pendekatan dan Metodologi

Audit Menyeluruh

Saya memulai dengan audit di lima area:

  1. Audit teknis: performa, keamanan, dan kompatibilitas
  2. Audit UX/UI: pengalaman pengguna dan struktur antarmuka
  3. Audit konten: kualitas copywriting dan hierarki informasi
  4. Audit SEO: kelayakan teknis dan on-page fundamentals
  5. Audit workflow: proses kerja tim saat menambah atau mengubah konten

Strategi Transformasi

Berdasarkan hasil audit, strategi transformasi difokuskan ke tiga pilar utama:

1. Simplifikasi teknologi

  • Migrasi dari WPBakery ke GenerateBlocks Pro
  • Pengurangan plugin dari 20 menjadi 15 plugin yang lebih optimal
  • Implementasi GeneratePress sebagai tema dasar

2. Optimasi performa

  • Optimasi kode dan aset
  • Implementasi caching yang efektif
  • Kompresi dan optimasi gambar

3. Pengelolaan yang ramah pengguna

  • Sistem pengelolaan konten yang lebih intuitif
  • Custom plugin untuk kebutuhan multilingual
  • Integrasi ACF untuk manajemen project yang lebih sederhana

Implementasi Teknis

1. Migrasi Tema dan Page Builder

Saya mengganti sistem page builder dari WPBakery ke GenerateBlocks Pro yang lebih ringan dan lebih mudah digunakan. Keputusan ini didasarkan pada:

  • Performa lebih baik: kode lebih bersih dan lebih ringan
  • Kemudahan penggunaan: interface lebih intuitif untuk tim non-teknis
  • Fleksibilitas: mudah disesuaikan tanpa bloat
  • Maintenance: lebih sederhana untuk pemeliharaan jangka panjang

Saya juga menggunakan GeneratePress sebagai fondasi tema karena:

  • kode sangat ringan dan optimal,
  • kompatibilitas tinggi dengan GenerateBlocks,
  • fleksibel untuk kebutuhan kustomisasi jangka panjang,
  • dukungan pengembangnya matang dan stabil.

2. Pengembangan Plugin Kustom

Salah satu kebutuhan unik proyek ini adalah multilingual yang sangat spesifik. PT Zumatic hanya membutuhkan bahasa ganda (Indonesia/English) untuk halaman Insights & News. Karena itu saya membuat custom plugin dengan karakteristik:

  • Hanya aktif di halaman blog/insights
  • Tombol toggle bahasa yang mudah dipahami
  • Menyatu dengan alur WordPress admin

Zumatic Multilingual Backend

Dengan sistem ini, admin bisa mengelola konten dua bahasa tanpa plugin multilingual yang berat. Di interface tersebut admin dapat:

  1. Menambahkan artikel baru lewat interface yang clean
  2. Menentukan bahasa artikel melalui dropdown sederhana
  3. Menghubungkan dua versi bahasa dari artikel yang sama
  4. Melakukan preview sebelum publikasi

Keunggulan sistem ini:

  • Hanya aktif di area yang dibutuhkan
  • Interface sederhana, tidak membebani user dengan opsi berlebihan
  • Satu dashboard untuk kelola semua bahasa

Integrasi ACF untuk Manajemen Project

Untuk menggantikan sistem tabel raw HTML yang rumit, saya menyiapkan:

  • Custom Post Type untuk projects dengan field yang terstruktur
  • Integrasi ACF untuk input data yang lebih mudah
  • Custom filter system menggunakan GenerateBlocks Pro query blocks
  • Layout otomatis yang konsisten untuk semua project

Zumatic Project Management

Transformasi ini mengubah proses input project dari raw HTML yang rawan error menjadi form terstruktur yang mudah dipakai.

Manajemen informasi project:

  • Input informasi klien dengan mudah
  • Dropdown kategori industri
  • Field terstruktur untuk lokasi dan tahun project
  • Dropdown status untuk memantau progres

Fitur lanjutan:

  • Repeater field untuk detail scope project
  • Input teknologi yang digunakan
  • Integrasi query blocks untuk filter otomatis

Manfaat untuk tim PT Zumatic:

  • Tim non-teknis bisa menambah project baru tanpa coding
  • Semua project memakai template yang sama
  • Edit informasi tanpa risiko merusak layout
  • Output selalu rapi dan profesional

3. Optimasi Plugin dan Performa

Optimasi Plugin (20 → 15 Plugin)

Plugin dihapus/diganti:

  • WPBakery Page Builder → GenerateBlocks Pro
  • Slider Revolution
  • Ajax Load More → Native WordPress functionality
  • Breadcumb NavXT
  • CL Testimonial
  • Beberapa plugin security redundant
  • Contact Form 7 → Everest Form

Plugin baru yang ditambahkan:

  • GenerateBlocks Pro
  • Asset CleanUp Pro
  • Slim SEO
  • Custom multilingual plugin by Harun Studio
  • SCF
  • WPS Hide Login
  • WP SVG Images
  • SmartSMTP

4. Optimasi Performa

Kombinasi GeneratePress dan GenerateBlocks sebenarnya sudah cepat. Namun untuk hasil yang optimal, saya tetap menerapkan beberapa teknik lanjutan:

  • Menggunakan CSS/JS yang benar-benar diperlukan (dengan bantuan Asset CleanUp)
  • Minifikasi dan kombinasi file CSS/JS
  • Kompresi dan penggunaan format WebP
  • Implementasi caching multi-level

Hasil dan Dampak Transformasi

Peningkatan Performa

Skor PageSpeed Insights setelah optimasi:

MetrikBefore MobileAfter MobileBefore DesktopAfter DesktopPeningkatan
Performance53938110075.47% (Mobile)
Accessibility93100981007.53% (Mobile)
Best Practices96100961004.17%
SEO851008510017.65%

Hasil browser speed test (sesudah):

  • Requests: 122 → 64 (turun 47,54%)
  • Transferred: 3.1 MB → 4.8 MB (konten dioptimasi)
  • Resources: 7.0 MB → 5.2 MB (turun 25,71%)
  • Finish Time: 3.33s → 1.70s (48,95% lebih cepat)
  • DOMContentLoaded: 1.35s → 1.44s (stabil)

Catatan: ukuran transferred memang meningkat karena ada penyesuaian aset konten baru, tetapi total resources turun, jumlah request berkurang drastis, dan finish time membaik hampir 49%.

After Zumatic Performance

Ingin hasil serupa untuk website Anda? Hubungi kami untuk konsultasi gratis. Kami akan audit singkat dan berikan rekomendasi implementasi.

Transformasi Dashboard WordPress

Salah satu dampak terbesar proyek ini justru ada di dashboard: dari yang membingungkan menjadi jauh lebih mudah dipakai tim internal.

Dashboard WordPress lama: menu membingungkan dan plugin tidak terorganisir
Sebelum: menu membingungkan, plugin tidak terorganisir.
Dashboard WordPress baru: struktur menu disederhanakan, CPT tertata, label lebih jelas
Sesudah: struktur menu disederhanakan, CPT tertata, label lebih jelas.

Dashboard baru menampilkan:

  • Menu yang disederhanakan, hanya yang diperlukan
  • Custom Post Types untuk project dan insights
  • Label yang lebih mudah dipahami tim
  • Alur kerja harian yang lebih efisien

Visualisasi Metrik Performa

Berikut visualisasi perubahan performa di level browser:

Browser devtools waterfall sebelum optimasi: 122 permintaan, total ~7.0MB resources
Sebelum: 122 requests, ~7.0MB resources.
Browser devtools waterfall setelah optimasi: 64 permintaan, total ~5.2MB resources
Sesudah: 64 requests, ~5.2MB resources.

Grafik di atas memperlihatkan pengurangan HTTP requests dari 122 menjadi 64, yang berkontribusi langsung pada peningkatan kecepatan loading.

Evolusi Halaman Project

Perubahan di halaman projects menunjukkan pergeseran dari sistem kaku ke halaman yang dinamis dan mudah dikelola:

Halaman projects lama: tabel HTML/NinjaTable yang sulit diedit untuk tim non-teknis
Sebelum: tabel HTML/NinjaTable, sulit diedit oleh tim non-teknis.
Halaman projects baru: grid responsif, filter dinamis, dan manajemen konten lewat dashboard
Sesudah: grid responsif, filter dinamis, manajemen via dashboard.

Halaman projects baru menampilkan:

  • Filter dinamis berdasarkan industri dan teknologi
  • Grid responsif di berbagai device
  • Tambah/edit project lewat dashboard
  • Layout konsisten dan profesional

Peningkatan Halaman Services

Halaman services juga mengalami peningkatan struktur dan penyajian:

Halaman services lama: layout dasar dan informasi kurang terstruktur
Sebelum: layout dasar, informasi kurang terstruktur.
Halaman services baru: penyajian lebih terstruktur, visual lebih kuat, CTA jelas
Sesudah: struktur lebih jelas, visual lebih kuat, CTA tegas.

Dampak pada Workflow Tim

Kemudahan pengelolaan konten:

  1. Project management: dari raw HTML ke sistem ACF yang mudah digunakan
  2. Content creation: interface yang lebih intuitif untuk berbagai jenis konten
  3. Multilingual: sistem bahasa sederhana dan efektif
  4. Media management: organisasi aset lebih rapi

Training dan adopsi:

Setelah implementasi, saya memberikan training kepada tim PT Zumatic. Hasilnya:

  • 95% adoption rate: tim langsung bisa menggunakan sistem baru
  • Waktu training turun dari 4 jam menjadi 1,5 jam
  • Tim dapat mengelola 90% kebutuhan konten secara mandiri

Feedback Klien

“Ini sudah sempurna! Proses pengelolaan menjadi sangat mudah. Meskipun masih butuh web developer untuk fungsi tertentu, untuk pengelolaan seperti menambahkan project baru, halaman baru, artikel/berita baru, semuanya sudah sangat mudah dan tidak terlalu teknis.”

Tim PT Zumatic Saka Persada

Pelajaran dari Proyek Ini

Faktor kunci keberhasilan:

  1. Memahami workflow klien sebelum merancang solusi
  2. Implementasi bertahap untuk meminimalkan disruption
  3. Solusi kustom untuk kebutuhan unik
  4. Investasi pada training agar adopsi berjalan cepat
  5. Performa tetap jadi prioritas, bukan fitur semata

Praktik teknis yang saya terapkan:

  1. Minimal plugin: hanya yang benar-benar diperlukan
  2. Custom development untuk kebutuhan spesifik
  3. Setiap keputusan teknis mempertimbangkan dampak performa
  4. Kemudahan penggunaan di setiap interface
  5. Sistem yang mudah dikembangkan ke depan

Siap Mentransformasi Website Anda?

Proyek PT Zumatic Saka Persada menunjukkan bahwa transformasi yang tepat bisa mengubah website dari beban operasional menjadi aset bisnis yang kuat dan mudah dikelola.

Jika website Anda menghadapi tantangan serupa, performa lambat, pengelolaan konten yang kompleks, atau kebutuhan fitur kustom, kami siap bantu menyusun strategi yang tepat.

Layanan terkait:

Hubungi kami untuk konsultasi gratis, lalu kami petakan langkah paling relevan untuk kondisi website Anda saat ini.

FAQ Singkat

Apakah website harus dirombak total untuk bisa lebih cepat?

Tidak selalu. Banyak website bisa dipercepat dulu dari sisi bottleneck teknis (aset, cache, plugin, database, server) sebelum memutuskan redesign penuh.

Bagaimana memilih antara optimasi loading, konversi blocks, atau redesign?

Mulai dari audit dulu. Jika masalahnya dominan teknis, optimasi loading biasanya cukup. Jika struktur builder sudah terlalu berat atau UX sudah tidak relevan, konversi blocks atau redesign biasanya jadi langkah berikutnya.

Layanan terkait

Willya Randika

Willya Randika

Founder Harun Studio & web developer, blogger, serta hosting reviewer. Telah membantu pemilik bisnis meraih kesuksesan dengan design, development dan maintenance sejak 2021.