Skena

Minimal e-commerce with a bold, motion-first brand feel.

Skena is a local brand e-commerce website built for a premium, minimalist shopping experience with a light slate theme and polished motion design. It is intended for a small fashion or lifestyle brand that wants to feel modern, distinctive, and easy to manage through a custom admin dashboard.

Business Goals

  • Reach 2.5% store conversion rate within 90 days of launch.
  • Increase average session duration to 2:30+ within 60 days through improved motion and browsing flow.
  • Drive at least 30% of orders from returning customers by month 6.
  • Reduce admin content update time by 70% compared with manual file-based changes.
  • Achieve 99.9% storefront uptime and sub-2 second median page load on mobile.

User Goals

  • Help shoppers discover products quickly with a clean, distraction-free browsing experience.
  • Make product details, sizing, and checkout information easy to understand in under 3 clicks.
  • Create a premium brand impression through smooth scrolling, subtle animations, and responsive interactions.
  • Give admins full control over products, orders, banners, and content without developer support.

Non-Goals

  • Marketplace functionality for multiple independent sellers.
  • Native mobile apps for iOS or Android in phase 1.
  • Complex ERP, warehouse automation, or multi-warehouse inventory optimization.
  • Social commerce features like livestream selling or influencer affiliate tracking in MVP.

Brand Owner Raka, 32 - Raka runs a local fashion brand and needs a storefront that reflects the brand identity while being easy to update. He wants to manage products, promotions, and orders without touching code.

Brand Owner Raka, 32

  • As a brand owner, I want to add and edit products from an admin dashboard, so that I can launch new drops quickly.
  • As a brand owner, I want to see order status and stock levels in one place, so that I can avoid overselling.
  • As a brand owner, I want to update banners and homepage sections, so that campaigns stay fresh without developer help.

Shopper Naya, 24 - Naya discovers local brands on social media and expects a premium, mobile-friendly shopping experience. She values fast browsing, strong visuals, and a checkout flow that feels trustworthy.

Shopper Naya, 24

  • As a shopper, I want to browse products with smooth scrolling and clear imagery, so that the experience feels premium and easy.
  • As a shopper, I want to filter products by category, size, color, and price, so that I can find what fits my style.
  • As a shopper, I want a simple checkout with clear shipping and payment steps, so that I can complete my purchase confidently.

Admin Staff Dina, 27 - Dina handles daily operations such as updating inventory, processing orders, and answering customer questions. She needs a dashboard that is fast, organized, and visually clearer than standard admin panels.

Admin Staff Dina, 27

  • As an admin, I want to review pending orders and payment status, so that I can process shipments in the right order.
  • As an admin, I want to manage product variants and stock quantities, so that the catalog stays accurate.
  • As an admin, I want to publish content with safe validation and preview, so that I do not break the storefront layout.

Storefront Design and Navigation · High priority

  • Deliver a light-theme, minimal storefront with strong branding, smooth motion, and fast browsing across devices.
  • Use a clean slate color system with one primary accent color and one supporting accent for CTAs and active states.
  • Implement GSAP-based micro-interactions for hero, section transitions, hover states, and page entrance animations.
  • Use Lenis smooth scrolling with reduced-motion fallback for accessibility and devices that prefer less animation.
  • Provide responsive navigation with sticky header, mobile drawer, and clear category hierarchy.
  • Ensure visual consistency across home, collection, product detail, cart, and checkout pages.

Product Catalog and Discovery · High priority

  • Support product browsing, search, filtering, and variant selection with accurate inventory handling.
  • Display product cards with image, name, price, sale badge, and quick view on desktop.
  • Allow filtering by category, price range, color, size, and availability.
  • Support product variants such as size and color with stock validation before add-to-cart.
  • Provide related products and recently viewed items to support discovery.
  • Handle empty states, out-of-stock items, and invalid filter combinations gracefully.

Cart and Checkout · High priority

  • Provide a streamlined purchase flow that minimizes friction and supports common local payment and delivery needs.
  • Allow add-to-cart, quantity updates, removal, and saved cart persistence across sessions.
  • Collect customer shipping details with inline validation and clear error messaging.
  • Integrate payment gateway checkout and show success, pending, or failed payment states.
  • Show shipping cost estimate and order summary before payment confirmation.
  • Send order confirmation after checkout and preserve order history for logged-in customers if enabled.

Admin Dashboard · High priority

  • Create a standout admin panel with a custom sidebar layout for managing catalog, orders, content, and settings.
  • Build a left sidebar with iconography, section grouping, active states, and collapse behavior.
  • Provide dashboard cards for sales, orders, low stock, and recent activity.
  • Support CRUD for products, categories, banners, pages, and promotional content.
  • Include order management with status updates, payment verification notes, and fulfillment tracking.
  • Add form validation, image upload handling, and preview before publish to reduce mistakes.

Accounts, Roles, and Security · Medium priority

  • Protect admin access and customer data with secure authentication and role-based permissions.
  • Support login for admin users with hashed passwords and session management.
  • Implement role-based access for owner, admin, and staff permissions.
  • Protect admin routes from unauthorized access and log sensitive actions.
  • Use CSRF protection, server-side validation, and prepared statements for MySQL.
  • Provide password reset flow for staff accounts if needed.

Fast Brand Discovery Onboarding

  • Open the homepage and immediately see the hero product story within 2 seconds.
  • Scroll through featured collections with smooth motion and clear CTA visibility.
  • Use filters or search to narrow products in under 3 interactions.
  • Open a product detail page with size, color, and shipping info clearly visible.
  • Add to cart and reach checkout in under 60 seconds from first product view.
  • Complete the first purchase flow with mobile-optimized forms and instant feedback.

1. Homepage impression

  • The homepage introduces the brand with a minimal layout, strong typography, and motion-led storytelling.
  • Hero section should load fast and animate subtly without blocking interaction.
  • Prominent CTA should drive to shop collection or featured drop.
  • Fallback static layout must remain usable if animations fail or are disabled.

2. Browse and filter

  • Users explore collections through category cards, filters, and search.
  • Filter state must be reflected in the URL for sharing and refresh persistence.
  • No-results state should suggest clearing filters or browsing popular items.
  • Search should return results quickly and handle typos or partial matches.

3. Product detail

  • The product page provides visuals, price, variants, and purchase confidence information.
  • Image gallery should support zoom or swipe on mobile.
  • Variant selection must disable unavailable combinations and show stock warnings.
  • Shipping and return notes should be visible near the add-to-cart action.

4. Cart and checkout

  • The checkout path should stay concise and reassuring.
  • Validate email, phone, address, and postal code inline before payment.
  • Show order summary, shipping fee, and total before final submit.
  • If payment fails, preserve cart state and allow retry without data loss.

5. Post-purchase and admin follow-up

  • After checkout, the user sees order confirmation while staff manage fulfillment in the dashboard.
  • Confirmation page should include order number, status, and next steps.
  • Admin can update order status and trigger notification-ready records.
  • Failed or pending payment states should be clearly labeled for support handling.

Power Features and Edge Cases

  • Animated collection landing pages for seasonal drops and campaigns.
  • Featured product storytelling blocks with embedded lookbook sections.
  • Low-stock alerts and automatic hide-out-of-stock options in admin.
  • Draft mode for products and homepage content before publishing.
  • Reduced-motion and accessibility mode that disables or softens animation.
  • Graceful handling for slow networks, missing product images, and empty catalogs.

Visual and Interaction Principles

  • Light slate palette with restrained contrast, premium spacing, and one distinctive accent color for actions.
  • Typography-led hierarchy with large headlines, strong line spacing, and readable product details.
  • Motion should feel smooth and purposeful, never distracting or delaying core actions.
  • Mobile-first layouts with thumb-friendly controls and persistent bottom cart access if needed.
  • Accessibility targets include keyboard navigation, visible focus states, and color contrast that meets WCAG AA.
  • Performance target is smooth 60fps motion on modern devices with lazy-loaded images and code splitting.

Raka is tired of using a generic storefront that looks like every other brand. His customers browse from Instagram, but the website feels slow, plain, and hard to update, so new launches take too long to publish and the brand loses momentum.

With Skena, Raka gets a polished storefront that feels modern and local at the same time. The homepage, product pages, and checkout all use the same clean visual system and smooth motion, while the admin dashboard lets his team update products, banners, and orders without calling a developer.

Customers now enjoy a faster, more memorable shopping experience, which improves product discovery and conversion. For the business, that means quicker campaign launches, fewer operational errors, and a stronger premium perception for the brand.

User-Centric Metrics

  • At least 70% of users rate the browsing experience as easy to navigate in post-purchase surveys.
  • Reduce time from homepage to product view to under 20 seconds on median sessions.
  • Increase add-to-cart rate to 8% or higher within 90 days.
  • Keep checkout abandonment below 55% on desktop and below 65% on mobile.
  • Achieve a product page engagement rate of 40%+ with gallery interaction, variant selection, or scroll depth.

Business Metrics

  • Reach 2.5%+ storefront conversion rate within 90 days.
  • Increase monthly revenue by 20% within 6 months through improved conversion and repeat visits.
  • Grow returning customer share to 30%+ by month 6.
  • Reduce admin content update turnaround from days to under 30 minutes.
  • Increase campaign landing page publish frequency from monthly to weekly.

Technical Metrics

  • 99.9% uptime for storefront and admin panel.
  • Median page load under 2 seconds on 4G mobile networks.
  • API error rate below 1% for checkout and admin operations.
  • All admin write actions logged with tamper-resistant audit records.

Tracking Plan

  • Track page_view for home, collection, product, cart, checkout, and confirmation pages.
  • Track product_filter_applied with category, size, color, and price range metadata.
  • Track product_view and variant_selected events for catalog engagement.
  • Track add_to_cart, remove_from_cart, and cart_quantity_updated events.
  • Track checkout_started, shipping_details_completed, payment_initiated, and purchase_completed events.
  • Track admin_product_created, admin_product_published, and admin_order_status_updated events.
  • Track motion_reduced_enabled and animation_loaded_success to monitor accessibility and performance behavior.

Technical Needs

  • PHP 8.2 or newer with a structured MVC or modular architecture.
  • MySQL 8 for catalog, orders, users, and audit tables.
  • Vanilla JavaScript or a lightweight bundler such as Vite for interactive storefront behavior.
  • Modern CSS with design tokens, component-based styling, and responsive layout system.
  • GSAP for animations and Lenis for smooth scrolling with feature detection and fallbacks.
  • Server-side image processing and storage pipeline for optimized product images.
  • Session-based authentication with secure cookies and CSRF protection.

Integration Points

  • Midtrans or Xendit for local payment processing and payment status callbacks.
  • WhatsApp click-to-chat or notification link for customer support handoff.
  • Email service such as Resend or SendGrid for order confirmation and account emails.
  • Google Analytics 4 or PostHog for product analytics and funnel reporting.
  • Cloud storage such as Cloudflare R2 or AWS S3 for product images and media assets.

Data Storage & Privacy

  • Store customer PII only for order fulfillment and support purposes.
  • Hash passwords with a modern algorithm such as Argon2 or bcrypt and never store plain text credentials.
  • Use prepared statements and server-side validation for all database writes.
  • Provide privacy policy, cookie notice, and data retention controls aligned with GDPR and CCPA principles.
  • Restrict admin audit logs and order exports to authorized roles only.

Scalability & Performance

  • Use image compression, responsive sizes, lazy loading, and CDN delivery for media.
  • Cache public pages and collection queries where safe to reduce database load.
  • Paginate admin lists and product grids to avoid heavy initial payloads.
  • Ensure animation libraries do not block rendering or degrade low-end mobile performance.

Potential Challenges

  • Risk: animation-heavy UI can hurt performance. Mitigation: use lazy-loaded assets, small animation scopes, and reduced-motion support.
  • Risk: PHP/MySQL integration errors can cause fragile deployments. Mitigation: define a strict folder structure, env-based config, and automated smoke tests.
  • Risk: admin dashboard complexity can slow staff. Mitigation: prioritize top tasks, use clear sidebar grouping, and minimize clicks for common actions.
  • Risk: payment callbacks may fail or duplicate. Mitigation: implement idempotent webhook handling and order state machines.
  • Risk: content edits could break layout. Mitigation: use validated fields, safe defaults, and preview-before-publish workflows.

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

Phase 1: MVP Storefront and Admin Core · Weeks 1–4

  • Light-theme storefront with homepage, collection page, product detail page, cart, and basic checkout.
  • Custom admin dashboard shell with sidebar navigation and dashboard overview cards.
  • MySQL schema for products, categories, users, orders, and media.
  • Authentication, CRUD for products and categories, and basic order listing.

Phase 2: Motion, Polish, and Checkout Hardening · Weeks 5–7

  • GSAP animations and Lenis smooth scroll integrated with reduced-motion fallback.
  • Refined UI system with accent colors, responsive layouts, and polished empty states.
  • Payment gateway integration with webhook handling and order status updates.
  • Validation, error handling, and image optimization pipeline.

Phase 3: Content Management and Growth Tools · Weeks 8–10

  • Homepage banner management, featured collection sections, and draft/publish workflow.
  • Admin filters, search, pagination, and low-stock indicators.
  • Analytics events and funnel dashboards for storefront and admin activity.
  • SEO improvements including metadata, structured data, and clean URLs.

Phase 4: Launch Stabilization and Optimization · Weeks 11–12

  • Load testing, bug fixing, and performance tuning for mobile devices.
  • Accessibility pass for keyboard navigation, contrast, and reduced-motion behavior.
  • Backup and recovery procedures plus audit logging review.
  • Launch checklist, monitoring, and rollback plan.

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

Build a premium local brand e-commerce website called Skena using PHP 8.2, MySQL 8, HTML, CSS, and JavaScript, with GSAP animations and Lenis smooth scrolling. The visual style must be light, minimal, and slate-based with one strong accent color, elegant typography, premium spacing, and fully responsive layouts.

Core product:
A storefront for a local fashion/lifestyle brand and a custom admin dashboard with a distinctive sidebar layout. The storefront must include homepage, collection listing, product detail, cart, checkout, and order confirmation. The admin must include login, dashboard overview, product CRUD, category CRUD, order management, banner/content management, image uploads, and basic analytics cards.

Primary screens and flows:
Homepage with animated hero, featured products, and category sections
Collection page with search and filters for category, size, color, price, and availability
Product detail page with image gallery, variant selection, stock validation, shipping notes, and add-to-cart
Cart and checkout flow with shipping form, inline validation, payment integration, and confirmation
Admin dashboard with left sidebar navigation, overview metrics, product list, product editor, order list, and content editor

Data model:
users with roles owner, admin, staff, customer
categories
products
product_variants
product_images
carts and cart_items if needed
orders and order_items
payments
banners/homepage_sections
audit_logs
Use MySQL with prepared statements and server-side validation.

Tech requirements:
Use a clean MVC or modular PHP structure
Use sessions and secure cookies for auth
Hash passwords with bcrypt or Argon2
Add CSRF protection on all forms
Optimize images and serve responsive sizes
Add reduced-motion support and graceful fallback if GSAP or Lenis fails
Use file upload handling for product images and store them in cloud storage or local public assets with metadata in DB
Use GA4 or PostHog events for product_view, add_to_cart, checkout_started, purchase_completed, and admin actions
Integrate a local payment gateway such as Midtrans or Xendit with webhook handling

Build the UI with a polished, differentiated admin sidebar, a clean dashboard, and a storefront that feels modern and premium. Make sure the codebase is organized, production-minded, and ready to run with sensible environment variables, database migrations or SQL schema, seed data, and clear setup instructions.

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