Skena

A stylish local fashion store with immersive shopping and bold admin control.

Skena is a local brand e-commerce website built for fashion-forward shoppers who want a premium, fast, and visually distinctive shopping experience. It combines a light theme, rich GSAP motion, Lenis smooth scrolling, and a powerful admin dashboard so the brand can sell products, manage orders, and update content without friction.

Business Goals

  • Increase online conversion rate to 2.5% within 90 days of launch.
  • Achieve 30% of total sales from the website within 6 months.
  • Reduce cart abandonment by 15% within 4 months through better UX and checkout flow.
  • Reach 40% repeat purchase rate within 6 months through account and order history features.
  • Keep monthly site uptime at 99.9% and support at least 5,000 monthly active visitors without performance degradation.

User Goals

  • Help shoppers discover products quickly with a premium, visual browsing experience.
  • Make it easy to add items to cart, choose size, and complete checkout in under 3 minutes.
  • Let customers track orders and view purchase history from a simple account area.
  • Give the brand a standout interface that feels modern, smooth, and memorable.
  • Allow admins to manage products, content, stock, and orders from one dashboard.

Non-Goals

  • No marketplace or multi-vendor support in the first release.
  • No native mobile app; the first version is web-only and responsive.
  • No complex loyalty program, subscriptions, or BNPL integrations in MVP.
  • No advanced AI styling engine or virtual try-on in the initial scope.

Fashion Shopper Rina, 23 - Rina follows local fashion brands on social media and buys when the website feels premium and trustworthy. She wants a smooth browsing experience, clear product visuals, and a fast checkout on mobile.

Fashion Shopper Rina, 23

  • As a shopper, I want to browse collections with smooth animations, so that the brand feels premium and engaging.
  • As a shopper, I want to select size, color, and quantity clearly, so that I can order the right item without confusion.
  • As a shopper, I want to track my order status, so that I know when my package will arrive.

Brand Owner Dimas, 34 - Dimas manages the local fashion brand and needs a website that looks unique while still being easy to update. He cares about product uploads, stock accuracy, and sales visibility.

Brand Owner Dimas, 34

  • As a brand owner, I want an admin dashboard with a sidebar, so that I can manage products and orders from one place.
  • As a brand owner, I want to update banners, featured products, and homepage sections, so that campaigns can launch quickly.
  • As a brand owner, I want stock alerts and order status controls, so that I can avoid overselling and shipping delays.

Store Staff Nabila, 28 - Nabila handles daily operations such as packing, confirming payments, and updating order statuses. She needs a simple workflow that reduces mistakes.

Store Staff Nabila, 28

  • As a staff user, I want to see paid orders first, so that I can prioritize fulfillment.
  • As a staff user, I want to edit order notes and shipping numbers, so that customer service stays accurate.
  • As a staff user, I want validation when I upload products or images, so that I avoid broken listings.

Storefront and Catalog · High priority

  • The storefront must present products in a premium light-themed interface with smooth motion while keeping browsing simple and fast.
  • Homepage with hero section, featured collection, best sellers, and editorial banner blocks.
  • Collection and category pages with filters for price, size, color, and availability.
  • Product detail page with image gallery, size selector, stock indicator, and related items.
  • Search with empty-state handling and no-results suggestions.
  • Responsive layouts optimized for mobile-first shopping.

Cart and Checkout · High priority

  • Users must be able to add items, manage cart contents, and complete checkout with minimal friction.
  • Persistent cart state across page navigation and refresh.
  • Quantity updates, size changes, item removal, and subtotal recalculation in real time.
  • Checkout form with validation for name, phone, address, shipping method, and payment choice.
  • Clear error messages for out-of-stock items, invalid addresses, and failed payments.
  • Order confirmation page and email receipt after purchase.

Customer Account and Orders · Medium priority

  • Customers need a simple account area to review orders, shipping status, and saved details.
  • Sign up and login with email and password.
  • Order history with order number, status, items, and total paid.
  • Shipment tracking number display when available.
  • Editable profile details such as name, phone, and address.
  • Password reset flow with secure token-based recovery.

Admin Dashboard · High priority

  • The admin panel must provide a distinctive sidebar-driven interface for managing the store efficiently.
  • Sidebar navigation for dashboard, products, orders, customers, banners, coupons, and settings.
  • CRUD for products including title, description, price, variant, stock, categories, and image upload.
  • Order management with status updates, notes, and fulfillment fields.
  • Dashboard cards for sales, top products, pending orders, low stock, and revenue trends.
  • Role-based access for admin and staff accounts.

Motion, Branding, and UI System · Medium priority

  • The experience should feel premium and distinctive through thoughtful animation and accent usage without harming usability.
  • GSAP animations for hero entrance, card hover states, and page transitions.
  • Lenis smooth scrolling with reduced-motion fallback.
  • Light theme design system with a strong accent color, neutral palette, and consistent spacing scale.
  • Accessible contrast ratios and keyboard navigation preserved across interactive components.
  • Performance guardrails so animation does not block input or main content loading.

First-Time Shopper Journey

  • Open homepage and see a fast-loading hero with brand identity and featured collection within 2 seconds.
  • Scroll smoothly through collections, highlights, and product blocks with subtle motion.
  • Tap a product to open the detail page and inspect images, size, and price.
  • Add an item to cart and see a clear confirmation without leaving the page.
  • Proceed to checkout, enter shipping details, and complete payment in under 3 minutes.
  • Receive an order confirmation page with order number and next steps.

1. Landing and Discovery

  • The homepage should immediately communicate brand style and surface key products without clutter.
  • Show optimized hero media with lazy loading and fallback image.
  • Keep above-the-fold content visible under 2 seconds on average 4G connections.
  • If images fail, display a clean branded placeholder instead of broken layout.

2. Browse and Filter

  • Users should move through categories smoothly and narrow choices quickly.
  • Filters update results without full page reload where feasible.
  • Zero-result states must suggest removing filters or trying related categories.
  • Filter selections should persist when users navigate back.

3. Product Detail and Variant Selection

  • The product page should help users choose the right item confidently.
  • Validate size selection before allowing add-to-cart.
  • Show stock warnings when a variant is low or unavailable.
  • Use zoomable image gallery and clear price formatting in local currency.

4. Cart and Checkout

  • The checkout flow should be short, reliable, and transparent.
  • Persist cart in session and database for logged-in users.
  • Validate required fields inline and show shipping/payment errors clearly.
  • If payment fails, preserve cart contents and allow retry without data loss.

5. Admin Operations

  • Staff should manage catalog and orders efficiently from a polished dashboard.
  • Provide quick actions for order status changes and product edits.
  • Show confirmation modals for destructive actions like delete or archive.
  • Prevent invalid product creation with image, price, and stock validation.

Power Features and Edge Cases

  • Dynamic homepage sections that can be rearranged from admin without code changes.
  • Bulk product import via CSV for seasonal drops.
  • Low-stock alerts and out-of-stock auto-hiding on storefront.
  • Discount coupons with usage limits and expiry dates.
  • Draft mode for products and campaigns before publishing.
  • Reduced-motion mode and animation toggle for accessibility and device performance.

Visual and Interaction Principles

  • Light theme with premium accent color such as emerald, cobalt, or coral used consistently for CTAs and active states.
  • Side navigation in the admin should feel distinct with layered cards, soft shadows, and clear hierarchy.
  • Use motion to guide attention, not distract from shopping tasks.
  • Maintain strong contrast, visible focus states, and full keyboard accessibility.
  • Optimize images, defer non-critical animation, and keep scroll interactions fluid on mid-range devices.

Rina discovers Skena on her phone after seeing a new collection on social media. The homepage loads quickly, the motion feels polished, and she can filter by size and color without frustration, so she finds an item she wants in under a minute.

On the product page, she checks the gallery, selects her size, and adds the item to cart with one tap. Checkout is short, transparent, and mobile-friendly, so she completes her order without needing to call the brand or abandon the purchase.

Behind the scenes, Dimas uses the admin dashboard to adjust stock, publish a campaign banner, and confirm orders from a sidebar interface that feels more like a premium app than a generic CMS. The brand gets a stronger digital presence, fewer fulfillment mistakes, and a website that supports growth instead of slowing it down.

User-Centric Metrics

  • At least 70% of shoppers reach a product detail page within 3 clicks from the homepage.
  • Cart-to-checkout completion rate reaches 60% within 90 days.
  • Average checkout completion time stays under 3 minutes on mobile.
  • Product page bounce rate stays below 35%.
  • At least 80% of users rate the site experience 4 out of 5 or higher in post-purchase feedback.

Business Metrics

  • Online conversion rate reaches 2.5% within 90 days.
  • Repeat purchase rate reaches 40% within 6 months.
  • Monthly website revenue grows by 25% quarter over quarter in the first two quarters after launch.
  • At least 30% of sales come from featured campaigns or homepage merchandising.
  • Admin content update time drops by 50% compared with manual site changes.

Technical Metrics

  • 99.9% uptime monthly.
  • Average first contentful paint under 2 seconds on key pages.
  • API response time under 300 ms for common catalog and order requests.
  • Zero critical security vulnerabilities in production releases.

Tracking Plan

  • Track homepage_view to measure landing performance.
  • Track collection_filter_applied to measure discovery behavior.
  • Track product_view to measure product interest and content engagement.
  • Track add_to_cart to measure purchase intent.
  • Track checkout_started to measure funnel entry.
  • Track payment_completed to measure conversion.
  • Track admin_order_status_updated to measure operational efficiency.

Technical Needs

  • Backend built with PHP 8.2 using Laravel for routing, authentication, validation, and admin architecture.
  • Frontend rendered with Blade templates and progressive enhancement using JavaScript, GSAP, and Lenis.
  • MySQL 8 with normalized tables for products, variants, orders, users, and content blocks.
  • Image handling with server-side optimization, responsive variants, and CDN delivery.
  • Authentication with secure session management, CSRF protection, and password hashing.
  • Background jobs for email sending, image processing, and stock alerts using Laravel queues.
  • Environment-based configuration and deployment through Nginx or Apache with HTTPS.

Integration Points

  • Midtrans or Xendit for Indonesian payment processing.
  • WhatsApp or email notifications via Twilio or SMTP provider for order updates.
  • Google Analytics 4 and Meta Pixel for acquisition tracking.
  • Cloudinary or a similar media service for optimized image storage and transformation.
  • Firebase Cloud Messaging or email service for back-in-stock or campaign notifications, if needed later.

Data Storage & Privacy

  • Store only necessary customer data: name, email, phone, shipping address, and order history.
  • Encrypt sensitive configuration values and never store raw payment credentials in the app database.
  • Use role-based access control for admin and staff accounts with audit logs for critical actions.
  • Provide privacy policy, cookie notice, and consent handling aligned with GDPR and CCPA principles where applicable.
  • Implement data retention rules for inactive accounts and deleted orders, with export and deletion request support.

Scalability & Performance

  • Use server-side pagination for products, orders, and admin tables.
  • Cache homepage sections and frequently accessed catalog data with Redis or database caching.
  • Serve optimized images with lazy loading and responsive sizing to reduce bandwidth.
  • Keep animation non-blocking and respect prefers-reduced-motion to protect performance and accessibility.

Potential Challenges

  • Heavy animation may hurt performance on lower-end devices; mitigate by limiting animation complexity, deferring non-critical effects, and testing on mid-range phones.
  • Custom admin UI can become hard to maintain; mitigate with a reusable component system and clear design tokens.
  • Stock inconsistencies can cause overselling; mitigate with atomic stock reservation at checkout and low-stock alerts.
  • Payment failures can interrupt purchases; mitigate with retry flow, clear status handling, and persisted cart state.
  • Image uploads may slow the system; mitigate with compression, async processing, and CDN delivery.

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

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

  • Brand design system with light theme and accent palette.
  • Homepage, catalog, product detail, cart, and checkout flow.
  • Laravel authentication, MySQL schema, and basic admin dashboard sidebar.
  • Product CRUD, order list, and order status updates.
  • Responsive layout with GSAP intro animations and Lenis smooth scrolling.

Phase 2: Commerce Operations · Weeks 5–7

  • Payment gateway integration with order state handling.
  • Customer accounts, order history, and password reset.
  • Image optimization pipeline and media management.
  • Coupons, stock validation, and low-stock alerts.
  • Email notifications for order confirmation and status changes.

Phase 3: Polished Brand Experience · Weeks 8–10

  • Advanced homepage merchandising blocks editable from admin.
  • Enhanced motion system with page transitions and hover interactions.
  • Analytics instrumentation and event dashboard review.
  • Accessibility hardening, reduced-motion support, and performance tuning.
  • Content pages for about, size guide, shipping, and returns.

Phase 4: Launch and Stabilization · Weeks 11–12

  • Production deployment, SSL, backups, and monitoring.
  • Bug fixes from QA and real-user testing.
  • Final admin role permissions and audit logs.
  • Launch checklist, SEO basics, and conversion reporting.
  • Post-launch optimization backlog based on analytics.

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

Build a premium local fashion e-commerce website called Skena using PHP 8.2, Laravel, MySQL 8, JavaScript, CSS, Blade templates, GSAP, and Lenis smooth scrolling.

Product goals: create a light-theme storefront with immersive but fast animations, a unique accent color system, and a standout admin dashboard with a beautiful sidebar navigation.

Core screens and flows:
Homepage with hero, featured collections, best sellers, editorial banners, and smooth scroll sections
Collection page with filters for category, price, size, color, and availability
Product detail page with image gallery, variant selection, stock indicator, related products, and add-to-cart
Cart and checkout flow with validation, shipping form, payment selection, order confirmation, and email receipt
Customer account area with login, profile, and order history
Admin dashboard with sidebar for dashboard, products, orders, customers, banners, coupons, and settings
Admin CRUD for products, variants, stock, images, categories, and campaign content
Order management with status updates, notes, shipping tracking number, and audit log

Data model:
users with roles admin, staff, customer
products with title, slug, description, price, status, featured flag, category_id
product_variants with size, color, sku, stock, image
categories
orders with user_id, total, status, shipping_address, payment_status, tracking_number
order_items with order_id, product_id, variant_id, quantity, unit_price
banners, coupons, settings, audit_logs

Implementation requirements:
Use Laravel authentication, CSRF protection, validation, and role-based access control
Use MySQL migrations and seeders
Use reusable Blade components for cards, buttons, forms, modal dialogs, and admin sidebar
Implement responsive design with a premium light UI, strong accent color, visible focus states, and accessibility support
Add GSAP entrance animations, subtle hover motion, and Lenis scrolling with prefers-reduced-motion fallback
Optimize images with upload validation, compression, and lazy loading
Persist cart state for guests and logged-in users
Integrate a payment gateway such as Midtrans or Xendit
Send order confirmation emails through SMTP
Add analytics events for product views, add to cart, checkout started, and purchase completed

Build the project as a production-ready full-stack app with clean folder structure, seed data, and sensible defaults. Make the admin dashboard visually distinct, modern, and easy to use without sacrificing speed or accessibility.

Business Idea

aku mau membuat website e-comerce brand lokal saya skena, dengan light theme, 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