UI/UX

UI Redesign Proposal

Drop UI/UX Redesign Proposal

Note: Originally written as "FontelePay" with Flutter stack. Product has been rebranded to Drop using Next.js 16 + React 19 + Tailwind v4 + shadcn/ui. Design direction chosen: Forest Green (#0B6E35) + Gold (#D4A017) with Fraunces (brand) + DM Sans (body) typography. Retained for historical research reference.

Date: 2026-02-05 Status: Superseded — see brand/brand-guide.md for current design system

Executive Summary

Drop (originally FontelePay) needs a distinctive visual identity to compete with established neobanks (Revolut, N26, Monzo, Wise). This proposal outlines three design directions, recommended component library, color palettes, typography, and implementation roadmap.

Core Problem: Generic Tailwind-template aesthetics lack brand differentiation.

Solution: Custom design system with distinctive branding, purposeful micro-interactions, and mobile-first components.

1. Competitor Analysis

Revolut

N26

Monzo

Wise

2. Three Design Direction Options

Option A: "Trust Vault" - Professional & Secure

Concept: Establish FontelePay as the secure, trustworthy choice for EU banking.

Visual Identity:

Color Palette:

Role Name Hex Usage
Primary Deep Navy #0A1628 Backgrounds, headers
Secondary Royal Blue #1E40AF Interactive elements
Accent Amber Gold #F59E0B CTAs, highlights
Success Emerald #10B981 Positive states
Error Rose #F43F5E Errors, warnings
Surface Slate 50 #F8FAFC Cards, surfaces
Text Primary Slate 900 #0F172A Main text
Text Secondary Slate 500 #64748B Secondary text

Dark Mode Palette:

Role Hex
Background #020617
Surface #0F172A
Text Primary #F1F5F9
Text Secondary #94A3B8

Typography:

Best For: Users who prioritize security and professional appearance.

Option B: "Fresh Finance" - Modern & Approachable

Concept: Position FontelePay as the friendly, modern European alternative.

Visual Identity:

Color Palette:

Role Name Hex Usage
Primary Teal #0D9488 Brand color, headers
Secondary Cyan #06B6D4 Secondary actions
Accent Coral #FB7185 Notifications, highlights
Success Green #22C55E Positive states
Error Red #EF4444 Errors
Surface White #FFFFFF Cards, backgrounds
Background Gray 50 #F9FAFB Page backgrounds
Text Primary Gray 900 #111827 Main text
Text Secondary Gray 500 #6B7280 Secondary text

Dark Mode Palette:

Role Hex
Background #0F0F0F
Surface #1A1A1A
Primary #2DD4BF
Text Primary #F3F4F6

Typography:

Best For: Younger demographics, first-time banking app users.

Option C: "Nordic Minimal" - Clean & Sophisticated

Concept: Scandinavian-inspired minimalism with bold accent color.

Visual Identity:

Color Palette:

Role Name Hex Usage
Primary Electric Violet #7C3AED Brand, CTAs
Secondary Violet Light #A78BFA Secondary actions
Background Pure White #FFFFFF Main background
Surface Gray 100 #F3F4F6 Cards
Border Gray 200 #E5E7EB Dividers
Text Primary Gray 950 #030712 Main text
Text Secondary Gray 400 #9CA3AF Secondary text
Success Emerald #059669 Positive
Error Rose #E11D48 Negative

Dark Mode Palette:

Role Hex
Background #09090B
Surface #18181B
Primary #A78BFA
Text Primary #FAFAFA

Typography:

Best For: Design-conscious users, premium positioning.

3. Component Library Recommendation

Primary: Flutter Material 3 + Custom Design System

Why Flutter Material 3:

Implementation Approach:

// Theme Configuration Example
ThemeData fontelepayTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Color(0xFF7C3AED), // Primary brand color
    brightness: Brightness.light,
  ),
  textTheme: GoogleFonts.interTextTheme(),
);

Recommended Flutter Packages

Package Purpose Version
flutter_bloc State management 8.x
go_router Navigation, deep linking 14.x
dio HTTP client 5.x
lottie Micro-interactions 3.x
flutter_animate Declarative animations 4.x
google_fonts Typography 6.x
flutter_svg Vector icons 2.x
shimmer Loading states 3.x

Component Hierarchy

FontelePay Design System
├── Atoms (smallest units)
│   ├── Colors
│   ├── Typography
│   ├── Icons
│   └── Spacing
├── Molecules (simple components)
│   ├── Button (primary, secondary, ghost)
│   ├── Input (text, PIN, amount)
│   ├── Card (account, transaction)
│   └── Badge (status, notification)
├── Organisms (complex components)
│   ├── AccountCard (balance, IBAN, actions)
│   ├── TransactionList (with filters)
│   ├── PaymentForm (recipient, amount, confirm)
│   └── CardWidget (virtual card display)
└── Templates (page layouts)
    ├── DashboardLayout
    ├── OnboardingLayout
    └── TransactionDetailLayout

4. Typography Recommendation

Primary Font: Inter

Why Inter:

Type Scale (Material 3):

Style Size Weight Line Height Usage
Display Large 57px 400 64px Hero numbers
Display Medium 45px 400 52px Balance display
Headline Large 32px 600 40px Screen titles
Headline Medium 28px 600 36px Section headers
Title Large 22px 500 28px Card titles
Title Medium 16px 500 24px Subtitles
Body Large 16px 400 24px Main content
Body Medium 14px 400 20px Secondary content
Label Large 14px 500 20px Buttons
Label Medium 12px 500 16px Captions

Alternative Pairing

Premium Option: Plus Jakarta Sans (headings) + Inter (body)

5. Micro-Interactions & Animation

Animation Principles

  1. Duration Guidelines:

    • Micro-interactions: 50-200ms
    • Page transitions: 200-400ms
    • Complex animations: 400-600ms

  2. Easing:

    • Standard: Curves.easeOutCubic
    • Enter: Curves.decelerate
    • Exit: Curves.accelerate

Essential Animations

Component Animation Duration Trigger
Button Press Scale down 0.95 100ms onTapDown
Transaction Success Checkmark Lottie 600ms onComplete
Card Flip 3D rotation 400ms onTap
Balance Update Number morph 300ms onValueChange
Pull to Refresh Custom Lottie 800ms onRefresh
Skeleton Loading Shimmer Loop onLoading
Tab Switch Fade + slide 200ms onSelect

Lottie Animations to Create

  1. Success Checkmark - Payment confirmed
  2. Loading Spinner - Processing state
  3. Card Issuing - Virtual card generation
  4. Money Transfer - Send/receive animation
  5. Empty State - No transactions illustration
  6. Error State - Failed transaction
  7. Confetti - First transaction celebration

6. Component Redesign Priority

P0 - Critical (Week 1-2)

Component Current Issue Redesign Focus
Primary Button Generic Tailwind Custom shape, gradient option, haptic feedback
Input Field Basic styling Floating labels, validation states, currency formatting
Balance Card Flat, boring Glassmorphism, subtle animation, gradient background
Transaction Item List-like Card approach, merchant icons, category colors

P1 - Important (Week 3-4)

Component Current Issue Redesign Focus
Navigation Bar Standard tab bar Custom icons, animated indicators
Card Widget Static display 3D flip, Apple/Google Pay button integration
Amount Input Basic number Custom keypad, currency selector, max button
Profile Avatar Circle image Gradient border, online indicator

P2 - Enhancement (Week 5-6)

Component Current Issue Redesign Focus
Charts Basic lines Animated draw, touch interaction, gradients
Category Pills Plain buttons Icons, color coding, selection animation
Empty States Text only Lottie illustrations, CTAs
Notifications System default Custom in-app notifications

7. Dark Mode Implementation

Design Principles

  1. Not just inverted colors - Redesign each surface layer
  2. Reduced contrast - Use off-white (#F1F5F9) instead of pure white
  3. Elevated surfaces = lighter - Higher elevation = lighter gray
  4. Desaturated accent colors - Reduce saturation 10-20% for dark mode
  5. Test contrast ratios - Minimum 4.5:1 for text (WCAG AA)

Surface Elevation (Dark Mode)

Elevation Background Use Case
0 #09090B Page background
1 #18181B Cards, inputs
2 #27272A Modals, dropdowns
3 #3F3F46 Hover states

Implementation

ColorScheme darkScheme = ColorScheme.fromSeed(
  seedColor: Color(0xFF7C3AED),
  brightness: Brightness.dark,
  surface: Color(0xFF18181B),
  onSurface: Color(0xFFF1F5F9),
);

8. Accessibility Requirements

WCAG 2.1 AA Compliance

Requirement Implementation
Color Contrast Minimum 4.5:1 (text), 3:1 (large text)
Touch Targets Minimum 48x48dp
Focus States Visible ring on all interactive elements
Screen Reader Semantic labels on all widgets
Dynamic Type Support system font scaling
Reduce Motion Respect MediaQuery.disableAnimations

Testing Tools

9. Implementation Roadmap

Phase 1: Foundation (Week 1-2)

Phase 2: Core Components (Week 3-4)

Phase 3: Feature Components (Week 5-6)

Phase 4: Polish (Week 7-8)

10. My Recommendation

Go with Option C: "Nordic Minimal"

Reasons:

  1. Differentiation - Most neobanks use dark (Revolut, N26) or warm (Monzo) palettes. Electric violet is distinctive.
  2. Scalability - Minimal design ages better and accommodates new features easily.
  3. Trust - Clean design signals competence and transparency.
  4. Dark Mode - Minimal palettes translate better to dark mode.
  5. EU Market - Scandinavian design resonates well with European users.

Typography: Inter + Satoshi pairing for personality without sacrificing legibility.

Implementation: Flutter Material 3 as foundation, custom component library on top.

Sources

Competitor Research

Component Libraries

Typography

Animations

Dark Mode & Accessibility

Next Steps

  1. Review this proposal - Select design direction (A, B, or C)
  2. Approve color palette - Or request modifications
  3. Create Figma design file - Based on chosen direction
  4. Build component library - Flutter implementation
  5. Iterate - Refine based on user testing

Document prepared for Drop (originally FontelePay) UI/UX upgrade initiative.

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

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

UI Design Spec

Drop — UI/UX Design Specification

Date: 2026-02-09 Phase: SDLC 3 — Design Sources: Designer agent + Product agent + Edita's AI-first workflow Stack: Next.js 16 + React 19 + Tailwind v4 + shadcn/ui Approach: Code-first (no Figma) — v0.dev + shadcn/ui

Brand

Element Value
Name Drop
Tagline "Enklere betalinger. Lavere gebyrer."
Primary #3498db (blue — trust, finance)
Secondary #f1c40f (yellow — warmth, home)
Accent #2ecc71 (green — success, money)
Headings Montserrat Bold
Body Lato Regular
Style Mobile-first, clean, minimal
Accessibility WCAG AA minimum

Screen Map

┌─────────────┐
│   Splash     │ → auto-redirect
└──────┬──────┘
       ▼
┌─────────────┐     ┌─────────────┐
│   Login      │────▶│  Register   │
└──────┬──────┘     └──────┬──────┘
       │                    ▼
       │            ┌─────────────┐
       │            │    KYC      │
       │            │ ID + Selfie │
       │            └──────┬──────┘
       │                    ▼
       │            ┌─────────────┐
       │            │ Add Payment │
       │            │   Method    │
       │            └──────┬──────┘
       ▼                    │
┌─────────────┐◀────────────┘
│    HOME      │
│  (Tab Bar)   │
├──────────────┤
│ [Send] [Scan]│
│ Balance Card │
│ Transactions │
└──┬───┬───┬──┘
   │   │   │
   ▼   ▼   ▼
 Send  QR  Profile
 Flow  Flow Settings

Screen 1: HomeScreen

Route: /dashboard

Layout

┌──────────────────────────────┐
│ [Drop logo]    [🔔] [Avatar] │  ← Header
├──────────────────────────────┤
│                              │
│  ┌────────────────────────┐  │
│  │   Your Balance         │  │  ← Card (shadcn)
│  │   12,450.00 NOK        │  │     text-3xl font-bold
│  └────────────────────────┘  │
│                              │
│  ┌──────────┐ ┌──────────┐  │
│  │ Send     │ │ Scan QR  │  │  ← Button x2 (shadcn)
│  │ Money 💸 │ │ 📱       │  │     primary / accent
│  └──────────┘ └──────────┘  │
│                              │
│  Recent Transactions         │  ← ScrollArea (shadcn)
│  ┌────────────────────────┐  │
│  │ Mama Jasmina  -2,000   │  │  ← Each: Avatar + name + amount
│  │ 🇷🇸 RSD    ✅ Completed │  │     + country flag + Badge status
│  ├────────────────────────┤  │
│  │ Ahmetov Kebab  -129    │  │
│  │ 🏪 QR     ✅ Completed │  │
│  └────────────────────────┘  │
│                              │
├──────────────────────────────┤
│  [Home]  [Activity]  [More]  │  ← Bottom nav (3 tabs)
└──────────────────────────────┘

Components

States

Screen 2: SendMoneyFlow (4-step wizard)

Route: /send

Step Indicator

Tabs or custom stepper: Select → Amount → Review → Done

Step 1: Select Recipient (/send/recipient)

┌──────────────────────────────┐
│ ← Back     Send Money   1/4  │
├──────────────────────────────┤
│                              │
│  🔍 Search recipients...     │  ← Input (shadcn)
│                              │
│  Recent                      │
│  ┌────────────────────────┐  │
│  │ 👤 Mama Jasmina        │  │  ← List items, clickable
│  │    Serbia • *****1234  │  │
│  ├────────────────────────┤  │
│  │ 👤 Brat Edin           │  │
│  │    Bosnia • *****5678  │  │
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │  + New Recipient       │  │  ← Button variant="outline"
│  └────────────────────────┘  │
└──────────────────────────────┘

Step 2: Amount (/send/amount)

┌──────────────────────────────┐
│ ← Back     Send Money   2/4  │
├──────────────────────────────┤
│                              │
│  To: Mama Jasmina 🇷🇸         │
│                              │
│  You send:                   │
│  ┌──────────────────┬─────┐  │
│  │         2,000    │ NOK │  │  ← Input + Select (currency)
│  └──────────────────┴─────┘  │
│                              │
│  They receive:               │
│  ┌────────────────────────┐  │
│  │    23,400 RSD           │  │  ← Computed, read-only
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │ Rate: 1 NOK = 11.70 RSD│  │  ← Exchange rate info
│  │ Fee: 10.00 NOK (0.5%)  │  │
│  │ Total: 2,010.00 NOK    │  │
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │      Continue →         │  │  ← Button primary
│  └────────────────────────┘  │
└──────────────────────────────┘

Step 3: Review (/send/review)

┌──────────────────────────────┐
│ ← Back     Send Money   3/4  │
├──────────────────────────────┤
│                              │
│  Review Transfer             │
│  ┌────────────────────────┐  │
│  │ To:     Mama Jasmina   │  │  ← Card with all details
│  │ Country: Serbia 🇷🇸     │  │
│  │ Send:   2,000.00 NOK   │  │
│  │ Receive: 23,400 RSD    │  │
│  │ Fee:    10.00 NOK      │  │
│  │ Total:  2,010.00 NOK   │  │
│  │ ETA:    1-2 business d. │  │
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │   Confirm & Send ✓     │  │  ← Button primary, large
│  └────────────────────────┘  │
└──────────────────────────────┘

Step 4: Success (/send/success)

┌──────────────────────────────┐
│                         4/4  │
├──────────────────────────────┤
│                              │
│           ✅                  │  ← CheckCircle icon, green
│                              │
│     Money on the way!        │  ← Montserrat Bold 20px
│                              │
│   2,000 NOK → 23,400 RSD    │
│   To: Mama Jasmina           │
│   ETA: 1-2 business days     │
│                              │
│  ┌────────────────────────┐  │
│  │       Done              │  │  ← Button, back to home
│  └────────────────────────┘  │
│  ┌────────────────────────┐  │
│  │    Send Another         │  │  ← Button variant="ghost"
│  └────────────────────────┘  │
└──────────────────────────────┘

Error States

Screen 3: ScanQRFlow

Route: /scan

Camera View

┌──────────────────────────────┐
│ ← Back        Scan QR        │
├──────────────────────────────┤
│                              │
│  ┌────────────────────────┐  │
│  │                        │  │
│  │    ┌──────────────┐    │  │  ← Camera viewfinder
│  │    │              │    │  │     with QR frame overlay
│  │    │   QR FRAME   │    │  │
│  │    │              │    │  │
│  │    └──────────────┘    │  │
│  │                        │  │
│  └────────────────────────┘  │
│                              │
│  Point camera at merchant QR │  ← Helper text
└──────────────────────────────┘

After Scan — Bottom Sheet

┌──────────────────────────────┐
│        (camera dimmed)       │
├──────────────────────────────┤
│ ══════════════════════════   │  ← Sheet (shadcn) slides up
│                              │
│  🏪 Ahmetov Kebab            │  ← Merchant name
│     Grønland 12, Oslo        │  ← Address
│                              │
│  Amount:                     │
│  ┌──────────────────┬─────┐  │
│  │         129      │ NOK │  │  ← Input
│  └──────────────────┴─────┘  │
│                              │
│  Fee: 1.29 NOK (1%)         │
│                              │
│  ┌────────────────────────┐  │
│  │     Pay 130.29 NOK ✓   │  │  ← Button accent (#2ecc71)
│  └────────────────────────┘  │
└──────────────────────────────┘

Success

┌──────────────────────────────┐
│                              │
│          🎉                   │  ← Confetti / success animation
│                              │
│      Payment Complete!       │
│                              │
│   129.00 NOK                 │
│   Ahmetov Kebab              │
│                              │
│  ┌────────────────────────┐  │
│  │        Done             │  │
│  └────────────────────────┘  │
└──────────────────────────────┘

Error States

Screen 4: MerchantDashboard

Route: /merchant

┌──────────────────────────────┐
│ Ahmetov Kebab         [⚙️]   │  ← Header + settings
├──────────────────────────────┤
│                              │
│  Revenue                     │
│  [Today] [Week] [Month]      │  ← Tabs (shadcn)
│  ┌────────────────────────┐  │
│  │   12,300 NOK            │  │  ← Card, large text
│  │   47 transactions       │  │
│  │   Fee paid: 123 NOK     │  │
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │  📱 Show My QR Code    │  │  ← Button, opens dialog
│  └────────────────────────┘  │
│                              │
│  Today's Transactions        │
│  ┌────────────────────────┐  │
│  │ Amir K.    129 NOK  ✅  │  │  ← Transaction list
│  │ Sara M.     89 NOK  ✅  │  │
│  │ Edin B.    245 NOK  ⏳  │  │
│  └────────────────────────┘  │
│                              │
│  Settlement: Daily 17:00     │  ← Info text
│  Next payout: 12,177 NOK    │
└──────────────────────────────┘

User Flows

Flow 1: Remittance (New User)

Download → Register (email + phone + password)
  → KYC (upload ID + selfie)
    → Add Payment Method (Norwegian bank/card)
      → Home → "Send Money"
        → Select Recipient (or add new: name + country + bank account)
          → Enter Amount (see live conversion + fee)
            → Review Details
              → Confirm & Send
                → Success (ETA 1-2 days)

ERROR PATHS:
  KYC incomplete → redirect to /kyc
  Insufficient funds → "Top up" dialog
  Country not supported → "Coming soon" message
  Network error → retry toast

Flow 2: QR Payment (Customer)

Home → "Scan QR"
  → Camera opens (request permission if needed)
    → Scan merchant QR
      → Bottom sheet: merchant info + amount input
        → Confirm payment
          → Success + confetti

ERROR PATHS:
  Camera denied → settings redirect
  Invalid QR → "Not a Drop merchant" alert
  Payment failed → retry option

Flow 3: Merchant Onboarding

Download → "Register as Merchant"
  → Business info (name + org.nummer + address)
    → Bank account for settlement
      → KYC (owner ID + selfie)
        → QR Code generated!
          → Print QR or display on screen
            → Start receiving payments

ERROR PATHS:
  Invalid org.nummer → "Check your business number"
  KYC failed → "Contact support"

Design Tokens (Tailwind config)

// tailwind.config.js extension
colors: {
  drop: {
    primary: '#3498db',    // blue - trust
    secondary: '#f1c40f',  // yellow - warmth
    accent: '#2ecc71',     // green - success
    dark: '#2c3e50',       // text
    light: '#ecf0f1',      // backgrounds
    error: '#e74c3c',      // errors
    warning: '#f39c12',    // warnings
  }
}
fontFamily: {
  heading: ['Montserrat', 'sans-serif'],
  body: ['Lato', 'sans-serif'],
}

Responsive Breakpoints

Breakpoint Width Target
default 0-639px Mobile (primary)
sm 640px+ Large phones
md 768px+ Tablets
lg 1024px+ Desktop

Mobile-first: all layouts designed for 375px width, scale up.

Generated: 2026-02-09 by Designer + Product agents (Ollama) + John (orchestration) Next: Builder agent implements in Next.js 16 + shadcn/ui