wirabasalamah/AbelBirdNest-Stock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3dad273a4c638713560726dfbcba3e2ad96cdceb
AbelBirdNest-Stock/docs/project-spec/walet-user-flow-visual-for-figma.md

6.9 KiB
Raw Blame History

User Flow Visual untuk Figma

Sistem Inventory Sarang Burung Walet

Dokumen ini dibuat agar desainer bisa langsung menggambar user flow visual di Figma atau FigJam.

1. Node Legend yang Disarankan

Gunakan standar shape berikut di Figma/FigJam:

  • Rectangle = screen/page
  • Rounded rectangle = modal/drawer/panel aksi
  • Diamond = decision point
  • Parallelogram = input/scanning/manual entry
  • Small tag/badge = status atau note penting
  • Arrow = alur utama
  • Dashed arrow = alur alternatif / exception flow

Warna saran:

  • Biru = flow utama
  • Hijau = success path
  • Oranye = warning/manual override
  • Merah = error/blocked state
  • Ungu = traceability / lookup path

2. Sitemap Ringkas

Susun dari kiri ke kanan:

Login
  -> Dashboard
    -> Master Data
      -> Suppliers
      -> Customers
      -> Item Types
      -> Item Grades
      -> Warehouses
    -> Purchases
    -> Receipts
    -> Lots
    -> Sorting
    -> Sales
    -> Adjustments
    -> Returns
    -> Barcode Lookup
    -> Reports

3. Flow 1. Purchase to Receipt to Lot

Tujuan

Menggambarkan alur dari pembelian sampai lot terbentuk.

Node urutan

Dashboard
  -> Purchase List
  -> Purchase Form
  -> [Decision: Save Draft or Submit?]
      -> Save Draft -> Purchase Detail
      -> Submit -> Purchase Detail
  -> Create Receipt
  -> Receipt Form
  -> [Decision: Finalize Receipt?]
      -> No -> Draft Receipt Detail
      -> Yes -> Generate Lots
  -> Receipt Detail
  -> Lot Detail

Notes untuk designer

  • tampilkan supplier info termasuk bank info di purchase/receipt
  • receipt punya branch untuk accepted/rejected qty
  • setelah finalize, harus ada cabang ke lot result

4. Flow 2. Lot to Sorting / Regrade

Tujuan

Menggambarkan alur perubahan lot setelah QC/sortasi.

Node urutan

Dashboard
  -> Lot List
  -> Lot Detail
  -> [Decision: Need Sorting or Regrade?]
      -> Sorting
        -> Sorting Session Form
        -> [Decision: Output valid?]
            -> No -> Error / revise rows
            -> Yes -> Child Lots Created
        -> Sorting Result Detail
        -> Child Lot Detail
      -> Regrade
        -> Regrade Form
        -> [Decision: Qty valid?]
            -> No -> Error
            -> Yes -> New Grade Lot / Updated Lot
        -> Lot Detail

Notes

  • decision node harus jelas memisahkan sorting dan regrade
  • gunakan warna oranye untuk warning jika qty tidak balance
  • gunakan node kecil untuk menandai shrinkage/reject

5. Flow 3. Sales Order to Allocation to Picking

Tujuan

Ini flow paling penting untuk desain, karena inti kompleksitas sistem ada di sini.

Node urutan

Dashboard
  -> Sales List
  -> Sales Form
  -> Sales Detail
  -> Allocation Screen
  -> [Decision: Auto allocate or Manual allocate?]
      -> Auto Allocate FIFO
      -> Manual Select Lots
  -> [Decision: Allocation complete?]
      -> No -> Back to Allocation Screen
      -> Yes -> Save Allocation
  -> Picking Screen
  -> [Decision: Picked qty matches allocation?]
      -> Yes -> Confirm Picking
      -> No -> Variance Flow
  -> Sales Detail Final

Variance subflow

Picking Screen
  -> Variance Warning
  -> [Decision: allow override?]
      -> No -> Back to Picking
      -> Yes -> Save Variance + Audit
  -> Sales Detail Final

Notes

  • allocation page perlu ditandai sebagai "critical workflow"
  • tampilkan alur campuran lot dari beberapa supplier
  • gunakan dashed flow untuk manual override

6. Flow 4. Barcode / QR Lookup

Tujuan

Flow cepat untuk user gudang.

Node urutan

Dashboard
  -> Barcode Scan Page
  -> [Decision: Scan success?]
      -> No -> Manual Input
      -> Yes -> Lookup Result
  -> [Decision: What next?]
      -> Open Lot Detail
      -> Transfer Lot
      -> Hold/Release Lot
      -> Picking Context

Notes

  • flow ini sebaiknya punya versi mobile frame
  • scan success dan scan fail harus digambar

7. Flow 5. Stock Adjustment / Shrinkage

Tujuan

Menggambarkan flow perubahan stok di luar transaksi normal.

Node urutan

Dashboard
  -> Lot Detail / Adjustment Menu
  -> Adjustment Form
  -> [Decision: Above approval threshold?]
      -> No -> Post Adjustment
      -> Yes -> Pending Approval
          -> Approver Review
          -> [Decision: Approve?]
              -> Reject -> Back to Draft/Cancelled
              -> Approve -> Post Adjustment
  -> Updated Lot Detail
  -> Movement Ledger Updated

Notes

  • cocok digambar dengan lane approval terpisah
  • gunakan merah untuk shrinkage/loss branch

8. Flow 6. Sales Return

Node urutan

Sales Detail
  -> Create Sales Return
  -> Sales Return Form
  -> [Decision: Return linked to source lot?]
      -> Yes -> Return to existing lot / controlled flow
      -> No -> Create return lot
  -> [Decision: Condition good?]
      -> Yes -> Restock
      -> No -> Regrade / Reject
  -> Return Detail

9. Flow 7. Purchase Return

Node urutan

Purchase Detail / Lot Detail
  -> Create Purchase Return
  -> Purchase Return Form
  -> Confirm Return
  -> Lot Reduced
  -> Movement Ledger Updated

10. Flow 8. Traceability Lookup

Tujuan

Membantu designer memahami bagaimana user menelusuri asal barang.

Backward trace

Sales Detail
  -> Sales Line
  -> Allocation Rows
  -> Lot Detail
  -> Receipt Detail
  -> Purchase Detail
  -> Supplier Detail

Forward trace

Supplier Detail
  -> Purchase List
  -> Purchase Detail
  -> Lots Created
  -> Sales Allocations
  -> Sales Detail
  -> Customer Detail

Notes

  • trace flow bisa diberi warna ungu
  • cocok dibuat sebagai separate flow map

11. Rekomendasi Layout Frame di Figma/FigJam

Board 1. Sitemap

  • high-level only

Board 2. Core Transaction Flows

  • purchase -> receipt -> lot
  • lot -> sorting/regrade
  • sales -> allocation -> picking

Board 3. Supporting Flows

  • scan lookup
  • adjustment
  • return
  • traceability

Board 4. Role Overlay

Tambahkan badge kecil pada node untuk role:

  • OWN
  • PUR
  • WH
  • QC
  • SAL

12. Rekomendasi Label per Screen

Gunakan format:

  • Screen: Purchase Form
  • Decision: Allocation complete?
  • Modal: Hold Lot Confirmation
  • Exception: Pick qty variance

Ini bikin flow mudah dibaca saat handoff.

13. Rekomendasi untuk Prototype Link

Untuk prototype yang perlu diklik duluan:

  1. Dashboard
  2. Purchase Form
  3. Receipt Form
  4. Lot Detail
  5. Sales Form
  6. Allocation Screen
  7. Picking Screen
  8. Barcode Scan

14. Deliverable yang Disarankan dari Designer

Setelah menggambar flow ini, output minimal:

  • 1 figjam board user flow
  • 1 screen map desktop
  • 1 screen map mobile operasional
  • clickable prototype untuk sales allocation flow

15. Penutup

Flow yang paling penting untuk digambar dulu adalah:

  • purchase -> receipt -> lot
  • lot -> sorting/regrade
  • sales -> allocation -> picking
  • scan -> lookup -> action

Kalau empat flow ini sudah jelas di Figma/FigJam, desainer akan jauh lebih cepat masuk ke desain screen detail.