AbelBirdNest-Stock/docs/project-spec/walet-figma-design-brief.md

Figma-Ready Design Brief

AbelBirdnest Stock

1. Tujuan Brief

Dokumen ini dibuat agar tim UI/UX atau desainer Figma bisa langsung mulai mendesain tanpa harus membaca seluruh dokumen teknis dari nol.

Target desain:

• desain aplikasi web responsive
• prioritas pada operasional gudang, purchasing, sales, dan traceability
• desain harus cepat dipakai, bukan sekadar cantik
• mobile usability penting untuk flow scan, receiving, transfer, dan picking

2. Konteks Produk

AbelBirdnest Stock adalah sistem inventory sarang burung walet berbasis lot/batch dengan kemampuan:

• pembelian multi jenis dan multi grade
• penerimaan barang dan pembentukan lot
• sortasi / regrade
• penjualan parsial dari banyak lot
• costing berbasis allocation nyata
• traceability supplier ke customer
• barcode / QR lookup dan scan workflow

3. User Utama

Owner

Tujuan:

• melihat dashboard
• melihat laporan, margin, shrinkage, traceability

Admin Purchasing

Tujuan:

• membuat pembelian
• mengelola supplier
• melihat histori harga

Admin Gudang

Tujuan:

• menerima barang
• mengelola lot
• transfer, hold, release, adjustment
• scan QR/barcode

Tim QC / Sortasi

Tujuan:

• sortasi lot
• regrade
• catat shrinkage dan reject

Admin Sales

Tujuan:

• buat sales order
• allocate lot
• picking
• cek trace sumber barang

4. Platform dan Breakpoints

Primary

• Desktop web untuk office/admin tasks
• Mobile web untuk gudang/scan tasks

Breakpoints saran

• Mobile: 360-480px
• Tablet: 768px
• Desktop: 1280px+

5. Design Principles

• information dense but clear
• focus on traceability and status visibility
• minimize typing for operational workflows
• prioritize fast actions and readable tables
• destructive or high-risk actions must be explicit
• quantity, cost, status, and lot identity must always stand out

6. Visual Direction

Tone

• modern business app
• clean, efficient, trustworthy
• operational, not decorative

Suggested look

• neutral base colors
• strong status color coding
• lots of cards, tables, badges, and side panels
• subtle but clear hierarchy

Suggested color logic

• Active: green
• Hold: yellow/orange
• Closed: gray
• Rejected: red
• Draft: blue-gray
• Alert/shrinkage variance: red/orange

7. Typography Guidance

• clear sans-serif
• body 14-16px desktop
• compact but readable table text 12-14px
• headings should clearly separate sections

8. Core UX Priorities

A. Lot identity must be obvious

Every lot-related screen should surface:

• lot code
• item type
• grade
• available qty
• supplier
• status
• warehouse/location

B. Allocation must feel safe

Sales allocation UI must clearly show:

• required qty
• selected qty
• remaining qty
• cost impact
• recommended FIFO lots

C. Scan flow must be fast

For mobile scan pages:

• camera first
• manual input fallback
• instant lookup result
• quick actions after scan

D. Movement history must be readable

Movement timeline should be understandable even by non-technical user.

9. Design Output Expected from UI/UX Team

Minimal deliverables:

• sitemap / screen map
• low-fi wireframe cleanup
• hi-fi UI for key screens
• mobile variant for scan flows
• clickable prototype for core flows
• handoff specs for frontend team

10. Screen Priority for Hi-Fi Design

Prioritas desain visual:

1. Login
2. Dashboard
3. Purchase Form
4. Receipt Form
5. Stock Lot List
6. Lot Detail
7. Sales Form
8. Allocation Screen
9. Picking Screen
10. Barcode Lookup
11. Sorting Session Form
12. Reports

11. Key Flows to Prototype

Flow 1. Purchase to Receipt

• create purchase
• receive goods
• generate lot
• view lot detail

Flow 2. Lot to Sorting

• select lot
• create sorting session
• create child lots
• review results

Flow 3. Sales Allocation

• create sales order
• choose item/grade
• allocate from multiple lots
• confirm costing
• proceed to picking

Flow 4. Scan Lookup

• open scan page
• scan QR
• display lot data
• navigate to lot detail or action page

12. Components that Need Design Attention

• data table
• filter bar
• summary cards
• status badges
• qty editor
• cost summary panel
• movement timeline
• QR scanner panel
• traceability source panel
• sticky action footer

13. Special UX Notes

A. Numbers

Design must support large financial values and decimal quantities.

B. Tables

Many screens are data-heavy. Table readability is critical.

C. Status

Status should never rely on color only. Add badges/text.

D. Bank fields

Supplier and customer screens must include:

• bank name
• bank account number

E. Audit-sensitive actions

Actions like hold, release, regrade, adjustment, finalize should feel deliberate.

14. Suggested Figma File Structure

AbelBirdnest Stock Design
  00 Cover
  01 Foundations
    - Colors
    - Typography
    - Spacing
    - Icons
  02 Components
    - Buttons
    - Inputs
    - Tables
    - Cards
    - Badges
    - Modals
    - Scanner
  03 Desktop Screens
  04 Mobile Screens
  05 Prototypes
  06 Dev Handoff

15. Suggested Foundations

Components to define early

• Button primary/secondary/destructive
• Text field
• Number field
• Select field
• Date picker
• Badge status
• Table row states
• Card summary
• Drawer/modal
• Timeline item

16. Success Criteria for Design

Design dianggap berhasil jika:

• user bisa paham status lot dalam beberapa detik
• sales allocation tidak membingungkan
• scan flow cepat dipakai di HP
• traceability tidak terasa kompleks walau datanya kaya
• tabel tetap nyaman dibaca walau padat

17. Penutup

Brief ini harus dipakai bersama dokumen wireframe, component tree, dan frontend structure. Fokus utama desain bukan sekadar estetika, tapi membuat proses inventory walet yang kompleks terasa jelas, aman, dan cepat dipakai.