Lotte Chocopie

  1. Home
  3. study-case
  5. Lotte Chocopie

🎯 Studi Kasus Proyek: Website Resmi Lotte Choco Pie Indonesia

🔗 https://lottechocopieindonesia.com/

📌 Klien

Lotte Choco Pie Indonesia – bagian dari Lotte Group, perusahaan global asal Korea Selatan yang memasarkan makanan ringan premium, termasuk produk andalannya: Choco Pie.

🛠️ Latar Belakang & Tujuan Proyek

Lotte Choco Pie Indonesia ingin memiliki website resmi yang mencerminkan citra brand global yang modern dan terpercaya, sekaligus mampu mengakomodasi berbagai kampanye digital untuk pasar Indonesia.

Target utama:

  • Website yang visual-centric untuk menonjolkan produk

  • Pengelolaan konten yang fleksibel dan scalable

  • Optimasi performa untuk pengguna mobile

  • Dukungan SEO dan integrasi media sosial

🚧 Tantangan

  1. Kebutuhan Frontend Kustom: Desain harus mencerminkan identitas global brand, namun tetap fleksibel untuk pasar lokal.

  2. Manajemen Konten Non-Teknis: Tim marketing internal butuh CMS yang mudah digunakan tanpa coding.

  3. Kampanye Musiman: Website harus mampu mengakomodasi berbagai campaign yang berubah secara periodik.

  4. Kecepatan & SEO: Harus memenuhi standar performa dan SEO modern.

💡 Solusi Teknologi

⚙️ Stack yang Digunakan

  • Frontend: Nuxt.js (Vue.js Framework)

  • Backend: Payload CMS (Headless CMS berbasis Node.js)

  • Database: MongoDB (default dari Payload)

  • Hosting: Vercel (frontend) & VPS / Cloud untuk Payload

  • Tools Pendukung: Tailwind CSS, Cloudinary (untuk media), Google Tag Manager, Google Analytics

🔧 Solusi Teknis & Strategi

  1. Frontend dengan Nuxt.js (SSR & Static Generation):

    • Halaman dibangun menggunakan Nuxt dengan rendering hybrid (Static + SSR) untuk SEO maksimal.

    • Komponen modular untuk elemen seperti hero, produk, kampanye, dan testimoni.

  2. CMS Headless dengan Payload:

    • Sistem backend fleksibel untuk membuat koleksi dinamis (produk, campaign, artikel, media).

    • Role-based access untuk tim marketing dan developer.

    • Pengaturan URL dan SEO-friendly slug per halaman.

  3. Optimasi Performa dan SEO:

    • Lazy loading untuk gambar dan komponen.

    • Open Graph dan meta tag otomatis dari Payload.

    • Sitemap dan robots.txt custom untuk crawling optimal.

  4. Pengelolaan Campaign:

    • Sistem campaign terintegrasi yang bisa diupdate langsung melalui Payload tanpa deploy ulang.

    • Halaman campaign bersifat dinamis dan bisa dikaitkan dengan microsite atau social campaign.

🔍 Fitur Utama

  • 🍫 Halaman Produk: Showcase interaktif dengan animasi ringan dan visual HD

  • 📣 Campaign Section: Halaman dinamis untuk promosi & giveaway

  • 📸 Media Galeri: Integrasi dengan Cloudinary untuk pengelolaan media

  • 📱 Mobile First Design: UI/UX optimal di semua perangkat

  • 🌐 Multi-language Ready (Future Proofing)

📈 Hasil & Dampak

  • 🚀 Page Speed Score: 90+ di Google PageSpeed (mobile & desktop)

  • 📉 Bounce Rate turun 25% setelah migrasi ke sistem baru

  • 🔍 Peningkatan CTR Campaign melalui tampilan interaktif

  • 🔧 Waktu Update Konten lebih cepat karena CMS mudah digunakan tim non-teknis

👨‍💻 Peran Saya dalam Proyek

  • Merancang dan membangun arsitektur frontend dengan Nuxt.js

  • Mengatur Payload CMS sesuai struktur konten dan kebutuhan tim brand

  • Integrasi frontend-backend secara headless

  • Setup deployment dan CI/CD (Vercel + backend cloud server)

  • Konsultasi UX dan pelatihan penggunaan CMS untuk tim internal