254 lines
5.7 KiB
Markdown
254 lines
5.7 KiB
Markdown
# 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
|
|
```text
|
|
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.
|