Skena Commerce

Toko premium yang terasa cepat, artistik, dan mudah dikelola.

SKENA Commerce adalah platform e-commerce premium untuk brand lokal SKENA dengan storefront bergaya minimalis dan dashboard admin yang sangat modern. Produk ini ditujukan untuk pelanggan muda yang sensitif terhadap estetika serta tim internal yang membutuhkan operasional penjualan yang rapi, cepat, dan mudah dipantau. Fokus utamanya adalah pengalaman belanja yang memorable dengan animasi halus, performa tinggi, dan sistem admin yang efisien untuk aktivitas harian.

Business Goals

  • Meningkatkan conversion rate storefront ke 2.5–4.0% dalam 90 hari setelah peluncuran
  • Mencapai waktu muat halaman utama di bawah 2.5 detik pada koneksi mobile 4G untuk 75% sesi dalam 60 hari
  • Mendorong repeat purchase rate minimal 18% dalam 6 bulan pertama melalui pengalaman checkout yang mulus dan notifikasi order
  • Menurunkan abandoned cart rate sebesar 15% dalam 3 bulan dengan cart drawer cepat dan checkout singkat
  • Memastikan 99.9% uptime bulanan untuk menjaga kepercayaan brand dan mengurangi loss of sales

User Goals

  • Pengunjung dapat menemukan produk yang relevan dalam waktu kurang dari 30 detik
  • Pelanggan dapat menambahkan produk ke cart tanpa perpindahan halaman yang mengganggu
  • Pelanggan dapat menyelesaikan checkout dalam 3 langkah atau kurang
  • Admin dapat menambah, mengedit, dan mengurutkan produk tanpa bantuan developer
  • Tim operasional dapat memantau order, stok, dan performa toko dari satu dashboard

Non-Goals

  • Tidak membangun marketplace multi-seller pada fase awal
  • Tidak membangun aplikasi mobile native terpisah pada versi pertama
  • Tidak menyediakan subscription commerce atau recurring billing sebagai fitur inti awal
  • Tidak mengimplementasikan custom headless commerce engine penuh yang kompleks di luar kebutuhan SKENA

Raka, 24, pembeli streetwear - Raka suka brand lokal yang punya identitas visual kuat, cepat membuka toko lewat mobile, dan sering membeli karena terlihat unik di feed atau campaign. Ia ingin belanja tanpa proses yang rumit dan sensitif terhadap pengalaman visual yang terlalu berat.

Raka, 24, pembeli streetwear

  • As a pembeli mobile, I want to menjelajah katalog dengan filter animatif, so that saya bisa cepat menemukan item yang cocok dengan gaya saya.
  • As a pembeli, I want to melihat detail produk dengan galeri yang imersif dan info jelas, so that saya bisa yakin sebelum membeli.
  • As a pembeli, I want to checkout dalam alur singkat, so that saya tidak batal karena proses yang panjang.

Nadia, 31, store manager - Nadia mengelola produk, stok, order, dan promosi harian. Ia membutuhkan panel admin yang berbeda dari template umum, cepat dipahami, dan nyaman dipakai berjam-jam tanpa membuat mata lelah.

Nadia, 31, store manager

  • As a store manager, I want to mengedit produk dan unggah gambar secara drag and drop, so that update katalog bisa dilakukan cepat tanpa developer.
  • As a store manager, I want to melihat ringkasan penjualan dan order terbaru dalam dashboard animatif, so that saya bisa mengambil keputusan harian lebih cepat.
  • As a store manager, I want to memproses order dan memperbarui statusnya dari satu tempat, so that operasi lebih rapi dan minim kesalahan.

Dimas, 38, owner brand - Dimas fokus pada pertumbuhan brand dan profit. Ia ingin data yang jelas, performa teknis yang stabil, serta tampilan yang memperkuat positioning premium dan budaya muda SKENA.

Dimas, 38, owner brand

  • As a owner, I want to melihat metrik penjualan, conversion, dan produk terlaris, so that saya bisa mengevaluasi campaign dan stok.
  • As a owner, I want to memastikan website cepat dan SEO-friendly, so that traffic organik dan awareness brand meningkat.
  • As a owner, I want to menjaga identitas visual konsisten di storefront dan dashboard, so that brand terasa premium dan memorable.

Storefront Hero dan Navigasi · High priority

  • Menyediakan landing experience yang kuat dengan hero animatif, navigasi ringkas, dan transisi halaman yang halus untuk membangun kesan premium sejak awal.
  • Hero section harus menampilkan headline besar, CTA utama, dan animasi entrance berbasis GSAP dengan durasi total tidak lebih dari 1.2 detik.
  • Navigasi harus sticky, responsif, dan berubah state secara halus saat scroll melewati threshold tertentu.
  • Page transition harus memakai micro-interaction ringan, bukan full-screen blocking animation, agar tetap cepat di mobile.
  • Header dan CTA harus tetap kontras terhadap latar clean slate untuk memastikan keterbacaan tinggi.

Katalog Produk dan Filter · High priority

  • Memungkinkan pengguna menjelajah katalog dengan filter yang cepat, intuitif, dan tidak terasa kaku meski ada banyak item.
  • Filter harus mendukung kategori, ukuran, harga, warna, dan status stok dengan update UI tanpa reload penuh.
  • Perubahan filter harus menampilkan state loading ringan seperti skeleton atau shimmer minimal.
  • Produk harus ditampilkan dalam grid asimetris dengan kartu yang punya hover micro-interaction dan preview singkat.
  • Sortir produk harus mendukung terbaru, terlaris, harga naik, dan harga turun.

PDP, Cart Drawer, dan Checkout · High priority

  • Menyajikan detail produk yang imersif dan alur checkout yang sangat singkat untuk memaksimalkan konversi.
  • PDP harus memiliki image gallery dengan parallax ringan, zoom terbatas, dan informasi ukuran, material, serta stok.
  • Cart drawer harus meluncur dari kanan tanpa meninggalkan halaman dan menampilkan ringkasan subtotal secara instan.
  • Checkout harus mendukung guest checkout, validasi alamat, ongkir, dan metode pembayaran dengan error handling yang jelas.
  • Setiap perubahan cart harus tersinkron ke server melalui REST API agar status tetap konsisten saat refresh.

Admin Dashboard dan Operasional · High priority

  • Menyediakan panel admin yang unik untuk monitoring bisnis, CRUD produk, manajemen order, manajemen user, dan pengaturan toko.
  • Dashboard harus menampilkan grafik animatif, KPI cards, order terbaru, dan notifikasi stok rendah.
  • CRUD produk harus mendukung upload banyak gambar dengan drag and drop, reorder, dan thumbnail preview.
  • Manajemen order harus mendukung perubahan status, pencarian, filter, dan detail transaksi yang dapat ditelusuri.
  • Manajemen user harus membedakan peran admin, editor, dan operator dengan hak akses yang jelas.

Content, SEO, dan Accessibility · Medium priority

  • Memastikan storefront tetap cepat ditemukan di mesin pencari dan dapat diakses oleh berbagai pengguna tanpa mengorbankan estetika.
  • Setiap halaman produk harus memiliki metadata SEO, structured data, dan URL yang bersih.
  • Semua komponen harus memiliki keyboard focus state, label yang jelas, dan kontras warna yang lolos minimal WCAG AA.
  • Animasi harus dapat dikurangi secara otomatis jika sistem pengguna mengaktifkan prefers-reduced-motion.
  • Konten utama harus tetap terbaca dan usable ketika JavaScript gagal sebagian atau jaringan lambat.

First Visit to Checkout

  • Pengunjung membuka homepage dan langsung melihat hero animatif dengan value proposition yang jelas.
  • Pengunjung scroll ringan dengan Lenis untuk menjelajah koleksi unggulan dan highlight produk.
  • Pengunjung memakai filter katalog untuk menyaring kategori atau harga dalam kurang dari 10 detik.
  • Pengunjung membuka PDP, melihat galeri imersif, dan memilih ukuran serta warna.
  • Pengunjung menambahkan produk ke cart drawer dan meninjau ringkasan tanpa pindah halaman.
  • Pengunjung checkout dalam 3 langkah atau kurang dengan target time-to-value dari landing ke add-to-cart di bawah 45 detik.

1. Landing yang Mengunci Perhatian

  • Homepage harus memperkenalkan brand SKENA melalui tipografi besar, layout minimalis, dan animasi entrance yang elegan tanpa terasa berlebihan.
  • Hero copy harus terbaca dalam 1 detik pertama.
  • CTA utama harus kontras dan selalu terlihat di atas fold.
  • Animasi awal wajib ringan di mobile dan tidak menunda interaksi utama.

2. Jelajah Katalog yang Fluid

  • Pengguna menelusuri katalog dengan filtering cepat, visual kartu yang bersih, dan loading yang tidak mengganggu.
  • Filter harus bisa dipilih bergantian tanpa reload penuh.
  • State kosong harus menjelaskan tidak ada hasil dan memberi saran filter lain.
  • Pagination atau infinite scroll harus dipilih sesuai volume katalog, dengan preferensi infinite scroll yang tetap terukur untuk SEO.

3. PDP yang Meyakinkan

  • Halaman detail produk menampilkan informasi yang cukup untuk mendorong keputusan beli dengan visual yang terasa premium.
  • Galeri gambar harus mendukung swipe mobile dan thumbnail desktop.
  • Ukuran yang habis stok harus disabled dan dijelaskan dengan copy yang jujur.
  • Harga diskon harus menampilkan perbandingan yang jelas tanpa memaksa.

4. Cart Drawer dan Checkout Singkat

  • Proses add-to-cart hingga pembayaran harus sesingkat mungkin untuk mengurangi friction dan mencegah drop-off.
  • Cart drawer menampilkan jumlah item, subtotal, ongkir estimasi, dan tombol checkout utama.
  • Validasi form harus inline dan spesifik, misalnya alamat kosong atau nomor telepon tidak valid.
  • Jika koneksi terputus, cart lokal harus tetap tersimpan lalu disinkronkan saat koneksi kembali.

5. Post-Purchase Confidence

  • Setelah pembayaran, pengguna menerima konfirmasi yang jelas agar merasa aman dan ingin kembali berbelanja.
  • Halaman sukses harus menampilkan nomor order, ringkasan item, dan status pembayaran.
  • Email atau notifikasi order harus dikirim otomatis.
  • Pengguna harus bisa melacak status order dari halaman akun atau tautan unik.

Power User and Edge Features

  • Wishlist berbasis akun atau session untuk menyimpan produk favorit
  • Quick view modal untuk melihat ukuran, warna, dan stok tanpa membuka PDP penuh
  • Admin bulk action untuk produk dan order, termasuk status mass update
  • Role-based access control dengan audit log untuk perubahan penting
  • Support mode reduced motion untuk pengguna yang sensitif terhadap animasi
  • Fallback UI jika asset animasi gagal dimuat agar toko tetap usable

Visual, Accessibility, and Performance Principles

  • Palet clean slate harus dominan putih dan abu sangat muda dengan accent warna yang terkendali pada CTA dan state aktif
  • Tipografi harus besar, modern, dan mudah dibaca, dengan hierarki jelas antara headline, label, dan body text
  • Animasi GSAP harus memiliki purpose, bukan dekorasi semata, dan dibatasi agar tidak mengganggu tugas utama
  • Lenis harus dipakai untuk scroll halus namun tetap menghormati prefers-reduced-motion
  • Komponen harus memiliki spacing lega, border tipis, dan elevasi halus agar terlihat premium
  • Dashboard admin harus nyaman untuk sesi panjang dengan warna accent yang tidak terlalu tajam di area kerja intensif

Nadia mengelola brand SKENA dengan katalog yang sering berubah karena drop produk musiman. Sebelumnya, ia kesulitan memakai dashboard yang kaku dan penuh elemen visual yang melelahkan, sehingga update stok dan order sering tertunda. Dengan SKENA Commerce, ia bisa menambah produk, mengurutkan gambar, dan memantau order dari dashboard yang modern dan mudah dipahami.

Di sisi pelanggan, Raka membuka toko dari ponselnya dan langsung disambut landing page yang kuat secara visual tetapi tetap cepat. Ia menemukan item lewat filter animatif, membuka PDP yang meyakinkan, lalu menambahkan barang ke cart tanpa pindah halaman. Checkout yang singkat membuat keputusan belinya selesai sebelum ia kehilangan minat.

Hasilnya, brand SKENA mendapatkan pengalaman yang terasa premium sekaligus operasional yang efisien. Pelanggan merasa toko ini lebih hidup dan lebih cepat dibanding toko biasa, sementara tim internal mendapatkan alat yang membuat penjualan, stok, dan konten lebih mudah dikendalikan. Itu menciptakan dampak langsung pada conversion, repeat purchase, dan persepsi brand.

User-Centric Metrics

  • Add-to-cart rate mencapai minimal 12% dari sesi katalog dalam 90 hari
  • Checkout completion rate di atas 60% dari pengguna yang memulai checkout
  • Rata-rata waktu dari landing ke add-to-cart di bawah 45 detik
  • Skor kepuasan pengalaman belanja minimal 4.5 dari 5 pada survei pasca pembelian
  • Bounce rate homepage turun 10% setelah optimasi hero dan loading

Business Metrics

  • Conversion rate toko mencapai 2.5–4.0% dalam 3 bulan
  • Repeat purchase rate mencapai minimal 18% dalam 6 bulan
  • Average order value meningkat 8–12% melalui cross-sell dan layout PDP yang lebih kuat
  • Waktu operasional admin untuk update produk turun 30% dibanding proses manual lama

Technical Metrics

  • Uptime bulanan minimal 99.9%
  • LCP di bawah 2.5 detik pada perangkat mid-range untuk halaman utama
  • API cart dan checkout memiliki error rate di bawah 0.5%
  • Semua aksi kritikal admin terekam dalam audit log dengan tingkat keberhasilan 100%

Tracking Plan

  • Track homepage_view untuk mengukur entry traffic dan engagement awal
  • Track product_filter_applied untuk melihat pola pencarian produk
  • Track product_view untuk mengukur PDP performance dan minat produk
  • Track add_to_cart untuk menganalisis konversi katalog ke cart
  • Track cart_opened dan checkout_started untuk memantau funnel
  • Track payment_success dan payment_failed untuk memahami drop-off checkout
  • Track admin_product_saved dan admin_order_status_updated untuk mengukur efisiensi operasional

Technical Needs

  • PHP 8.2+ dengan arsitektur MVC yang bersih atau framework ringan seperti Laravel bila tim membutuhkan ekosistem lebih matang
  • MySQL 8 dengan indexing yang tepat pada tabel produk, order, cart, dan user
  • PDO untuk seluruh layer akses database dengan prepared statements wajib
  • RESTful API untuk operasi cart, checkout, auth, produk, dan order
  • Vanilla JavaScript dengan GSAP dan Lenis, tanpa framework frontend berat
  • Asset pipeline sederhana dengan Vite atau build tool ringan untuk bundling CSS dan JS
  • Caching layer seperti Redis opsional untuk session, cart, dan query yang sering dipakai

Integration Points

  • Payment gateway seperti Midtrans atau Xendit untuk pembayaran lokal Indonesia
  • Email service seperti SendGrid atau Mailgun untuk notifikasi order dan password reset
  • WhatsApp gateway opsional untuk notifikasi order dan follow-up pelanggan
  • Analytics seperti Google Analytics 4 dan Meta Pixel untuk tracking campaign
  • Storage seperti S3-compatible object storage untuk gambar produk dan aset media

Data Storage & Privacy

  • Password harus di-hash dengan algoritma kuat seperti bcrypt atau Argon2
  • Sesi admin dan pelanggan harus dienkripsi dan memiliki expiry yang aman
  • Data pribadi pelanggan seperti nama, alamat, email, dan nomor telepon harus dibatasi aksesnya berdasarkan role
  • Kebijakan retensi data harus disiapkan untuk kepatuhan privasi yang relevan seperti GDPR atau CCPA bila ada trafik internasional
  • Audit log harus menyimpan perubahan penting tanpa menyimpan data sensitif berlebihan

Scalability & Performance

  • Gambar produk harus dioptimalkan dengan WebP atau AVIF dan lazy loading
  • Query katalog harus menggunakan pagination, indexing, dan caching untuk menghindari bottleneck
  • Animasi GSAP harus dipakai selektif pada elemen yang benar-benar penting agar CPU usage tetap rendah
  • Cart dan checkout harus idempotent untuk menghindari double submission saat jaringan lambat

Potential Challenges

  • Risiko performa turun akibat animasi berlebihan; mitigasi dengan budget animasi per halaman, lazy init, dan fallback reduced motion
  • Risiko konflik state antara cart frontend dan backend; mitigasi dengan server as source of truth dan sync endpoint yang konsisten
  • Risiko query MySQL lambat saat katalog membesar; mitigasi dengan indexing, pagination, dan query profiling rutin
  • Risiko keamanan pada admin panel; mitigasi dengan RBAC, CSRF protection, rate limiting, dan audit log
  • Risiko kesalahan implementasi pembayaran; mitigasi dengan webhook verification, idempotency key, dan test sandbox end-to-end

Team & resourcing - Small team - 2 full-stack engineers, 1 UI/UX designer, 1 part-time PM, and 1 QA support

Phase 1: Discovery and Architecture · Weeks 1–2

  • Information architecture untuk storefront dan admin
  • Design system awal termasuk warna, tipografi, spacing, dan motion rules
  • Database schema MySQL awal untuk users, products, categories, orders, payments, carts, dan audit_logs
  • API contract awal untuk cart, checkout, auth, produk, dan order

Phase 2: MVP Storefront · Weeks 3–6

  • Homepage dengan hero animatif dan navigasi responsif
  • Katalog produk dengan filter, sort, dan kartu produk modular
  • PDP dengan galeri gambar, detail produk, dan CTA add-to-cart
  • Cart drawer dan checkout dasar dengan validasi form dan payment gateway sandbox
  • SEO dasar, metadata, dan structured data untuk halaman utama dan produk

Phase 3: Admin Dashboard · Weeks 7–9

  • Dashboard analytics dengan KPI cards dan grafik animatif
  • CRUD produk lengkap dengan upload gambar, reorder, dan status stok
  • Manajemen order, user, dan role-based access control
  • Sidebar inovatif dengan mode icon-only dan tooltip animatif
  • Audit log untuk aksi penting admin

Phase 4: Hardening and Launch · Weeks 10–12

  • Optimasi performa gambar, JS, dan animasi
  • Accessibility audit dan perbaikan keyboard navigation
  • Security hardening, CSRF protection, rate limiting, dan webhook verification
  • QA regression test untuk checkout, admin flow, dan mobile responsiveness
  • Go-live plan, monitoring, error logging, dan dashboard analytics

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build an e-commerce web app for a premium local brand called SKENA using PHP 8.2+, MySQL 8, PDO, HTML5, CSS3, and vanilla JavaScript. Use a clean MVC architecture with RESTful APIs for cart, checkout, auth, products, and orders. The storefront must have a light minimal clean-slate design with white and very light gray surfaces, subtle borders, large typography, and one or two elegant accent colors for CTA and active states.

Required storefront screens and flows:
Home page with an animated hero, sticky navigation, featured collections, and product highlights
Catalog page with animated filters, sorting, responsive product grid, empty states, and lazy-loaded images
Product detail page with image gallery, subtle parallax, variant selection, stock state, and add-to-cart
Cart drawer sliding in from the right with instant updates, subtotal, shipping estimate, and checkout CTA
Checkout flow with guest checkout, address validation, shipping selection, payment integration, and success page

Required admin screens:
Analytics dashboard with KPI cards, animated charts, recent orders, and low-stock alerts
Product management CRUD with drag-and-drop image upload, reorder, variant handling, and stock editing
Order management with search, filters, status updates, and detail view
User and role management with RBAC and audit log
Settings page for store config, shipping, payments, and theme accents

UI and motion requirements:
Use GSAP for timeline animations, text reveals, scroll-triggered transitions, and micro-interactions
Use Lenis for buttery smooth scrolling, but honor prefers-reduced-motion
Design the admin dashboard to be unique with a Bento Grid layout, subtle glassmorphism, an innovative collapsible icon-only sidebar with animated tooltips, and accent colors used sparingly to avoid eye strain
Make the UI responsive, accessible, keyboard navigable, and performant on mid-range mobile devices

Data model should include users, roles, products, product_images, categories, variants, carts, cart_items, orders, order_items, payments, settings, and audit_logs
Use MySQL indexing, prepared statements, CSRF protection, secure sessions, idempotent checkout, and webhook verification for payments
Implement image optimization with WebP or AVIF, lazy loading, server-side rendering for SEO-critical pages, and structured data for products

Deliver a working scaffold with clean folder structure, reusable components, API endpoints, sample seed data, and sensible defaults for a production-ready MVP.

Business Idea

Bertindaklah sebagai Senior Product Manager dan Lead UI/UX Designer dengan pengalaman 10+ tahun dalam membangun e-commerce premium dan high-performance web applications. Tugas Anda adalah membuat Product Requirements Document (PRD) yang sangat detail, komprehensif, dan terstruktur untuk proyek e-commerce brand lokal bernama "SKENA". Berikut adalah konteks dan requirement utama proyek: 1. BRAND IDENTITY & VIBE: - Nama Brand: SKENA (Mengambil vibe indie, streetwear, musik alternatif, atau youth culture). - Tema: Light theme, minimalis, "clean slate" (dominan warna putih, abu-abu sangat muda, garis-garis tipis/subtle borders). - Accent Color: Tentukan 1-2 warna accent yang kontras namun elegan (misal: Electric Blue, Neon Lime, atau Vibrant Orange) untuk CTA, hover states, dan elemen admin dashboard. 2. FRONTEND (STOREFRONT) UI/UX & ANIMATION: - Harus menggunakan "Full Animation" approach. - Tech animasi wajib: GSAP (untuk timeline, scroll triggers, text reveals) dan Lenis (untuk buttery smooth scrolling). - Micro-interactions pada setiap hover, click, dan page transition. - Layout harus minimalis namun dinamis (asymmetrical grids, large typography, generous whitespace). 3. ADMIN DASHBOARD PANEL: - Harus sangat unik dan "berbeda dari yang lain" (jangan gunakan template Bootstrap/AdminLTE standar). - Konsep UI: Modern, mungkin menggunakan Bento Grid layout, Glassmorphism subtle, atau Neumorphism ringan. - Sidebar: Inovatif (misal: collapsible menjadi icon-only dengan tooltip animasi, atau sidebar yang menyatu dengan konten saat di-scroll). - Accent color harus digunakan dengan tepat di dashboard agar tidak melelahkan mata saat dipakai berjam-jam. 4. TECH STACK: - Backend: PHP (Native atau framework ringan seperti Slim/Flight, atau Laravel jika diizinkan, tapi utamakan arsitektur MVC yang bersih). - Database: MySQL. - Frontend: HTML5, CSS3 (Vanilla atau Tailwind/SCSS), JavaScript (Vanilla JS untuk GSAP/Lenis, hindari framework berat seperti React/Vue agar loading awal tetap cepat). - Integrasi: Harus seamless, zero-error, menggunakan PDO untuk database, dan RESTful API structure untuk komunikasi frontend-backend (terutama untuk Cart & Checkout). 5. FITUR UTAMA (CORE FEATURES): - Storefront: Hero section animatif, Product catalog dengan filter animasi, Product detail page (PDP) dengan image gallery parallax, Cart drawer (slide from right), Checkout flow yang simpel. - Admin: Dashboard analytics (grafik animatif), Manajemen Produk (CRUD dengan drag & drop gambar), Manajemen Order, Manajemen User/Pelanggan, Pengaturan Toko. TOLONG BUAT PRD DENGAN STRUKTUR BERIKUT: 1. Executive Summary (Visi, Misi, dan Tujuan Produk) 2. Target Audience & User Personas 3. Design System & UI/UX Guidelines (Termasuk palet warna "clean slate", tipografi, dan aturan animasi GSAP/Lenis) 4. Technical Architecture & Stack Details (Bagaimana PHP, MySQL, dan JS berinteraksi tanpa error) 5. Feature Requirements (User Stories untuk Storefront & Admin Panel) 6. Admin Dashboard UI/UX Concept (Detail keunikan sidebar dan layout) 7. Non-Functional Requirements (Performance, Security, SEO, Accessibility - sangat krusial karena web ini heavy animation) 8. Development Phases & Milestones (Sprint planning) 9. Potential Risks & Mitigation (Terutama risiko performa akibat GSAP/Lenis dan integrasi PHP) Gunakan bahasa Indonesia yang profesional, teknis, dan mudah dipahami oleh developer maupun stakeholder. Berikan detail yang sangat spesifik pada bagian arsitektur dan UI/UX.

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company

    PRD: Bertindaklah sebagai Senior Product Manager dan Lead...