Skip to main content

UI/UX Reference

Drop UI/UX Reference

Note: Originally written as "Drop" with Flutter stack. Product has been rebranded to Drop using Next.js 16 + React 19 + Tailwind v4. See brand/brand-guide.md for current design system.

Datum: 2026-02-04

1. Konkurencija za Inspiraciju

App Strengths Šta kopirati
Revolut Quick onboarding, heavy icons, real-time responses Multi-currency prikaz, card management
N26 Minimal aesthetics, auto-categorized transactions MoneyBeam stil transfera
Monzo Human tone, savings pots, push notifications Savings pots, friendly copy

2. Key UI Komponente

Bazirano na UXDA Fintech Case Study:

  1. Biometric Auth — Instant pristup, FaceID/TouchID first
  2. Balance Dashboard — Swipeable account cards, trend chart
  3. Activity Feed — Timeline stil (kao social media)
  4. Spending Insights — Donut chart sa kategorijama
  5. Payment Interface — Jednostavno kao SMS slanje
  6. AI Assistant — Voice-activated (future phase)

3. Onboarding Flow

Best practices za 3-minute onboarding:

  1. Phone number → SMS verification
  2. Email (optional)
  3. Personal info (name, DOB)
  4. ID verification (Sumsub integration)
  5. Selfie liveness check
  6. IBAN generated → Ready!

Target: < 3 minute, 74% users abandon if > 5 min

4. Dashboard Layout

┌─────────────────────────────┐
│  [Profile]     Drop   │
├─────────────────────────────┤
│                             │
│      € 1,234.56             │
│      Main Account           │
│   ← [Card 1] [Card 2] →     │
│                             │
├─────────────────────────────┤
│  [Send] [Request] [Top-up]  │
├─────────────────────────────┤
│  Recent Activity            │
│  ─────────────────────────  │
│  ☕ Starbucks      -€4.50   │
│  🛒 Grocery        -€32.10  │
│  💰 Salary      +€2,500.00  │
│                             │
└─────────────────────────────┘

5. Figma Templates (FREE)

Template Screens Link
Banking App (Light/Dark) 43+ Figma
Digital Banking Fintech Full Figma
Free Finance Banking Kit 15+ Figma
Bank App iOS Kit iOS Figma

Preporuka: Počni sa "Banking App (Light/Dark)" — 43 screena, light/dark mode.

6. 2025 Design Trends

  • Personalizacija — AI-based spending insights
  • Embedded finance — Sve na jednom mjestu (payments, savings, cards)
  • Conversational UI — Chatbot za support
  • Biometric-first — Password kao fallback, ne primary

7. Tech Stack za UI (VERIFIED)

Komponenta Tehnologija Napomena
Mobile Flutter 3.x Single codebase iOS/Android
State Bloc Recommended by research
Navigation GoRouter Deep linking support
HTTP Dio API calls
Local storage Hive Encrypted local data
Biometrics local_auth FaceID/TouchID

8. Backend Integration (VERIFIED)

Service Provider Napomena
BaaS TBD Licensing partner not yet confirmed (Swan/ZTL eliminated)
Cards Stripe Issuing Virtual/physical cards
KYC Sumsub ID verification, liveness
Payments Stripe Payment processing

NAPOMENA: NE Firebase — Swan/Stripe ekosistem per research.

9. Next Steps

  1. Download Figma template (43+ screens)
  2. Customize branding (Drop colors, logo)
  3. Design onboarding flow (6 screens)
  4. Design main dashboard
  5. Design send money flow
  6. Design card management screens
  7. Handoff to Flutter dev

Sources

Back to top