Citroen Indonesia Company Profile Website Development

human-apps-slicing
human-apps-slicing
human-apps-slicing
human-apps-slicing
human-apps-slicing
human-apps-slicing
human-apps-slicing
human-apps-slicing

Kolaborasi: BengkelTI × PT Daffascript Naga Asia

Tujuan: menerjemahkan desain Figma menjadi website company profile Citroën Indonesia berbasis AEM Sites, dengan performa tinggi, mudah dikelola author, dan siap skala.

Tujuan

  • Mengonversi desain Figma kompleks ke komponen AEM Core Components + kustom.

  • Menjamin responsif lintas perangkat & akses cepat.

  • Mengintegrasikan fitur yang dituntut desain: navigasi, dealer locator, berita/press, form lead.

  • Optimasi performa & SEO teknis agar memenuhi Core Web Vitals.

Lingkup

  • Audit & slicing Figma → Design tokens (typography, spacing, colors) dipetakan ke Style System AEM.

  • Pembuatan Template Editor + Policies + Reusable Components (header, hero, highlights, grid, CTA, news list, dealer map, footer).

  • Content modeling: Page Templates, Content Fragment (news/article), Experience Fragment (header/footer/CTA reuse), DAM struktural (renditions, foldering).

  • Pengujian responsif, aksesibilitas, kinerja; integrasi workflow authoring.

Arsitektur & Stack Teknis

  • AEM Sites (AEMaaCS / Managed service-ready), Core Components.

  • HTL (Sightly) + Sling Models (Java, OSGi R6+) untuk binding data.

  • AEM Dispatcher (Apache) + CDN (opsional) untuk caching edge.

  • AEM DAM untuk image renditions; Dynamic Media (opsional).

  • CI/CD via Adobe Cloud Manager (quality gates, perf tests).

  • Tag Manager / Analytics: Adobe Tags (Launch) & Adobe/GA4 (opsional).

  • Maps/Locator: integrasi Google Maps/Places API (opsional).

  • Form: AEM Forms / endpoint kustom + reCAPTCHA (opsional).

Implementasi Kunci

  • Komponen modular kustom berbasis Core Components (extend via policies) agar authoring drag-and-drop tetap pixel-perfect terhadap Figma.

  • Design tokens (CSS vars) → konsistensi tema dan kemudahan perubahan global.

  • Optimasi gambar: DAM smart renditions, WebP/AVIF, <img srcset> & lazy-loading.

  • Preload/preconnect untuk font & aset kritikal; HTTP/2 & caching headers.

  • SEO teknis: JSON-LD (Organization, Website, Breadcrumb, Article), sitemap.xml, robots.txt, meta OG/Twitter, canonical.

  • i18n/MSM (opsional): struktur multi-bahasa dengan Multi-Site Manager & live-copy.

  • Aksesibilitas: heading order, alt text DAM, fokus terlihat, kontras warna.

DevOps & Kualitas

  • Branching Git + pipeline Cloud Manager (build, unit test JUnit, code scanning, deploy dev→stage→prod).

  • Lighthouse/CWV budgets di stage; regression UI (Playwright) untuk komponen kritikal.

  • Monitoring: error logging (AEM Logs), CDN/edge analytics.

Keamanan

  • HTTPS/HSTS, CSP ketat, sanitasi input, CSRF token pada form, validasi server-side.

  • Role-based authoring (Groups/Permissions), audit trail AEM.

Tantangan & Solusi

  • Pixel-perfect Figma di AEM: memetakan auto-layout/constraints ke grid & Core Components + varian kustom; tokenisasi desain menghindari duplikasi CSS.

  • Performa di perangkat low-end: strict image policy & renditions, menunda JS non-kritis, hanya memuat komponen diperlukan.

  • Kualitas authoring: komponen memiliki Author Help (description, allowed children) & policies agar konsisten.

Hasil

  • Situs company profile Citroën Indonesia berbasis AEM yang responsif, cepat, mudah dikelola tim konten.

  • Struktur konten rapi (Templates, Content/Experience Fragments), siap ekspansi kampanye & halaman baru.

  • Fondasi SEO & CWV kuat, serta pipeline CI/CD yang aman dan terukur.