BuluKunci

Catalog keychains beautifully, order them instantly on WhatsApp.

BuluKunci is a mobile-first web catalog for custom chenille stem keychains, built for a real small business. Customers can browse products, choose variants, and send an order to WhatsApp with the details already filled in, making the buying process fast and low-friction. The site is designed to look warm, playful, and trustworthy while helping the owner update products and prices without a redeploy.

Business Goals

  • Increase WhatsApp order conversion from product-view visitors to completed chat starts to at least 8% within 90 days of launch.
  • Reduce manual order clarification time by 50% within 60 days by pre-filling product, variant, quantity, and customer notes in the WhatsApp message.
  • Achieve at least 30% of traffic from organic search within 6 months through SEO-friendly product pages and structured metadata.
  • Keep monthly catalog update effort under 30 minutes so the owner can manage prices, photos, and stock status without developer help.
  • Reach a bounce rate below 45% on mobile product pages within 120 days by improving page speed and visual clarity.

User Goals

  • Let customers discover keychain designs quickly from their phone.
  • Help customers understand price, customization options, and how to order in under 2 minutes.
  • Send a ready-to-send WhatsApp order message without typing everything manually.
  • Make the brand feel cute, warm, and trustworthy for first-time buyers.
  • Allow customers to compare variants before deciding to buy.

Non-Goals

  • No full shopping cart or multi-item checkout flow in v0.1.
  • No online card payment or payment gateway integration in the first release.
  • No customer login, account management, or order history dashboard for shoppers.
  • No multi-seller marketplace or third-party vendor onboarding.

Rani, 19, student buyer - Rani shops from her phone and wants a cute accessory quickly without filling long forms. She cares about clear photos, price transparency, and a fast way to ask for a custom design.

Rani, 19, student buyer

  • As a student buyer, I want to browse cute keychain designs with photos and prices, so that I can decide quickly from my phone.
  • As a student buyer, I want to choose color and custom text options, so that I can get a keychain that matches my style.
  • As a student buyer, I want my order details sent to WhatsApp automatically, so that I do not have to retype everything.

Dina, 31, reseller/office buyer - Dina buys small gift items in limited quantities and often asks about bulk pricing, turnaround time, and customization rules. She needs a simple catalog she can trust and share with others.

Dina, 31, reseller/office buyer

  • As a reseller buyer, I want to see product details and minimum order notes, so that I know whether the item fits my use case.
  • As a reseller buyer, I want to message the admin with pre-filled order information, so that I can ask for a quote or custom request quickly.
  • As a reseller buyer, I want to share a product link easily, so that I can send options to my friends or team.

Admin Owner, 24, small business operator - The owner manages product photos, prices, and WhatsApp order handling alongside other work. They need low-maintenance tools and clear order summaries to respond fast and avoid mistakes.

Admin Owner, 24, small business operator

  • As the owner, I want to update products, variants, and prices without a code deploy, so that the catalog stays accurate.
  • As the owner, I want each order request to arrive in a structured WhatsApp message, so that I can respond faster and reduce errors.
  • As the owner, I want to see which products are getting clicks and orders, so that I can focus on the best-selling designs.

Public Catalog Browsing · High priority

  • Visitors can browse the product catalog without logging in and understand the available keychain options immediately.
  • Show a responsive grid/list of products with thumbnail, name, price, and short summary.
  • Open a product detail view with larger images, variants, materials, and customization notes.
  • Display sold-out, pre-order, or custom-only status clearly when relevant.
  • Support mobile-first browsing with fast loading on 3G-like connections.
  • Include SEO-friendly metadata for each product page and category page.

Order via WhatsApp · High priority

  • Visitors can submit an order request that opens WhatsApp with a pre-filled message containing the selected product details.
  • Collect product selection, quantity, color, custom text, and customer name/phone before generating the WhatsApp link.
  • Validate required fields before the user can proceed to WhatsApp.
  • Generate a wa.me or WhatsApp deep link that includes a readable order summary.
  • Open the chat in a new tab or app without losing the catalog state.
  • If WhatsApp cannot open, show a fallback copy-to-clipboard message for manual sending.

Catalog Management · High priority

  • Admin-friendly content management allows the owner to maintain the catalog without editing code for every change.
  • Store catalog items in a simple backend data source or CMS-style admin endpoint.
  • Support adding, editing, hiding, and reordering products.
  • Allow price, description, stock status, and image updates independently.
  • Preserve historical order references even if a product is later hidden.
  • Reject incomplete catalog entries and show validation errors for missing required fields.

Brand and Content Presentation · Medium priority

  • The site should communicate a warm, playful handmade brand identity that fits chenille stem products and increases trust.
  • Use a visual system that feels fluffy, colorful, and friendly rather than dark or overly technical.
  • Show brand story, care instructions, and order process in concise sections.
  • Include social proof placeholders such as testimonials or customer photos if available.
  • Provide accessible contrast, readable typography, and tap targets suitable for mobile users.

Analytics and SEO · Medium priority

  • Track user behavior and improve discoverability so the business can grow through search and organic sharing.
  • Track product view, CTA click, WhatsApp start, and successful order-intent events.
  • Generate clean URLs, meta titles, meta descriptions, Open Graph tags, and image alt text.
  • Include structured data where appropriate for products and business contact information.
  • Expose indexable landing pages for featured products and categories.
  • Respect consent and privacy requirements for analytics where applicable.

First Visit to First Message

  • User lands on the homepage from social media, search, or a shared link and sees the brand promise immediately.
  • User scrolls featured products and taps one to open its detail page within 10 seconds.
  • User reviews photos, price, and customization options, then fills the order form.
  • User clicks the order button and is redirected to WhatsApp with the message already prepared.
  • User sends the message and returns later through the same link if needed.
  • Target: first meaningful action in under 60 seconds on mobile.

1. Landing and trust building

  • The homepage introduces the brand, what is sold, and why the shop is trustworthy.
  • Show hero content, featured products, and a short explanation of how ordering works.
  • Surface delivery or customization expectations early to reduce abandoned chats.
  • Handle slow connections by loading critical text before images.

2. Browse the catalog

  • Users inspect products, compare options, and choose a design that fits their taste.
  • Let users filter or scan by price, color, theme, or custom status.
  • Display clear placeholder states if images are missing or still loading.
  • If a product is hidden or unavailable, prevent selection and explain why.

3. Review product detail

  • Users open a detail view that explains the item and its customization rules.
  • Show gallery images, price, material notes, and available variants.
  • Explain what can be customized and what cannot be changed.
  • Display stock or lead-time notes so users know whether it is ready now or made-to-order.

4. Fill order intent form

  • Users enter the minimum information needed to create a WhatsApp order message.
  • Validate name, selected product, quantity, and required customization fields.
  • Use friendly inline errors rather than blocking alerts.
  • Support optional notes such as gift message, color preference, or delivery note.

5. Open WhatsApp and confirm

  • The system generates a complete WhatsApp message and opens the chat.
  • Pre-fill the message with product name, variant, quantity, and customer note.
  • If app handoff fails, show a copy message button and the admin phone number.
  • Preserve the selected product state so the user can retry without re-entering data.

Power Features and Edge Cases

  • Deep-link directly to a product page with variant selection preloaded from shared links.
  • Show related products or matching bundles for gift sets.
  • Support low-stock warnings and pre-order labels.
  • Provide a manual fallback contact method if WhatsApp is unavailable.
  • Cache catalog content for faster revisit on weak mobile connections.

Visual and Interaction Principles

  • Use rounded shapes, soft gradients, and bright accent colors inspired by handmade chenille textures.
  • Prioritize large tap targets, short text blocks, and one primary CTA per screen.
  • Keep typography highly legible with strong contrast and simple hierarchy.
  • Optimize image loading with responsive sizes and lazy loading.
  • Design for accessibility with keyboard support, alt text, and clear error states.

Rani is scrolling on her phone after class when she sees a cute keychain shared by a friend. She opens the site, quickly finds the design she likes, checks the price and color options, and fills in her name and request without needing to type a long message.

When she taps order, WhatsApp opens with the full request already written out. Instead of abandoning the purchase because the process feels tedious, she sends the message in seconds and feels confident that the shop understood exactly what she wanted.

For the business owner, every chat now starts with cleaner order details, fewer back-and-forth questions, and better conversion from browsing to real sales. The web catalog becomes a lightweight sales engine that supports growth without adding operational complexity.

User-Centric Metrics

  • At least 70% of mobile users reach a product detail page after landing on the homepage.
  • At least 60% of order starters complete the WhatsApp handoff successfully.
  • Average time from landing to WhatsApp open stays below 60 seconds on mobile.
  • At least 85% of users rate the order flow as easy in post-purchase feedback.
  • Product page load time remains under 2.5 seconds on typical mobile networks.

Business Metrics

  • Reach at least 8% visitor-to-WhatsApp-start conversion within 90 days.
  • Increase monthly qualified order chats by 25% within 6 months.
  • Reduce order clarification messages by 50% within 60 days.
  • Grow organic search traffic to 30% of total visits within 6 months.

Technical Metrics

  • Maintain 99.5% uptime for the public site.
  • Keep 95th percentile page response time below 300 ms for cached API responses.
  • Keep core web vitals in the good range on mobile for the homepage and product pages.
  • Ensure no PII leakage in analytics or logs and use HTTPS everywhere.

Tracking Plan

  • Track page_view on homepage, category pages, and product detail pages.
  • Track product_click when a user opens a product from the catalog grid or list.
  • Track order_form_start when the user begins the WhatsApp order form.
  • Track order_form_submit when the user submits valid order intent details.
  • Track whatsapp_link_generated when the system creates the pre-filled WhatsApp URL.
  • Track whatsapp_open_click when the user taps the final send/order button.
  • Track copy_fallback_used when WhatsApp deep linking fails and the manual fallback is shown.

Technical Needs

  • Frontend using Next.js or React with server-side rendering for SEO-friendly product pages.
  • Backend API using Node.js and Express for catalog and order endpoints.
  • Lightweight data layer using PostgreSQL or JSON-based content storage for catalog records.
  • Image hosting and optimization through a CDN such as Cloudinary or a similar service.
  • Environment-based configuration for admin WhatsApp number, site URL, and analytics keys.
  • Form validation using a shared schema layer such as Zod or Yup.
  • Deployment on Vercel, Netlify, or similar with HTTPS and preview environments.

Integration Points

  • WhatsApp click-to-chat deep links using wa.me or api.whatsapp.com.
  • Google Analytics 4 or Plausible for traffic and funnel measurement.
  • Cloudinary or an equivalent media service for product images.
  • Optional email or notification service such as Resend for admin alerts and backups.
  • Google Search Console for SEO monitoring and indexing feedback.

Data Storage & Privacy

  • Store only necessary customer details for order intent, such as name and phone number, and avoid collecting sensitive data.
  • Display a simple privacy notice describing what data is sent to WhatsApp and what is stored on the site.
  • If analytics are enabled, anonymize or minimize personal data where required by local privacy law.
  • Use HTTPS, secure environment variables, and role-based access for any admin-only endpoints.
  • Define a data retention policy for order logs and delete stale personal data after an agreed period.

Scalability & Performance

  • Serve static catalog pages or cached API responses to keep browsing fast on mobile.
  • Compress and resize images automatically to reduce bandwidth usage.
  • Use pagination or lazy loading if the catalog grows beyond a small set of featured products.
  • Keep the WhatsApp order generation logic stateless so it scales with traffic spikes.

Potential Challenges

  • Product data may become inconsistent if updates are manual; mitigate with a single source of truth and validation rules.
  • WhatsApp deep links may fail on some devices; mitigate with a copy-to-clipboard fallback and clear instructions.
  • SEO may be weak if pages are too image-heavy; mitigate with SSR, metadata, and descriptive text content.
  • Slow mobile networks may hurt conversion; mitigate with image optimization, caching, and skeleton loading.
  • The owner may forget to update stock or prices; mitigate with simple content editing flows and visible last-updated timestamps.

Team & resourcing - Small team - 1 product owner, 2 full-stack engineers, 1 part-time designer, 1 part-time QA/ops support

Phase 1: MVP Catalog and WhatsApp Order Flow · Weeks 1-3

  • Homepage, product listing, and product detail screens
  • Order form that generates a WhatsApp deep link
  • Basic backend API for catalog and order payload creation
  • Mobile-first responsive layout and essential analytics events

Phase 2: Catalog Operations and SEO · Weeks 4-5

  • Simple admin content update flow for products and prices
  • SEO metadata, Open Graph tags, sitemap, and robots configuration
  • Image optimization pipeline and performance improvements
  • Basic business tracking dashboard with funnel events

Phase 3: Brand Polish and Trust Features · Weeks 6-7

  • Warm brand visual system aligned to handmade products
  • Testimonials, FAQ, care instructions, and contact sections
  • Accessibility improvements and stronger error/fallback handling
  • Refined copy for conversion and clearer purchase guidance

Phase 4: Growth and Iteration · Weeks 8-10

  • A/B testable hero and CTA variants
  • Featured product collections or bundles
  • Enhanced reporting for top products and drop-off points
  • Ready-to-scale architecture for additional categories or seasonal drops

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

Build a mobile-first e-commerce catalog website for a small business selling custom chenille stem keychains. The site must let customers browse products, view detail pages, choose variants/customization options, fill a simple order intent form, and open WhatsApp with a pre-filled order message.

Core requirements:
- Public homepage with brand story, featured products, and clear CTA to browse catalog
- Catalog page with product cards showing image, name, price, and availability
- Product detail page with gallery, description, customization options, price, and order form
- WhatsApp order flow: collect name, phone, quantity, product variant, and optional note; generate a wa.me deep link or api.whatsapp.com link with a fully formatted message; provide fallback copy-to-clipboard if deep linking fails
- Simple backend API endpoints for catalog data and order message generation
- Admin-friendly catalog data management with add/edit/hide/reorder products without redeploying the whole app if possible
- SEO-friendly pages with metadata, Open Graph tags, alt text, sitemap, and fast load times
- Analytics events for product view, order start, order submit, and WhatsApp click

Suggested stack:
- Next.js or React with SSR for frontend
- Node.js + Express API
- PostgreSQL or JSON-based content store for product data
- Tailwind CSS for styling
- Cloudinary for images
- Deployment on Vercel or Netlify

Data model:
- Product: id, slug, name, description, price, images, variants, customizationRules, status, featured, sortOrder, createdAt, updatedAt
- OrderIntent: id, productId, name, phone, quantity, selectedVariant, note, waMessage, createdAt, source
- Optional CMS/admin settings: siteName, adminWhatsAppNumber, heroText, SEO fields

Primary screens:
- Home
- Catalog listing
- Product detail
- Order form modal or section
- Admin product editor if included in scope
- Privacy/FAQ/contact sections

Build it with a warm, playful visual identity inspired by fluffy handmade products: rounded corners, bright but soft colors, large tap targets, excellent mobile readability, and accessible contrast. Make the UX extremely simple for first-time buyers and ensure the order flow works reliably on phones.

Business Idea

a//mnt/data/.hermes/plans/2026-10-24_173230-prd-web-penjualan-keychain.md → b//mnt/data/.hermes/plans/2026-10-24_173230-prd-web-penjualan-keychain.md @@ -0,0 +1,357 @@ +# Plan: Pembuatan PRD — Web Penjualan Keychain Kawat Bulu ("KWB Web") + +## Goal + +Menulis dokumen PRD (`/home/waweru/Documents/web-penjualan-keychain/PRD.md`, Bahasa Indonesia, v0.1) yang mendefinisikan kebutuhan lengkap **web penjualan keychain kawat bulu yang dibangun baru dari nol** (katalog produk + order via WhatsApp, untuk bisnis sungguhan), sehingga implementasi berikutnya bisa dieksekusi tanpa menebak. + +## Current context / assumptions + +- **Produk**: keychain kawat bulu (chenille stem) — produk sama dengan proyek lama `keychain-kawat-bulu`, TAPI web-nya **baru, dari nol** (keputusan user: "bikin dari nol (repo baru)"). +- **Fitur penjualan**: katalog produk + order via WhatsApp (pola seperti `keychain-kawat-bulu` sekarang: frontend fetch `/api/catalog` → form order POST `/api/order` → backend balas `waLink` → `window.open()` ke WhatsApp). +- **Tujuan**: bisnis/side-hustle **sungguhan** (bukan tugas sekolah) → PRD wajib memuat aspek brand, harga, SEO, dan alur order yang realistis. +- **Proyek referensi (bukan basis kode)**: `/home/waweru/Documents/keychain-kawat-bulu/` — README-nya sudah terdokumentasi: `backend/routes/catalog.js` (GET `/api/catalog`), `backend/routes/order.js` (POST `/api/order` → `waLink`), `OrderWidget.jsx` (fetch catalog → form → window.open waLink), `WA_ADMIN_NUMBER` di `.env`. Dipakai sebagai sumber pola alur order, BUKAN untuk copy-paste kode. +- **Proyek lain**: `portofolio-fullstack` (galeri foto, Express + vanilla) — tidak dipakai. +- **User**: Rachmad Wahyu Pratama — PKL student, sedang belajar fullstack (React + Express sudah pernah dipakai di keychain-kawat-bulu). Preferensi bahasa: Indonesia. +- **Desain**: skill `frontend-design` dimuat — PRD memuat **prinsip desain berbasis subjek** (material kawat bulu = lembut, fluffy, warna-warni → identitas hangat/playful, BUKAN dark-tech default), bukan token visual final (itu di fase implementasi). +- **Lokasi deliverable**: folder proyek baru `/home/waweru/Documents/web-penjualan-keychain/` (nama folder bisa diganti user — dicatat di §14; PRD diletakkan di folder proyek, bukan di `/home/waweru/PRD.md` yang sudah dipesan untuk AutoAbsen). +- PRD ditulis untuk stakeholder teknis + non-teknis; tiap FR punya acceptance criteria yang bisa diuji. + +## Architecture / proposed approach + +PRD = satu file markdown `/home/waweru/Documents/web-penjualan-keychain/PRD.md` berstruktur PRD standar (ringkasan → masalah → tujuan → stakeholder → user stories → FR/NFR dengan AC → workflow → aturan bisnis → arsitektur file → skenario uji → risiko → asumsi/pertanyaan terbuka). Nilai teknis yang sudah diketahui (pola endpoint `/api/catalog` & `/api/order`, `wa.me` link, `WA_ADMIN_NUMBER`) dirujuk konsisten dari pola proyek referensi; keputusan yang belum diketahui (nama brand, daftar harga, stack final, penyimpanan data, pembayaran) ditandai `TODO-OPEN` dan TIDAK ditebak. Penulisan = isi template di Task 1; validasi = script cek struktur + cek konsistensi + review manusia. + +## Step-by-step tasks + +### Task 1 — Scaffold folder + tulis `/home/waweru/Documents/web-penjualan-keychain/PRD.md` + +```bash +mkdir -p /home/waweru/Documents/web-penjualan-keychain +cd /home/waweru/Documents/web-penjualan-keychain +git init +``` + +Expected output: `Initialized empty Git repository in /home/waweru/Documents/web-penjualan-keychain/.git/` + +Lalu tulis file `PRD.md` dengan konten LENGKAP di bawah ini (bagian `TODO-OPEN` DIISI sesuai keputusan user pada Task 4, bukan tebakan implementer; sebelum review, biarkan teks `TODO-OPEN` apa adanya supaya gate Task 2 tetap bisa mendeteksi heading/FR): + +```markdown +# PRD — Web Penjualan Keychain Kawat Bulu ("KWB Web") + +| Field | Isi | +|---|---| +| Versi | 0.1 (draft) | +| Tanggal | 2026-10-24 | +| Penulis | Rachmad Wahyu Pratama | +| Produk | Keychain kawat bulu (chenille stem) custom | +| Model penjualan | Katalog + order via WhatsApp | +| Status | Draft — menunggu keputusan §14 | + +## 1. Ringkasan Eksekutif +Web penjualan keychain kawat bulu yang dibangun baru dari nol: pembeli melihat +katalog produk (foto, varian, harga), memilih bentuk/warna/teks custom, mengisi +form order, lalu pesanan terkirim otomatis sebagai chat WhatsApp ke admin +dengan detail lengkap. Web dibangun mobile-first (mayoritas pembeli dari HP), +cepat, dan tampil profesional agar pembeli percaya pada brand. + +## 2. Latar Belakang & Masalah +- Produk keychain kawat bulu sudah pernah dijual via web lama + (`keychain-kawat-bulu`), namun web tersebut butuh dibangun ulang dari nol + (keputusan user) dengan alur dan identitas yang lebih baik. +- Bisnis ini side-hustle sungguhan: web harus bisa menarik pembeli baru (SEO), + menampilkan produk dengan menarik, dan memproses order tanpa proses manual + yang berat bagi admin. +- Pembeli umumnya membuka dari HP: web lama tidak cukup dioptimalkan untuk itu. + +## 3. Tujuan & Non-Tujuan +**Tujuan:** +- Menampilkan katalog produk keychain kawat bulu dengan foto, varian, dan harga. +- Memungkinkan pembeli memesan via WhatsApp dengan detail otomatis terisi + (tanpa mengetik manual). +- Web cepat & nyaman di HP (mobile-first) dan mudah ditemukan via pencarian. +- Admin dapat memperbarui katalog (produk/harga/varian) tanpa deploy ulang. +**Non-Tujuan (v0.1):** +- Tidak ada keranjang belanja & checkout berbayar (payment gateway) — order + via WhatsApp, pembayaran dikonfirmasi manual. (TODO-OPEN §14: konfirmasi) +- Tidak ada akun/login pembeli. +- Tidak ada dashboard admin ber-login pada rilis pertama (YAGNI) — katalog + dikelola via file data/API sederhana. (TODO-OPEN §14) +- Bukan marketplace multi-penjual. … omitted 279 diff line(s) across 1 additional file(s)/section(s)

Make My PRD

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