Skena

Minimal storefront, bold motion, effortless shopping.

Skena is a modern e-commerce website for a local Indonesian brand that wants a clean, light, minimalist storefront with premium motion design. It serves fashion/lifestyle shoppers and gives the brand an elegant admin dashboard to manage products, orders, content, and promotions without relying on a marketplace.

Business Goals

  • Increase online conversion rate to 2.5%+ within 90 days of launch.
  • Reach at least 30% of total sales from direct website orders within 6 months.
  • Reduce order-processing time by 40% by centralizing product, inventory, and order management.
  • Achieve 25% repeat purchase rate within 6 months through promotions and customer accounts.
  • Maintain 98.5%+ site uptime during campaign and peak traffic periods.

User Goals

  • Browse products quickly in a clean, uncluttered interface.
  • Find size, price, and stock information without confusion.
  • Checkout smoothly on mobile in under 3 minutes.
  • Track order status and payment updates from a personal account.
  • Shop a brand experience that feels premium and distinct from marketplace listings.

Non-Goals

  • Not a multi-vendor marketplace.
  • Not a custom ERP or full accounting system.
  • Not a native mobile app in the first release.
  • Not a content-heavy editorial site with a blog network.

Shopper Naya, 24 - A style-conscious customer who discovers local brands through social media and wants a polished shopping experience on mobile. She values fast browsing, clear product presentation, and smooth checkout.

Shopper Naya, 24

  • As a shopper, I want to filter products by category, size, and price, so that I can find items that fit my style and budget.
  • As a shopper, I want to see high-quality product photos and motion-rich interactions, so that the brand feels premium and trustworthy.
  • As a shopper, I want to checkout quickly with secure payment options, so that I do not abandon my cart.

Store Owner Raka, 31 - The founder of the local brand who needs to manage products, stock, orders, and promotions daily. He wants an admin panel that looks unique, is easy to use, and reduces manual work.

Store Owner Raka, 31

  • As a store owner, I want to add and edit products from an admin dashboard, so that I can keep the catalog updated without developer help.
  • As a store owner, I want to see pending orders and stock alerts in one place, so that I can ship faster and avoid overselling.
  • As a store owner, I want to create promo banners and homepage collections, so that I can support launches and campaigns.

Operations Admin Dita, 28 - A staff member responsible for fulfillment and customer communication. She needs a reliable workflow for managing orders, payment verification, and shipment updates.

Operations Admin Dita, 28

  • As an operations admin, I want to update order status and upload tracking numbers, so that customers stay informed.
  • As an operations admin, I want to verify manual bank transfer payments, so that orders are not delayed.
  • As an operations admin, I want to search orders by customer, phone, or invoice number, so that I can resolve issues quickly.

Storefront and Product Discovery · High priority

  • Deliver a fast, visually distinctive storefront with a clean light theme and smooth motion using GSAP and Lenis, while keeping product discovery simple.
  • Homepage must support hero section, featured collections, new arrivals, and campaign banners.
  • Category and product listing pages must support filters for size, color, price, and availability.
  • Product detail page must show image gallery, stock status, description, size guide, and related products.
  • Motion must enhance perceived quality without blocking usability or increasing interaction latency.
  • Responsive behavior must be optimized for mobile-first shopping and touch interactions.

Cart and Checkout · High priority

  • Provide a frictionless checkout flow for logged-in and guest users, with validation and order confirmation.
  • Cart must allow quantity updates, item removal, and subtotal recalculation in real time.
  • Checkout must collect customer details, shipping address, shipping method, and payment method.
  • Form validation must prevent incomplete addresses, invalid phone numbers, and duplicate submissions.
  • Order confirmation page must display order number, payment instructions, and expected next steps.
  • Support guest checkout and account-based checkout with saved addresses.

Admin Dashboard · High priority

  • Create a standout admin panel with a premium sidebar navigation and clear operational views for the brand team.
  • Sidebar must organize sections for dashboard, products, orders, customers, promotions, content, and settings.
  • Admin dashboard must show KPIs such as revenue, orders, low-stock items, and pending payments.
  • Product management must support create, edit, archive, and bulk update actions.
  • Order management must allow status changes, manual payment confirmation, and tracking updates.
  • Admin UI must be visually differentiated but still fast, readable, and keyboard navigable.

Inventory, Promotions, and Content · Medium priority

  • Support brand operations including inventory alerts, promotional pricing, and lightweight content management.
  • Stock counts must decrement on paid orders and flag low-stock thresholds.
  • Admin must be able to create discount codes and homepage promotion blocks.
  • Homepage collections and banners must be editable without code changes.
  • Product visibility must support draft, active, and archived states.
  • Promotion rules must prevent stacking conflicts unless explicitly enabled.

Authentication and Customer Account · Medium priority

  • Enable customers and staff to access the right experience through secure authentication and role-based permissions.
  • Customer accounts must support registration, login, password reset, and order history.
  • Admin access must require role-based permissions such as owner, admin, and ops.
  • Session handling must support secure logout and idle timeout for admin users.
  • Account pages must show saved addresses, order history, and basic profile details.
  • Optional social login can be deferred but architecture should not block it later.

Fast Brand First Impression

  • User lands on a light, minimalist homepage in under 2 seconds on a normal 4G connection.
  • Animated hero and collection entry points introduce the brand without overwhelming the page.
  • User scrolls smoothly with Lenis and sees featured products, campaign story, and trust signals.
  • User taps a product card and reaches the product page in one clear action.
  • Target time-to-value: user reaches a product detail page in under 20 seconds from first visit.

1. Homepage Discovery

  • Visitors immediately understand the brand, current collection, and primary call to action.
  • Use clean slate tones with one accent color for focus states and CTAs.
  • Load above-the-fold assets progressively and avoid layout shifts.
  • If campaign content is missing, fallback to featured products and best sellers.

2. Browse and Filter

  • Users narrow the catalog by category and attributes without feeling lost.
  • Filters must be sticky on desktop and accessible in a drawer on mobile.
  • Show applied filter chips with one-tap removal.
  • Handle empty results with suggested reset actions and popular items.

3. Product Detail

  • Users inspect item photos, sizing, and stock before deciding to add to cart.
  • Provide zoomable gallery, variant selection, and size guide.
  • Disable unavailable variants and show low-stock warnings.
  • If an image fails to load, show a graceful placeholder and keep page usable.

4. Cart to Checkout

  • Users review items and complete payment with minimal friction.
  • Recalculate totals instantly on quantity change.
  • Show shipping cost before final confirmation.
  • Prevent checkout submission if required fields are missing or invalid.

5. Confirmation and Tracking

  • Users receive a clear order summary and can later review status from their account.
  • Display invoice number, payment status, and fulfillment timeline.
  • Send confirmation email and optional WhatsApp notification.
  • If payment is pending, show exact payment instructions and time limit.

Power Features and Edge Cases

  • Abandoned cart recovery via email or WhatsApp reminder.
  • Bulk product import/export using CSV for catalog maintenance.
  • Role-based admin permissions with audit logs for sensitive actions.
  • Dynamic homepage sections for launches, drops, and limited-time promos.
  • Fallback behavior for empty stock, discontinued products, and payment failures.
  • Planned support for product tagging and future recommendation logic.

Visual System and Interaction Principles

  • Light theme with clean slate background, strong whitespace, and one premium accent color.
  • Distinct but restrained motion language using GSAP for micro-interactions and page reveals.
  • Lenis smooth scrolling must feel fluid but never interfere with native navigation or accessibility.
  • Typography hierarchy must support fast scanning on mobile and desktop.
  • All interactive elements must meet WCAG contrast and keyboard focus standards.
  • Animations must respect reduced-motion preferences and degrade gracefully on low-end devices.

Raka runs a local brand with strong products, but his current sales depend on marketplaces that make the brand feel generic. He needs a website that looks premium, loads fast, and makes customers trust the brand enough to buy directly.

With Skena, Naya lands on a clean homepage, scrolls through smooth animated collections, and finds exactly what she wants with minimal friction. She checks size availability, adds to cart, and completes checkout in minutes, while Raka manages inventory, orders, and promotions from a striking admin dashboard that saves time and reduces mistakes.

The result is a brand-owned storefront that improves conversion, supports campaigns, and gives the business a direct customer relationship instead of depending entirely on third-party marketplaces.

User-Centric Metrics

  • Product page engagement rate above 40%.
  • Cart-to-checkout completion rate above 65%.
  • Checkout completion time under 3 minutes for 80% of users.
  • Order status page or account usage by 35% of buyers.
  • Customer satisfaction score above 4.5/5 after purchase.

Business Metrics

  • Direct website conversion rate reaches 2.5%+ within 90 days.
  • At least 30% of monthly revenue comes from the website within 6 months.
  • Repeat purchase rate reaches 25% within 6 months.
  • Promo campaign landing pages lift revenue per visitor by 15% or more.
  • Reduce manual order handling time by 40%.

Technical Metrics

  • 99.5% uptime monthly for storefront and admin.
  • Median homepage and listing page load under 2 seconds on broadband and under 3.5 seconds on mobile 4G.
  • API error rate below 1% for checkout and order actions.
  • Admin authentication and sensitive actions protected with audit logging and secure sessions.

Tracking Plan

  • Track homepage_view when a user lands on the site.
  • Track collection_click when a featured category or campaign tile is selected.
  • Track product_view when a product detail page loads.
  • Track filter_apply when users change category, size, color, or price filters.
  • Track add_to_cart when an item is added from PDP or listing.
  • Track checkout_started when the user reaches the checkout flow.
  • Track purchase_completed with order value, items count, and payment method.

Technical Needs

  • PHP 8.2 backend with a clean MVC structure or Laravel if the team wants faster delivery.
  • MySQL 8 for product, order, customer, promo, and inventory tables.
  • Modern JavaScript frontend for interactions, animations, and admin UX; Vite for bundling.
  • CSS architecture with design tokens, responsive layout system, and motion-friendly components.
  • GSAP for animation sequences and Lenis for smooth scrolling, both gated behind performance checks.
  • Server-side rendering or hybrid rendering for SEO-critical pages.
  • Image optimization pipeline with WebP/AVIF and lazy loading.

Integration Points

  • Midtrans for payments in Indonesia.
  • WhatsApp notifications via official WhatsApp Business API or a provider like Wablas/Twilio as available.
  • Email delivery through SendGrid or Mailgun.
  • Google Analytics 4 and Google Tag Manager for analytics.
  • Shipping rate and tracking integration with RajaOngkir or a courier aggregator.

Data Storage & Privacy

  • Store personal data minimally: name, phone, email, address, and order history only.
  • Encrypt sensitive credentials and use hashed passwords with modern algorithms.
  • Provide consent and privacy policy flows aligned with GDPR/CCPA-style principles where applicable.
  • Set retention rules for logs, abandoned carts, and inactive accounts.
  • Restrict admin access by role and log sensitive actions such as refunds, stock edits, and payment confirmations.

Scalability & Performance

  • Cache catalog and homepage content to reduce database load.
  • Paginate product lists and orders to avoid expensive large queries.
  • Optimize media delivery with CDN support and responsive image sizes.
  • Ensure animation code does not block input or cause long main-thread tasks.

Potential Challenges

  • Complex animations may hurt performance on lower-end devices; mitigate with reduced-motion support, lazy initialization, and performance budgets.
  • PHP code can become hard to maintain if architecture is loose; mitigate with an MVC framework, service layers, and code standards.
  • Inventory and order state can drift during peak sales; mitigate with transactional updates and stock reservation rules.
  • Admin dashboard may become cluttered; mitigate with clear hierarchy, role-based navigation, and iterative usability testing.
  • Payment or notification integrations can fail intermittently; mitigate with retry queues, webhook verification, and visible error states.

Team & resourcing - Small team - 2 engineers, 1 product designer, part-time PM, and 1 QA/ops contributor.

Phase 1: MVP Storefront · Weeks 1–4

  • Responsive homepage, category pages, product detail pages, cart, and basic checkout.
  • Light theme design system with slate palette and one accent color.
  • GSAP and Lenis motion layer implemented with performance guardrails.
  • MySQL schema for products, variants, users, carts, and orders.

Phase 2: Admin Operations · Weeks 5–7

  • Custom admin dashboard with premium sidebar navigation.
  • Product CRUD, inventory updates, order management, and payment verification.
  • Role-based access control for owner, admin, and ops roles.
  • Audit log for sensitive admin actions.

Phase 3: Payments and Growth · Weeks 8–10

  • Midtrans payment integration and webhook handling.
  • Email and WhatsApp order notifications.
  • Promo codes, homepage banners, and featured collections management.
  • GA4 and GTM event instrumentation.

Phase 4: Hardening and Launch · Weeks 11–12

  • Performance optimization, accessibility pass, and QA fixes.
  • Mobile checkout refinement and error-state handling.
  • Backup, monitoring, and deployment checklist.
  • Launch-ready admin documentation and basic staff training.

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

Build a premium local brand e-commerce website called Skena.

Product summary:
A minimalist light-theme storefront for a local Indonesian fashion/lifestyle brand, with elegant motion design using GSAP and Lenis smooth scrolling, plus a highly distinctive admin dashboard with a beautiful sidebar navigation. The site must be built with PHP, JavaScript, CSS, and MySQL, and should be production-ready, responsive, SEO-friendly, and easy for a small internal team to manage.

Primary goals:
Create a fast storefront that converts well on mobile, and an admin panel that lets the brand manage products, inventory, orders, promos, and customer communication without developer help.

Tech stack:
Backend: PHP 8.2 with Laravel preferred if possible, otherwise clean MVC structure
Database: MySQL 8
Frontend: vanilla JS or lightweight component-based JS, CSS variables/design tokens, Vite build pipeline
Animations: GSAP for micro-interactions and page reveals, Lenis for smooth scrolling
Assets: WebP/AVIF image optimization, lazy loading, responsive images
Auth: secure session-based auth with role-based access control
Integrations: Midtrans payments, Google Analytics 4, Google Tag Manager, SendGrid or Mailgun email, WhatsApp Business API/provider, RajaOngkir or courier tracking integration

Must build these screens:
1. Public homepage with hero, featured collections, best sellers, campaign banner, brand story, and trust signals
2. Product listing page with filters for category, size, color, price, and availability
3. Product detail page with gallery, variants, size guide, stock status, related products, and add-to-cart
4. Cart and checkout flow with shipping address, shipping method, payment method, order summary, and confirmation
5. Customer account area with order history, saved addresses, and profile details
6. Admin dashboard with unique premium sidebar, KPI cards, products, orders, customers, promotions, content blocks, settings, and audit log

Data model:
Users, roles, customers, products, product_variants, product_images, categories, carts, cart_items, orders, order_items, payments, shipments, promos, homepage_sections, inventory_logs, audit_logs, and notifications.

Core requirements:
Implement guest checkout and account checkout
Support create/edit/archive product flows and bulk inventory updates
Order states: pending, paid, packing, shipped, completed, cancelled, refunded
Payment confirmation via webhook and manual admin verification
Stock decrement on paid orders and low-stock alerts
Search orders by invoice, phone, customer name
Make the UI visually refined with a clean slate palette, one strong accent color, minimal layout clutter, and high-performance motion that respects reduced-motion preferences

Implementation notes:
Use server-side validation for all forms, secure password hashing, CSRF protection, prepared statements or ORM protections, and role-based route guards. Include empty states, error states, loading states, and graceful fallbacks for missing images, failed payment callbacks, and out-of-stock products. Provide seed data and an initial admin account. Structure the code so it can be expanded later for recommendations, blogs, and social login.

Business Idea

aku mau membuat website e-comerce brand lokal saya skena, dengan light theme dan minimalis dengan warna clean slate, dan menggunakan animasi full animasi, gsap, lenis smoothscroll dll, dan saya mau menggunakan php, js, css, mysql, integrasikan semuanya tanpa ada kesalahan, saya mau ada admin dashboard panel sidebar sangat bagus dan beda dari yang lain, gunakan accent yang bagus

Make My PRD

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