📘 PRODUCT REQUIREMENTS DOCUMENT (PRD)

Nexus Umroh Platform adalah sistem desain dan produk digital terintegrasi untuk layanan Simpanan, Pembiayaan, Travel, dan Admin Umroh yang dibangun di atas struktur Figma yang scalable, reusable, dan developer-ready. Produk ini membantu tim desain dan engineering bergerak lebih cepat dengan komponen yang konsisten, handoff yang jelas, serta pengalaman pengguna yang seragam dari mobile hingga admin dashboard.

Nexus Umroh Platform adalah sistem desain dan produk digital terintegrasi untuk layanan Simpanan, Pembiayaan, Travel, dan Admin Umroh yang dibangun di atas struktur Figma yang scalable, reusable, dan developer-ready. Produk ini membantu tim desain dan engineering bergerak lebih cepat dengan komponen yang konsisten, handoff yang jelas, serta pengalaman pengguna yang seragam dari mobile hingga admin dashboard.

Business Goals

  • Meningkatkan reuse komponen desain menjadi >80% untuk menekan waktu produksi UI dan biaya redesign lintas fitur.
  • Mempercepat design-to-development handoff hingga 30-40% dengan struktur Figma, naming convention, dan component library yang standar.
  • Menurunkan jumlah revisi akibat ambiguity pada handoff menjadi <10% per release melalui dokumentasi interaction notes dan design QA checklist.
  • Mendukung ekspansi ke multi-koperasi tanpa redesign besar, sehingga platform dapat dipakai untuk lebih banyak unit bisnis dengan biaya marginal yang lebih rendah.
  • Memposisikan Nexus sebagai platform inovatif di ekosistem Umroh dan koperasi digital dengan UX yang konsisten dan production-ready.

User Goals

  • Membantu anggota memahami status simpanan, pembiayaan, dan progres umroh mereka dengan cepat dan jelas.
  • Memudahkan pengguna melakukan aksi utama seperti setor, ajukan pembiayaan, booking paket, dan tracking perjalanan dari satu alur yang sederhana.
  • Memberikan rasa percaya melalui tampilan finansial yang rapi, transparan, dan mudah dipahami.
  • Membantu admin mengelola approval, reporting, dan member management secara efisien tanpa berpindah tools.
  • Menyediakan pengalaman yang konsisten di mobile dan dashboard admin sehingga pengguna tidak perlu belajar ulang antar fitur.

Non-Goals

  • Bukan platform booking travel umum untuk semua destinasi di luar Umroh.
  • Bukan sistem akuntansi penuh atau ERP koperasi yang mencakup semua proses back-office.
  • Bukan marketplace open-ended untuk vendor pihak ketiga tanpa kurasi.
  • Bukan redesign visual yang mengutamakan animasi kompleks di atas kejelasan alur dan konsistensi desain.

Calon Jamaah Aktif - Alya, 29, rajin mengecek progres tabungan lewat mobile, sensitif terhadap kejelasan status dan ingin proses yang cepat.

Calon Jamaah Aktif

  • As a Calon Jamaah Aktif, I want to see my savings progress on the dashboard, so that I can know how close I am to my Umroh target.
  • As a Calon Jamaah Aktif, I want to submit a savings deposit from my phone, so that I can complete transactions without visiting an office.
  • As a Calon Jamaah Aktif, I want to book a package after comparing filters and cards, so that I can choose a plan that fits my budget and schedule.

Admin Operasional Koperasi - Budi, 38, memantau pengajuan, approval, dan laporan harian melalui dashboard web, bekerja cepat dengan kebutuhan akurasi tinggi.

Admin Operasional Koperasi

  • As an Admin Operasional Koperasi, I want to review pending applications in a queue, so that I can approve or reject requests efficiently.
  • As an Admin Operasional Koperasi, I want to view cashflow and member activity on an overview screen, so that I can detect issues early.
  • As an Admin Operasional Koperasi, I want to manage member profiles and transaction status, so that I can support users without manual spreadsheet tracking.

Supervisor Keuangan - Nina, 42, fokus pada data pembiayaan, approval, dan reporting, membutuhkan data yang konsisten untuk pengambilan keputusan.

Supervisor Keuangan

  • As a Supervisor Keuangan, I want to compare savings versus financing trends, so that I can evaluate liquidity and demand patterns.
  • As a Supervisor Keuangan, I want to see status badges for pending, approved, and rejected requests, so that I can prioritize follow-up actions.
  • As a Supervisor Keuangan, I want exported reporting-ready views, so that I can share accurate summaries with leadership.

Design System & Tokens · High priority

  • Menyediakan foundation desain yang konsisten untuk semua fitur mobile dan admin, agar UI dapat diskalakan dan diimplementasikan ulang dengan cepat.
  • Mendefinisikan color tokens seperti color.primary.navy, color.accent.gold, color.text.primary, dan color.bg.surface.
  • Menetapkan typography scale, spacing tokens, radius, grid, dan elevation sebagai sumber kebenaran tunggal.
  • Mendukung naming convention wajib dalam format [Type]/[Category]/[Variant]/[State].
  • Semua komponen harus menggunakan Auto Layout dengan padding 16px dan spacing 8/12/16px.
  • Setiap token harus terdokumentasi dalam style guide untuk handoff developer.

Master Component Library · High priority

  • Membangun library komponen inti yang reusable untuk menghindari duplicate component dan memastikan konsistensi antar layar.
  • Menyediakan button variants: Primary, Secondary, Disabled dengan states Default, Hover, Pressed, Loading.
  • Menyediakan input field variants: Default, Focus, Error, Disabled dengan label, placeholder, helper text, dan error message.
  • Menyediakan cards inti: Financial Card, Progress Card, Package Card, Transaction Card.
  • Menyediakan navigasi: bottom navigation mobile, top bar, dan sidebar admin.
  • Menyediakan feedback components: toast notification, modal, dan alert states.

Mobile Experience · High priority

  • Mendesain seluruh alur utama mobile untuk anggota agar dapat mengelola simpanan, pembiayaan, paket, booking, tracking, dan profil dalam satu pengalaman yang ringkas.
  • Menyediakan folder layar terstruktur: Auth, Dashboard, Simpanan, Pembiayaan, Paket Umroh, Booking, Tracking, Profile.
  • Dashboard mobile memakai frame 375px dengan header, highlight card progress umroh, quick actions, info cards, dan bottom navigation.
  • Simpanan Umroh menampilkan summary card, progress, graph, transaction list, dan sticky CTA bottom.
  • Pembiayaan menampilkan simulation card, eligibility indicator, dan CTA ajukan.
  • Paket Umroh menampilkan filter tabs dan card list scrollable untuk browsing paket.

Admin Dashboard · Medium priority

  • Mendukung operasional internal melalui dashboard admin yang fokus pada overview, approval, dan reporting.
  • Overview harus menampilkan total anggota, total dana, dan active jamaah sebagai widget utama.
  • Approval system harus memuat daftar pengajuan dengan status Pending, Approved, dan Rejected.
  • Reporting harus mendukung grafik cashflow serta perbandingan simpanan vs pembiayaan.
  • Member management harus memungkinkan pencarian, pemantauan status, dan pembaruan data anggota.
  • Sidebar admin harus konsisten dengan struktur navigasi dan role-based access bila diperlukan.

Prototype Flow & QA · Medium priority

  • Menghubungkan layar-layar utama menjadi prototype yang dapat diuji dan siap dihandoff ke development.
  • Membuat user journey utama: Login → Dashboard → Simpanan → Setor, Pembiayaan → Ajukan, Paket → Booking, Tracking.
  • Menambahkan click interaction antar layar penting untuk validasi alur.
  • Menyiapkan version control V1.0, V1.1, dan V2.0 untuk melacak perubahan desain.
  • Menerapkan design QA checklist: spacing konsisten, reuse komponen, no hardcoded value, Auto Layout aktif.
  • Menyertakan interaction notes di setiap flow untuk mengurangi ambiguity saat handoff.

Entry Point & First-Time User Experience

  • Pengguna masuk melalui link aplikasi mobile, demo prototype, atau akses dari portal koperasi.
  • Jika pengguna baru, mereka melihat layar login yang sederhana dengan CTA jelas dan bantuan minimal.
  • Setelah login, onboarding singkat memperkenalkan tujuan utama: simpanan, pembiayaan, paket, dan tracking.
  • Pengguna diarahkan ke dashboard dengan highlight progress agar langsung melihat value dalam <60 detik.
  • Jika ada data belum lengkap, sistem meminta verifikasi profil atau persetujuan yang relevan sebelum transaksi.

1. Login dan verifikasi akses

  • Pengguna masuk dengan kredensial aman dan langsung diarahkan ke peran yang sesuai, baik anggota maupun admin.
  • Validasi input login dengan state error yang jelas bila salah.
  • Jika sesi kedaluwarsa, tampilkan modal re-authentication.
  • Role menentukan navigasi yang muncul: mobile member atau admin dashboard.
  • Target time-to-value: pengguna melihat dashboard utama dalam <30-60 detik.

2. Dashboard utama

  • Pengguna melihat ringkasan progress umroh, status finansial, dan shortcut aksi yang paling sering dipakai.
  • Highlight card menampilkan progress visual dan nominal target vs current.
  • Quick action buttons mengarah ke setor, ajukan, booking, atau tracking.
  • Info cards menampilkan status transaksi dan notifikasi penting.
  • Bottom navigation memberi akses cepat ke area utama tanpa kebingungan.

3. Simpanan Umroh

  • Pengguna mengecek riwayat, progress, dan melakukan setor dengan alur yang pendek serta aman.
  • Summary card menampilkan saldo, target, dan status aktif.
  • Graph membantu pengguna melihat tren kontribusi dari waktu ke waktu.
  • Transaction list menampilkan histori dengan status dan tanggal.
  • CTA sticky bottom meminimalkan scroll untuk aksi setor.

4. Pembiayaan dan simulasi

  • Pengguna menilai kelayakan dan mengajukan pembiayaan tanpa proses yang rumit.
  • Simulation card menjelaskan estimasi cicilan atau skema pembiayaan.
  • Eligibility indicator memberikan sinyal siap/tidak siap.
  • Jika data tidak lengkap, tampilkan helper text dan CTA untuk melengkapi profil.
  • Error handling mencakup validasi nominal, limit, dan status pengajuan.

5. Paket Umroh, booking, dan tracking

  • Pengguna menelusuri paket, melakukan booking, lalu memantau status perjalanan pada satu alur yang saling terhubung.
  • Filter tabs memudahkan komparasi paket berdasarkan preferensi.
  • Card list memberi ringkasan itinerary, harga, dan status ketersediaan.
  • Booking flow memunculkan konfirmasi dan modal ringkasan sebelum submit.
  • Tracking menampilkan status perjalanan dan update penting yang mudah dipahami.

Advanced Features & Edge Cases

  • Role-based views untuk member, admin, dan supervisor keuangan.
  • Status badges dan alert states untuk kondisi pending, approved, rejected, atau perlu tindakan.
  • Customization untuk preferensi notifikasi dan informasi yang ditampilkan di dashboard.
  • Graceful error handling untuk jaringan lambat, data kosong, dan input tidak valid.
  • Prototype notes untuk edge case seperti pembatalan booking, revisi pengajuan, atau perubahan data profil.

UI/UX Highlights

  • Visual sistem harus konsisten, finansial-friendly, dan memprioritaskan kejelasan informasi di atas dekorasi.
  • Semua komponen wajib menggunakan Auto Layout untuk menjaga responsivitas.
  • Kontras warna harus mendukung keterbacaan tinggi dan aksesibilitas.
  • Target performa UI: layar utama terasa ringan, navigasi cepat, dan tidak membebani kognisi pengguna.
  • Komponen reusable dan naming yang jelas mengurangi miskomunikasi antara desain dan engineering.

Alya, seorang calon jamaah berusia 29 tahun, selama ini kesulitan memahami berapa total tabungan yang sudah terkumpul dan langkah apa yang harus dilakukan berikutnya. Ia harus membuka beberapa catatan berbeda untuk mengecek setor, menghubungi admin untuk status pembiayaan, dan bertanya lagi saat ingin memilih paket Umroh. Proses itu membuatnya ragu dan sering menunda keputusan.

Saat menggunakan Nexus Umroh Platform, Alya langsung melihat progress umroh di dashboard, status simpanan, serta tombol aksi yang jelas untuk setor, ajukan, dan booking. Ia merasa lebih tenang karena setiap langkah memiliki status, feedback, dan tampilan yang konsisten. Bagi koperasi, perubahan ini berarti lebih banyak transaksi selesai sendiri oleh pengguna, lebih sedikit pertanyaan berulang ke tim support, dan proses operasional yang jauh lebih efisien.

User-Centric Metrics

  • Dashboard engagement rate >70% dari pengguna aktif bulanan.
  • Feature adoption rate untuk simpanan, pembiayaan, dan booking meningkat minimal 25% dalam 3 bulan.
  • Task completion rate untuk aksi utama mencapai >85% tanpa bantuan admin.
  • User satisfaction score (CSAT) di atas 4.5/5 untuk alur utama.
  • Drop-off rate pada flow booking dan pengajuan pembiayaan turun di bawah 15%.

Business Metrics

  • Waktu produksi desain turun 30-40% berkat reusable component library.
  • Jumlah revisi handoff karena ambiguity turun di bawah 10% per sprint.
  • Retention pengguna aktif meningkat 15-20% setelah alur utama disederhanakan.
  • Platform siap direplikasi ke multi-koperasi tanpa redesign besar, mempercepat ekspansi bisnis.
  • Posisi brand meningkat sebagai platform Umroh digital yang modern dan production-ready.

Technical Metrics

  • 99.5% uptime untuk environment produksi.
  • P95 response time untuk loading screen utama di bawah 2 detik.
  • Zero critical design-token mismatch antara design system dan implementasi.
  • Kepatuhan minimal terhadap praktik keamanan data sensitif dan role-based access.

Tracking Plan

  • Track login_success untuk mengukur entry rate pengguna.
  • Track dashboard_view untuk melihat apakah pengguna mencapai value utama.
  • Track savings_deposit_start dan savings_deposit_submit untuk funnel simpanan.
  • Track financing_simulation_view dan financing_application_submit untuk funnel pembiayaan.
  • Track package_filter_used dan package_booking_submit untuk funnel paket dan booking.
  • Track approval_status_changed untuk proses admin.
  • Track tracking_view untuk mengukur penggunaan fitur perjalanan.

Technical Needs

  • Frontend mobile dan admin harus mendukung desain responsif serta Auto Layout parity antara desain dan implementasi.
  • Backend perlu menyediakan API terstruktur untuk auth, profil, simpanan, pembiayaan, paket, booking, tracking, dan reporting.
  • Database harus menyimpan data anggota, transaksi, status approval, dan audit log secara terpisah untuk keamanan dan observability.
  • Perlu state management yang stabil untuk loading, error, empty state, dan optimistic UI pada transaksi tertentu.
  • Sistem harus mendukung component versioning agar perubahan desain dapat ditelusuri ke release produk.
  • Perlu mekanisme role-based access control untuk member, admin, dan supervisor.
  • Monitoring dan logging harus tersedia untuk memantau error UI dan performa API.

Integration Points

  • Authentication service seperti email/OTP atau SSO internal koperasi.
  • Payment atau transfer gateway untuk mendukung setor dan verifikasi transaksi.
  • Notification service untuk email, push, atau WhatsApp update status.
  • Document storage untuk upload berkas pengajuan dan verifikasi.
  • Reporting/export integration untuk kebutuhan operasional dan audit.

Data Storage & Privacy

  • Simpan data pribadi dan finansial dengan encryption at rest dan in transit.
  • Pisahkan data sensitif berdasarkan role agar akses admin lebih terkontrol.
  • Sediakan audit log untuk perubahan status, approval, dan transaksi penting.
  • Dukung penghapusan atau pembatasan penggunaan data sesuai kebijakan privasi yang berlaku.
  • Pastikan kebijakan retensi data jelas untuk dokumen dan histori transaksi.

Scalability & Performance

  • Arsitektur harus siap menambah modul baru tanpa merombak component library utama.
  • Gunakan caching dan pagination untuk daftar transaksi, member, dan reporting.
  • Optimalkan aset desain dan UI agar loading cepat di perangkat mobile kelas menengah.
  • Siapkan observability untuk mendeteksi bottleneck pada dashboard dan approval flow.

Potential Challenges

  • Risiko duplikasi komponen jika naming convention dan governance tidak dijaga; solusi: component ownership dan review wajib sebelum publish.
  • Risiko desain terlihat rapi namun tidak sesuai implementasi; solusi: design token parity dan handoff notes yang detail.
  • Risiko user bingung jika informasi finansial terlalu padat; solusi: prioritaskan highlight card, progressive disclosure, dan hierarchy visual yang jelas.
  • Risiko adopsi admin rendah jika flow terlalu panjang; solusi: sederhanakan approval list, gunakan status yang konsisten, dan sediakan quick actions.
  • Risiko scaling ke multi-koperasi menimbulkan variasi kebutuhan; solusi: desain fondasi modular dengan konfigurasi per tenant.

Business Idea

📘 PRODUCT REQUIREMENTS DOCUMENT (PRD) NEXUS UMROH PLATFORM – FIGMA STRUCTURE DETAIL ________________________________________ 1. OVERVIEW Product Name: Nexus Umroh Platform Objective: Membangun struktur desain di Figma yang: • Scalable • Reusable • Developer-ready • Konsisten antar fitur (Simpanan, Pembiayaan, Travel) ________________________________________ 2. DESIGN ARCHITECTURE (FIGMA FILE STRUCTURE) 📁 PAGE STRUCTURE 1. Cover • Branding Nexus • Versioning • Owner / team ________________________________________ 2. Design System Berisi semua token & foundation Sections: • Colors • Typography • Spacing • Grid • Elevation (shadow) • Border radius ________________________________________ 3. Components (MASTER LIBRARY) 3.1 Basic Components • Button (Primary / Secondary / Ghost) • Input field • Dropdown • Checkbox / Radio • Toggle 3.2 Navigation • Bottom navigation (mobile) • Top bar • Sidebar (admin) 3.3 Cards • Financial Card • Progress Card • Package Card • Transaction Card 3.4 Feedback • Toast notification • Modal • Alert states ________________________________________ 4. Mobile Screens Folder: • Auth • Dashboard • Simpanan • Pembiayaan • Paket Umroh • Booking • Tracking • Profile ________________________________________ 5. Admin Dashboard Folder: • Overview • Member Management • Financial • Approval System • Reporting ________________________________________ 6. Prototype Flow • User journey mapping • Click interaction ________________________________________ 3. COMPONENT SYSTEM DETAIL ________________________________________ 🔘 BUTTON COMPONENT Variants: • Primary (Filled) • Secondary (Outline) • Disabled States: • Default • Hover • Pressed • Loading Properties: • Size: Small / Medium / Large • Icon: Left / Right / None ________________________________________ 🧾 INPUT FIELD Variants: • Default • Focus • Error • Disabled Elements: • Label • Placeholder • Helper text • Error message ________________________________________ 💳 FINANCIAL CARD (CORE) Components: • Title • Amount • Subtext • Icon • Status badge Reusable for: • Simpanan • Pembiayaan • SHU ________________________________________ 📊 PROGRESS COMPONENT (CRITICAL) Elements: • Progress bar • Percentage • Label (Target vs Current) Variant: • Linear • Circular ________________________________________ 4. AUTO LAYOUT RULES Semua komponen HARUS: • Menggunakan Auto Layout • Padding: 16px • Spacing: 8px / 12px / 16px Constraints: • Responsive (left/right stretch) • Min width defined ________________________________________ 5. NAMING CONVENTION (WAJIB) Format: Component: [Type]/[Category]/[Variant]/[State] Contoh: • Button/Primary/Large/Default • Card/Financial/Active • Input/Text/Error ________________________________________ 6. DESIGN TOKEN SYSTEM Colors: • color.primary.navy • color.accent.gold • color.text.primary • color.bg.surface Spacing: • spacing.8 • spacing.16 • spacing.24 Radius: • radius.sm (8px) • radius.md (12px) • radius.lg (16px) ________________________________________ 7. MOBILE SCREEN SPEC (DETAIL STRUCTURE) ________________________________________ 📱 DASHBOARD Frame: • Width: 375px Sections: 1. Header 2. Highlight Card (Progress Umroh) 3. Quick Action Buttons 4. Info Cards 5. Bottom Navigation ________________________________________ 📱 SIMPANAN UMROH Sections: • Summary Card • Progress • Graph • Transaction List • CTA Button (sticky bottom) ________________________________________ 📱 PEMBIAYAAN Sections: • Simulation Card • Eligibility Indicator • CTA ________________________________________ 📱 PAKET UMROH Sections: • Filter tabs • Card list (scrollable) ________________________________________ 8. ADMIN DASHBOARD STRUCTURE ________________________________________ 🖥️ OVERVIEW Widgets: • Total anggota • Total dana • Active jamaah ________________________________________ 🖥️ APPROVAL SYSTEM • List pengajuan • Status: o Pending o Approved o Rejected ________________________________________ 🖥️ REPORTING • Grafik cashflow • Simpanan vs pembiayaan ________________________________________ 9. PROTOTYPE INTERACTION Flow utama: Login → Dashboard → → Simpanan → Setor → Pembiayaan → Ajukan → Paket → Booking → Tracking ________________________________________ 10. VERSION CONTROL Gunakan: • V1.0 – Initial design • V1.1 – Feedback update • V2.0 – Production ready ________________________________________ 11. DESIGN QA CHECKLIST • Konsistensi spacing • Komponen reuse (tidak duplicate) • Naming sesuai standar • Semua pakai Auto Layout • No hardcoded value ________________________________________ 12. HANDOFF TO DEV Deliverables: • Figma file • Component library • Style guide • Interaction notes ________________________________________ 13. SUCCESS METRICS • Design reusable > 80% • Dev handoff tanpa ambiguity • UX flow clear (no confusion) • Load cognitive rendah ________________________________________ FINAL NOTE Struktur ini memastikan: • Bisa scale ke multi koperasi • Bisa tambah fitur tanpa redesign • Bisa langsung masuk production ________________________________________ END OF PRD

Make My PRD

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

    PRD: 📘 PRODUCT REQUIREMENTS DOCUMENT (PRD) NEXUS UMROH...