STUDI KASUS

Transformasi Digital PT Zumatic Saka Persada: Dari Kompleks ke Sederhana

Willya Randika |
Studi Kasus Redesign Website PT Zumatic Saka Persada

Proyek ini bermula dari permintaan perbaikan kecil dan berujung pada transformasi menyeluruh: website PT Zumatic Saka Persada kini lebih cepat (93/100 di mobile), lebih sederhana untuk dikelola oleh tim non-teknis, dan lebih merepresentasikan profesionalisme brand. Melalui migrasi ke WordPress blocks, penyederhanaan stack, dan optimasi menyeluruh, kompleksitas berkurang drastis dan kinerja meningkat signifikan.

Ringkasan Singkat & Key Takeaways

  • Mobile Performance: 53 → 93 (+75.47%)
  • Desktop Performance: 81 → 100 (+23.46%)
  • Requests: 122 → 64 (−47.54%)
  • Load Time: 3.33s → 1.70s (−48.95%)
  • Pengelolaan konten: dari raw HTML & builder berat → blocks + ACF (lebih mudah dan konsisten)
  • Adopsi tim: training 4 jam → 1.5 jam; 90% kebutuhan konten mandiri

Ingin audit cepat untuk memetakan potensi peningkatan di website Anda? Dapatkan rekomendasi implementasi dalam sesi Konsultasi Gratis. Mulai Konsultasi.

Website lama mereka menghadapi berbagai tantangan: tampilan yang kurang modern, copywriting yang tidak menjual, SEO yang tidak optimal, performa yang lambat, dan yang paling krusial – sistem pengelolaan yang sangat teknis dan sulit digunakan oleh tim non-teknis.

Dengan visi untuk menciptakan platform digital yang tidak hanya performa tinggi tetapi juga mudah dikelola, dimulailah proyek redesign yang akan mengubah cara PT Zumatic Saka Persada berinteraksi dengan website mereka.

Kondisi Awal & Tantangan

Masalah Teknis yang Menumpuk

Ketika pertama kali dihubungi pada September 2023, PT Zumatic Saka Persada menghadapi berbagai masalah teknis yang mengganggu operasional website mereka:

Masalah Keamanan dan Maintenance:

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

Masalah User Experience:

  • Design UI yang tidak ramah pengguna
  • Tabel project dibuat dengan raw HTML yang sangat sulit diedit
  • Design website yang tidak mencerminkan profesionalisme perusahaan

Performa & UX

Audit performa awal menunjukkan 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

Browser Speed Test Results (Before):

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

PageSpeed Insights sebelum optimasi (PT Zumatic)

Visual Comparison: Before vs After

Transformasi visual website PT Zumatic sangat mencolok. Perbandingan homepage menunjukkan evolusi dari design yang outdated menjadi tampilan modern yang profesional:

Homepage lama: layout kaku dan konten kurang terstruktur
Before — Layout kaku; konten kurang terstruktur.
Homepage baru: layout clean, hierarki tipografi jelas, navigasi intuitif, konten terorganisir
After — Layout clean, hierarki tipografi jelas, navigasi intuitif, konten terorganisir.

Transformasi Halaman Kontak

Salah satu improvement signifikan adalah pada halaman kontak yang sebelumnya sangat basic menjadi interface yang lebih user-friendly dan professional:

After Contact Page

Kompleksitas Pengelolaan Konten

Salah satu tantangan terbesar adalah sistem pengelolaan konten yang sangat teknis:

  • Tabel project dengan raw HTML yang membutuhkan pengetahuan coding untuk edit
  • 20 plugin aktif termasuk WPBakery Page Builder yang kompleks
  • Slider Revolution yang berat dan sulit dikonfigurasi
  • Tidak ada standarisasi dalam pengelolaan konten

Pendekatan dan Metodologi

Analisis Komprehensif

Saya memulai dengan audit menyeluruh yang mencakup:

  1. Audit Teknis: Analisis performa, keamanan, dan kompatibilitas
  2. Audit UX/UI: Evaluasi pengalaman pengguna dan antarmuka
  3. Audit Konten: Review copywriting dan struktur informasi
  4. Audit SEO: Pemeriksaan optimasi mesin pencari
  5. Audit Workflow: Analisis proses pengelolaan konten

Strategi Transformasi

Berdasarkan hasil audit, saya mengembangkan strategi transformasi yang fokus pada tiga pilar utama:

1. Simplifikasi Teknologi

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

2. Optimasi Performa

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

3. User-Friendly Management

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

Implementasi Teknis

1. Migrasi Tema dan Page Builder

Dari WPBakery ke GenerateBlocks Pro:

Saya mengganti seluruh sistem page builder dari WPBakery yang kompleks ke GenerateBlocks Pro yang lebih ringan dan user-friendly. Keputusan ini didasarkan pada:

  • Performa Superior: GenerateBlocks menghasilkan kode yang lebih bersih dan ringan
  • Kemudahan Penggunaan: Interface yang lebih intuitif untuk pengguna non-teknis
  • Fleksibilitas: Dapat disesuaikan untuk berbagai kebutuhan tanpa bloat
  • Maintenance: Lebih mudah dimaintain dan diupdate

GeneratePress sebagai Foundation:

Pemilihan GeneratePress sebagai tema dasar memberikan:

  • Kode yang sangat ringan dan optimal
  • Kompatibilitas tinggi dengan GenerateBlocks
  • Customization yang tidak terbatas
  • Support jangka panjang yang terpercaya

2. Custom Plugin Development

Plugin Multilingual Khusus:

Salah satu tantangan unik adalah kebutuhan multilingual yang spesifik. PT Zumatic hanya membutuhkan fitur bahasa ganda (Indonesia/English) untuk halaman Insights & News saja. Saya mengembangkan custom plugin yang:

  • Targeted Implementation: Hanya aktif di halaman blog/insights
  • Simple Switching: Button toggle bahasa yang mudah digunakan
  • Backend Integration: Sistem pengelolaan yang terintegrasi dengan WordPress admin

Zumatic Multilingual Backend

Sistem multilingual yang saya kembangkan memungkinkan admin untuk dengan mudah mengelola konten dalam dua bahasa. Interface di atas menunjukkan bagaimana admin dapat:

  1. Menambahkan artikel baru dengan interface yang clean dan user-friendly
  2. Mengatur bahasa artikel melalui dropdown sederhana
  3. Menghubungkan versi bahasa yang berbeda dari artikel yang sama
  4. Preview konten sebelum publikasi

Keunggulan sistem ini:

  • Targeted Implementation: Hanya aktif di halaman yang membutuhkan
  • Simple Interface: Tidak membingungkan user dengan opsi yang tidak perlu
  • Efficient Management: Satu dashboard untuk kelola semua bahasa

ACF Integration untuk Project Management:

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

  • Custom Post Type untuk projects dengan field yang terstruktur
  • ACF Integration untuk input data yang user-friendly
  • Custom Filter System menggunakan GenerateBlocks Pro query blocks
  • Automated Layout yang konsisten untuk semua project

Zumatic Project Management

Interface manajemen project di atas menunjukkan transformasi dari sistem raw HTML yang rumit menjadi form yang user-friendly. Fitur-fitur yang tersedia:

Project Information Management:

  • End User: Input client information dengan mudah
  • Industry Selection: Dropdown untuk kategori industri
  • Location & Year: Field terstruktur untuk data project
  • Status Tracking: Monitor progress project dengan dropdown status

Advanced Features:

  • Scope Management: Repeater field untuk detail scope project
  • Technology Stack: Input teknologi yang digunakan
  • Custom Filtering: Integrasi dengan query blocks untuk filtering otomatis

Benefits untuk Tim PT Zumatic:

  • No Coding Required: Tim non-teknis dapat menambah project baru
  • Consistent Layout: Semua project menggunakan template yang sama
  • Easy Updates: Edit informasi project tanpa risiko merusak layout
  • Professional Presentation: Output yang selalu rapi dan profesional

3. Optimasi Plugin dan Performa

Plugin Optimization (20 → 15 plugins):

Plugins 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

Plugins 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. Performance Optimization

Kombinasi kuat antara tema GeneratePress dan GenerateBlocks sebenarnya sudah cepat, ringan dan responsif. Namun, untuk mencapai performa yang optimal, saya menerapkan berbagai teknik optimasi:

Advanced Speed Techniques:

  • Menggunakan CSS/JS yang diperlukan saja: Ini dengan bantuan plugin AssetClean Up
  • CSS/JS Optimization: Minifikasi dan kombinasi file
  • Image Optimization: Kompresi dan format WebP
  • Caching Strategy: Implementasi caching multi-level

Hasil dan Dampak Transformasi

Peningkatan Performa yang Signifikan

Skor PageSpeed Insights Setelah Optimasi:

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

Browser Speed Test Results (After):

  • Requests: 122 → 64 (47.54% reduction)
  • Transferred: 3.1 MB → 4.8 MB (optimized content)
  • Resources: 7.0 MB → 5.2 MB (25.71% reduction)
  • Finish Time: 3.33s → 1.70s (48.95% faster)
  • DOMContentLoaded: 1.35s → 1.44s (maintained)

After Zumatic Performance

Ingin hasil serupa untuk website Anda? Lakukan Konsultasi Gratis — kami akan audit singkat dan berikan rekomendasi implementasi. Hubungi kami.

Dashboard Transformation

Salah satu aspek terpenting dari proyek ini adalah transformasi dashboard WordPress yang menjadi lebih user-friendly:

Dashboard WordPress lama: menu membingungkan dan plugin tidak terorganisir
Before — Menu membingungkan; plugin tidak terorganisir.
Dashboard WordPress baru: struktur menu disederhanakan, CPT tertata, label lebih jelas
After — Struktur menu disederhanakan; CPT tertata; label lebih jelas.

Dashboard lama menampilkan banyak menu yang membingungkan, plugin yang tidak terorganisir, dan interface yang overwhelming untuk user non-teknis.

Dashboard baru menampilkan:

  • Simplified Menu Structure: Hanya menu yang diperlukan
  • Custom Post Types: Project dan Insights terorganisir dengan baik
  • User-Friendly Labels: Terminologi yang mudah dipahami
  • Streamlined Workflow: Proses yang lebih efisien

Performance Metrics Visualization

Untuk memberikan gambaran yang jelas tentang improvement yang dicapai, berikut adalah visualisasi performa:

Browser devtools waterfall sebelum optimasi: 122 permintaan, total ~7.0MB resources
Before — 122 requests; ~7.0MB resources.
Browser devtools waterfall setelah optimasi: 64 permintaan, total ~5.2MB resources
After — 64 requests; ~5.2MB resources.

Grafik di atas menunjukkan pengurangan signifikan dalam jumlah HTTP requests dari 122 menjadi 64, yang berkontribusi pada peningkatan kecepatan loading website secara keseluruhan.

Project Pages Evolution

Transformasi halaman projects menunjukkan evolusi dari sistem yang kaku menjadi platform yang dinamis:

Halaman projects lama: tabel HTML/NinjaTable yang sulit diedit untuk tim non-teknis
Before — Tabel HTML/NinjaTable; sulit diedit oleh tim non-teknis.
Halaman projects baru: grid responsif, filter dinamis, dan manajemen konten lewat dashboard
After — Grid responsif, filter dinamis, manajemen via dashboard.

Halaman projects baru menampilkan:

  • Dynamic Filtering: Filter berdasarkan industri dan teknologi
  • Responsive Grid Layout: Tampilan yang optimal di semua device
  • Easy Content Management: Tambah/edit project melalui dashboard
  • Professional Presentation: Layout yang konsisten dan menarik

Services Page Improvement

Halaman services juga mengalami transformasi signifikan:

Halaman services lama: layout dasar dan informasi kurang terstruktur
Before — Layout dasar; informasi kurang terstruktur.
Halaman services baru: penyajian lebih terstruktur, visual lebih kuat, CTA jelas
After — Struktur lebih jelas; visual lebih kuat; CTA tegas.

Halaman services baru menampilkan informasi yang lebih terstruktur dengan visual yang menarik dan call-to-action yang jelas.

Transformasi User Experience

Kemudahan Pengelolaan Konten:

  1. Project Management: Dari raw HTML ke sistem ACF yang user-friendly
  2. Content Creation: Interface yang intuitif untuk semua jenis konten
  3. Multilingual: Sistem bahasa yang sederhana dan efektif
  4. Media Management: Organisasi aset yang lebih baik

Training dan Adoption:

Setelah implementasi, saya memberikan training komprehensif kepada tim PT Zumatic. Hasil training menunjukkan:

  • 95% Adoption Rate: Tim langsung dapat menggunakan sistem baru
  • Reduced Learning Curve: Waktu training berkurang dari 4 jam menjadi 1.5 jam
  • Self-Sufficiency: Tim dapat mengelola 90% kebutuhan konten 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 & Best Practices

Key Success Factors

  1. Deep Understanding: Memahami workflow klien sebelum merancang solusi
  2. Gradual Implementation: Implementasi bertahap untuk meminimalkan disruption
  3. Custom Solutions: Mengembangkan solusi spesifik untuk kebutuhan unik
  4. User Training: Investasi dalam training untuk adoption yang sukses
  5. Performance Focus: Tidak mengorbankan performa untuk fitur

Technical Best Practices

  1. Plugin Minimalism: Hanya menggunakan plugin yang benar-benar diperlukan
  2. Custom Development: Mengembangkan solusi custom untuk kebutuhan spesifik
  3. Performance First: Setiap keputusan teknis mempertimbangkan dampak performa
  4. User-Centric Design: Mengutamakan kemudahan penggunaan dalam setiap interface
  5. Future-Proofing: Membangun sistem yang mudah dikembangkan di masa depan

Siap Mentransformasi Website Anda?

Proyek PT Zumatic Saka Persada membuktikan bahwa transformasi digital yang tepat dapat mengubah website dari beban menjadi aset yang powerful dan mudah dikelola.

Jika website Anda menghadapi tantangan serupa – performa lambat, sistem pengelolaan yang kompleks, atau kebutuhan custom yang spesifik – kami siap membantu merancang solusi yang tepat.

Layanan yang Tersedia:

Hubungi kami untuk konsultasi gratis dan temukan bagaimana kami dapat mentransformasi website Anda menjadi platform digital yang powerful dan user-friendly.

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.

#redesign #wordpress #generatepress #generateblocks #optimasi #multilingual