RISWIS Customer Mobile App: Comprehensive Requirements & UI Breakdown
1. Project Overview
RISWIS is currently an internal banking system for staff. This document defines the complete requirements and UI breakdown for a new, production-grade customer-facing mobile banking app (iOS & Android) that complements the staff system, with all missing and future features included.
2. Core Features (MVP + Future)
2.1. Authentication & Security
Secure JWT-based login, registration, and password reset
Biometric login (FaceID/TouchID)
Multi-factor authentication (MFA) (future)
Session management with auto-logout and refresh
Encrypted local storage for tokens and sensitive data
Device management (view/revoke sessions)
2.2. Account Management
View all customer accounts (SAVINGS, CHECKING, BUSINESS, LOAN, FIXED_DEPOSIT, OVERDRAFT, CURRENT)
Dual-currency support (USD/LRD) with clear symbols
Real-time balances and account status
Account details: type, number, status, branch, product info
Account statements (PDF/XLSX export)
Account type change request (future)
Automated account reactivation (future)
Dormancy status and reactivation workflow (future)
2.3. Transactions
View transaction history (filter by date, type, currency, status)
Transaction details: amount, currency, date, status, description, counterparty
Initiate transfers (to own accounts, other customers, external accounts)
Mobile money top-up and withdrawal (MTN/Orange, USD/LRD)
Bill payments (future)
Bulk transfers (future)
Transaction reversal request (future)
Real-time transaction status updates
Export transactions (PDF/XLSX)
2.4. Mobile Money & Cards
MoMo balance card (ATM-style UI)
Top-up via bank, card, or wallet (with fee breakdown)
Withdraw to MoMo wallet
Linked debit/credit card management (future)
Card activation/deactivation (future)
2.5. Notifications & Alerts
Real-time push notifications for all account activity
SMS/email alerts for critical events
In-app notification center
Customizable notification preferences (future)
2.6. Profile & Settings
View/update personal info (name, phone, email, address, KYC docs)
Change password, enable/disable biometrics
Manage notification preferences
Device/session management
Language and theme selection (future)
2.7. Support & Help
In-app help center (role-based content)
Secure messaging with bank staff
FAQs, guides, and workflow walkthroughs
Report an issue/feedback
2.8. Reports & Analytics
Downloadable statements (PDF/XLSX)
Spending analytics (future)
Account lifecycle analytics (future)
2.9. Security & Compliance
Full audit logging of all actions
Secure API calls (SSL/TLS)
Input validation and sanitization
PCI DSS compliance for card operations
Fraud detection and alerts (future)
3. UI/UX & Component Breakdown
3.1. App Structure
Splash Screen: Branding, loading animation
Onboarding: Welcome, registration, KYC steps
Login: Username/password, biometric, forgot password
Main Navigation: Bottom tab bar (Home, Accounts, Transfers, MoMo, Support, Profile)
3.2. Home/Dashboard
Account summary cards (USD/LRD, all account types)
Quick actions (transfer, top-up, pay bill)
Recent transactions list
Notifications preview
Service status alerts
3.3. Accounts
List of all accounts (with type, number, balance, status)
Account details page (transactions, statements, product info)
Account type change request (future)
Dormancy/reactivation workflow (future)
3.4. Transactions
Transaction history (filter/search)
Transaction details modal/page
Export/statement download button
Initiate transfer (form with validation, recipient picker, amount, currency, description)
Transfer confirmation and receipt
Transaction reversal request (future)
3.5. Mobile Money (MoMo)
MoMo balance card (ATM-style, with branding, phone, balance, status)
Top-up form (amount, currency, payment method, quick amount buttons)
Withdraw form (to wallet)
Transaction summary sidebar (fee breakdown, total, method)
Real-time fee calculation
Security/privacy notice
Loading/error/empty states
3.6. Cards (future)
Linked cards list
Add new card (form, validation)
Card activation/deactivation
Card details and limits
3.7. Notifications
In-app notification center (list, read/unread, filter)
Push notification integration
SMS/email alert settings
3.8. Profile & Settings
Personal info (view/edit)
KYC documents (upload, status)
Change password, enable/disable biometrics
Device/session management
Language/theme selection (future)
3.9. Support & Help
Help center (role-based guides, FAQs)
Secure chat with staff
Issue/feedback reporting
3.10. General UI/UX Principles
Mobile-first, responsive layouts
Touch-friendly, accessible components
Consistent theming (RISWIS color system, dark mode)
Professional, banking-compliant design (no marketing fluff)
Clear currency separation (USD: $, LRD: L$)
Loading skeletons, error states, toast notifications
Export/download buttons for all data views
Adaptive grid layouts (1-2 columns on mobile, 2-3 on tablet/desktop)
Card-based layouts for all major sections
Visual status indicators (account, transaction, KYC, etc.)
ARIA and accessibility best practices
4. Future Features & Roadmap
Automated account reactivation (customer-initiated)
Bulk transfers and scheduled payments
Bill payments (utilities, airtime, etc.)
Spending analytics and budgeting tools
Linked card management (add, activate, block)
Flexible dormancy rules (configurable per account type)
Enhanced notifications (email, in-app, push)
Analytics dashboard (account lifecycle, spending, etc.)
Multi-language support
Open banking APIs (future integrations)
Personalized offers and messages (future)
5. Technical & Integration Notes
Platform: React Native (preferred) or Flutter
TypeScript throughout
API: Secure RESTful endpoints (documented)
Testing: Unit, integration, E2E
CI/CD: Automated build, test, deploy for App Store/Play Store
Compliance: Banking, PCI DSS, GDPR
Documentation: All APIs, flows, and security measures
README: Setup, architecture, deployment instructions
6. References
All UI/UX patterns and workflows are based on the latest RISWIS staff system, adapted for customer-facing use.
See attached Mermaid diagrams and workflow docs for detailed UI/component flows.
This document is the single source of truth for the RISWIS customer mobile app project. All features, UI, and future enhancements must be tracked and updated here.
Last updated