wirabasalamah/Qris-Soundbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d7c6e6eadf2359cca6e0b5994d65589b24d65db9
Qris-Soundbox/10-design-blueprint.md
wirabasalamah a152c99cce Initial commit
2026-05-25 08:22:12 +07:00

2.6 KiB
Raw Blame History

Design Blueprint - QRIS Soundbox Platform v1

1. Objective

Desain harus mendukung 4 persona utama:

  • Admin Ops
  • Finance Ops
  • Merchant
  • Field / Device Operations

Fokus desain:

  • data heavy tapi cepat dipahami
  • workflow operasional jelas
  • merchant portal sederhana dan terpercaya
  • device monitoring tidak membingungkan

2. Visual Direction

Style keyword

  • operational SaaS
  • trustworthy fintech
  • modern enterprise
  • data-centric
  • clean and fast

Warna yang disarankan

  • Primary: #2563EB
  • Primary dark: #1D4ED8
  • Success: #16A34A
  • Warning: #F59E0B
  • Danger: #DC2626
  • Info: #0EA5E9
  • Slate 900: #0F172A
  • Slate 700: #334155
  • Slate 500: #64748B
  • Slate 200: #E2E8F0
  • Slate 100: #F1F5F9
  • Background: #F8FAFC

Typography

  • Inter / Plus Jakarta Sans / Geist
  • heading semibold
  • body regular
  • gunakan tabular numbers untuk nominal dan metric

3. Layout Rules

  • sidebar tetap di area admin dan merchant portal desktop
  • topbar tinggi 72px
  • page padding 24px
  • 12-column desktop grid
  • card padding 20-24px
  • table row 52-56px

4. Komponen Utama

  • KPI card
  • metric card with trend
  • data table with sticky header
  • filter bar
  • detail drawer
  • status chips
  • timeline vertical
  • alert rail
  • audit block / raw payload viewer
  • command modal
  • config panel

5. UX Rules

  • tabel utama harus punya filter dan export
  • detail transaksi dan device idealnya punya tab + side summary
  • gunakan drawer untuk quick inspection, full page untuk deep work
  • nominal, status, dan device health harus mudah dipindai
  • raw payload harus bisa copy
  • empty state harus selalu ada CTA

6. Page Groups

Admin

  • Dashboard
  • Merchant Management
  • Onboarding Review
  • Device/TMS
  • Transactions
  • Ledger & Settlement
  • Reconciliation
  • Integration Settings
  • Audit & Access Control

Merchant Portal

  • Dashboard
  • Transactions
  • Settlements
  • Devices
  • Outlets
  • Profile & Bank Account
  • Support

Device UI

  • Static notification screens
  • Dynamic QR flow screens
  • Error and offline states

7. Figma Pages Recommendation

  1. Cover
  2. Foundations
  3. Components
  4. Admin Dashboard
  5. Merchant Portal
  6. Device UI
  7. Flows
  8. Archive

8. Komponen Status Chips yang Wajib

  • active
  • inactive
  • pending
  • approved
  • rejected
  • online
  • offline
  • degraded
  • paid
  • expired
  • failed
  • retrying
  • settled
  • payout_failed

9. Prioritas Desain Pertama

  1. Admin Dashboard
  2. Merchant Detail
  3. Device Registry + Device Detail
  4. Transaction List + Detail
  5. Settlement Batch + Detail
  6. Merchant Dashboard
  7. Merchant Transaction History
  8. Dynamic Device UI states