# 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](https://theuxda.com/blog/ux-case-study-mobile-banking-app-design-neobank):

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](https://www.figma.com/community/file/1320093355098935734) |
| Digital Banking Fintech | Full | [Figma](https://www.figma.com/community/file/1221934215660892715) |
| Free Finance Banking Kit | 15+ | [Figma](https://www.figma.com/community/file/1036356407585866248) |
| Bank App iOS Kit | iOS | [Figma](https://www.figma.com/community/file/974284148399607335) |

**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 | **Swan** | EU licensed, IBAN generation |
| 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

- [UXDA Fintech Design Trends](https://theuxda.com/blog/ux-case-study-mobile-banking-app-design-neobank)
- [Banking App UX 2025](https://adria-bt.com/en/9-ux-ui-design-trends-in-digital-banking-what-users-expect-in-2025/)
- [Figma Banking UI Kits](https://www.figma.com/community/mobile-apps/finance)
- [Drop Tech Stack Research](./mobilebank-research/TECH-STACK.md)
- [Drop Providers Research](./mobilebank-research/PROVIDERS.md)