Skip to content

UI.md

Latest commit

 

History

History
327 lines (224 loc) · 8.67 KB

UI.md

File metadata and controls

327 lines (224 loc) · 8.67 KB
Raw

UI Design — Assist

References: plan.md, datab.md, spec.md.

Project: Assist Crowdfunding Platform
Font: Montserrat
Primary Color: #8CB468

Secondary Color Palette:

  • Text Primary: #1E1E1E
  • Text Secondary: #5A5A5A
  • Background: #F8F9FA
  • Border: #E5E7EB
  • Success: #9DD596
  • Warning: #F9CF58
  • Error: #E57373
  • Neutral Gray: #F1F3F5

Design Language:

Clean, minimalist, and modular, flat, no shadows, no gradient — focused on readability, trust, and quick task completion. Every page emphasizes transparency and community credibility.

Global UI System

Layout and Grid

  • 12-column responsive grid.
  • Max width: 1280px.
  • Page padding: 2rem (desktop), 1rem (mobile).
  • Section spacing: 80px desktop, 48px tablet, 32px mobile.

Typography

Element Font Weight Size Usage
H1 700 40px Page titles / hero
H2 600 32px Section headers
H3 600 24px Card titles
Body 400 16px Default text
Caption 400 13px Metadata / labels
  • Line height: 1.5
  • Letter spacing: 0.3px
  • Text contrast adheres to WCAG AA.

Buttons

  • Primary: Background #8CB468, text white, rounded-xl.
  • Secondary: Border #8CB468, transparent background, text #8CB468.
  • Destructive: Background #E57373, text white.
  • Hover: 4% darker background.
  • Disabled: opacity 0.5, pointer-events none.

Inputs & Forms

  • Rounded corners (8px), 1px border #E5E7EB.
  • Active: border #8CB468.
  • Placeholder text: #A1A1A1.
  • Error: border #E57373 with small caption below.

Cards

  • White background, border 1px solid #E5E7EB.
  • Rounded-lg (12px).
  • No drop shadows.
  • Spacing inside: 20px.
  • Section dividers: thin horizontal line #F0F0F0.

Navigation

  • Header: Fixed top, white background, logo left, nav center, user/profile right.
  • Footer: 3-column layout, muted text, includes policy, contact, and categories.

Page-Level Blueprints

  1. Landing Page

Goal: Introduce platform, highlight impact, show featured campaigns, top donors, and how it works.

Sections:

  • Hero Section

    • Headline: “One Small Assist. One Big Difference.”
    • Subtext: concise value proposition.
    • Buttons: “Start an Assist” (Primary), “Donate Now” (Secondary).

  • Features Trio

    • Icons + short text (Easy to Use, Fast Payout, Wider Audience).

  • Featured Campaigns

    • 3 campaign cards (Title, Category, Creator, Goal, Progress bar, Donate button).

  • Top Donors

    • Tabs (Daily / Weekly / Monthly) + 3 donor cards each.

  • Trending Campaigns

    • Carousel or 3-column grid of active campaigns.

  • How It Works

    • Four illustrated steps.

  • Why Choose Assist

    • Icons + short description.

  • Blog Snippet + Partners Strip

    • Latest 3 articles, trusted logos.

  • Footer:

    • Compact layout with links to categories, fundraising tips, about, and policies.
  1. Campaign Creation Page

Goal: Allow users to submit campaign data, upload media, and preview before verification.

Structure:

  • Progress Indicator: Step 1 (Info) → Step 2 (Media) → Step 3 (Story) → Step 4 (Preview).

  • Left Column:

    • Campaign Title (input)
    • Category (dropdown)
    • Goal Amount (input, min ₦1,000)
    • Account Type (Individual / NGO)
    • Location (text input)
    • Story (rich text with 5000 char limit + expandable editor)
    • Checkbox: “Allow updates after creation.”

  • Right Column:

    • Primary media upload area (image/video drop zone).
    • Thumbnails for additional 4 images.
    • Live Preview Card: auto-render campaign title, image, category, and progress.

  • Bottom Section:

    • Buttons: “Save Draft”, “Preview Campaign”, “Submit for Verification”.
    • Info cards below for writing tips, media guide, verification process.
  1. Campaign Detail Page (Donation Page)

Goal: Convert interest into donation.

Structure:

  • Left (Main Content):

    • Hero: Mux video or image gallery.
    • Campaign Title + Creator info (username, type, verified badge).
    • Progress bar (raised vs goal).
    • Story text (500 characters collapsed with “Read More”).
    • Share Button (large, inline below story).
    • Updates Feed (chronological list).
    • Recent Donors list (6 entries).
    • Comments & Support (nested threads).
    • Category / Created Date / “Report Campaign” footer row.

  • Right (Donation Sidebar):

    • Always visible box:
    • Username input (or “Anonymous” checkbox).
    • Email input.
    • Amount input + preset quick buttons (₦1,000 / ₦5,000 / ₦10,000 / ₦50,000).
    • Donate button → Paystack modal trigger.
    • Payment note: “Payments securely processed by Paystack.”
  1. User Dashboard

Goal: Unified interface for both creators and donors.

Layout:

  • Sidebar Navigation: Start New Assist, My Donations, Settings, Help & Support, Logout.
  • Profile Header: avatar, name, username, account type badge, verified badge, “Edit Profile” button.

Tabs:

  • Overview:

    • Metrics cards: Total Donated, Total Raised, Active Campaigns, Total Supporters.
    • Recent Activity (colored alert cards).

  • My Campaigns:

    • Table: title, goal, raised, status, actions (Edit, View, Update).

  • My Donations:

    • List: campaign, amount, creator, date.

  • Verification:

    • ID upload (Dojah), BVN verification (Paystack), status badges.

  • Payments & Withdrawals:

    • Balance, Request Payout form (min ₦5,000, 24-hour rule).
    • Withdrawal history table.
  1. Admin Dashboard

Goal: Manage platform data and monitor analytics.

Sidebar Menu: Overview, Campaigns, Users, Payments, Fees & Settings, Reports.

Overview Page:

  • 4 summary cards: Total Raised, Active Campaigns, Active Users, Platform Revenue.
  • Donation Trends Chart (30/90 days, 1 year).

Campaign Management Table:

  • Columns: Title, Creator, Goal, Raised, Status, Actions (Approve/Reject/View/Edit/Suspend).

Fees & Settings Page:

  • Two number inputs for:
    • Platform Fee (%)
    • Withdrawal Fee (%)
  • Save button.
  • Confirmation alert.

Reports Page:

  • Filter by timeframe, category, or campaign status.
  • Download CSV option.
  1. Leaderboard Page

Goal: Showcase gamification and community impact.

Sections:

  • Top Contributors & Campaigns header.

Dual Tabs:

  • Top Donors: Daily, Weekly, Monthly.
  • Top Campaigns: Most Funded, Most Shared, Trending.

Community Impact:

  • Cards: Total Donated, Active Donors, Active Campaigns, Goals Reached.

  • Recent Donations: Live updates feed.

Achievement Badges:

  • (e.g., First Donation, Kind Heart, Streak Master, Champion).

Monthly Challenge:

  • Progress bar showing total vs goal, contributors, and days remaining.

  • CTA footer: “Start Donating Today” / “Create Your Campaign”.

  1. Explore Campaigns Page

Goal: Allow users to browse and discover causes.

Layout:

  • Header filters:

    • Search bar.
    • Category dropdown.
    • Sort (Most Funded / Newest / Verified).

  • Campaign Grid:

    • 3-column desktop, 1-column mobile.
    • Each card: image, title, creator, goal progress, Donate button.

  • Load More button.

  • Sidebar (optional): Filter by account type, status, location.

  1. Blog Page

Goal: Provide educational content and transparency.

Sections:

  • 3-column grid of blog cards (thumbnail, title, date, excerpt, read more).
  • Pagination.

Blog Detail Page:

  • Cover image.
  • Author name and date.
  • Main content (responsive rich text).
  • Related posts section.
  1. Authentication & Verification Pages

  • Login / Register:

    • Minimal two-field layout (phone number + OTP).
    • Twilio integration for OTP.
    • Success redirect to dashboard.

  • Verification Flow:

    • ID Verification: Dojah SDK embedded.
    • BVN Verification: Paystack form.
    • Success → “Verified” badge issued.
  1. System & Error Pages
  • 404 Page: “Campaign Not Found” with CTA to return home.
  • 500 Page: “Something went wrong” with retry button.
  • Maintenance Page: platform downtime notice.
  • Payment Success Page: donation confirmation and share options.
  1. Accessibility & Responsive Rules
  • Font scale: 90% (mobile), 100% (desktop).
  • Minimum touch target: 44px.
  • Use semantic HTML5 tags.
  • Alt text required for all media.
  • Responsive breakpoints:
    • Mobile: ≤ 640px
    • Tablet: 641–1024px
    • Desktop: ≥ 1025px
  1. Global Visual Behavior
  • Hover states: subtle background tint of #F1F3F5.
  • Transitions: all 0.2s ease-in-out.
  • Loading: skeleton shimmer placeholders.
  • Notifications: top-right toast (green success, red error, gray info).
  • Modals: centered with backdrop blur.

Deliverables (Output Expected from Design Stage)

  • Component Library: React/Tailwind spec of all components.
  • Page Wireframes: High-fidelity UI for all screens listed above.
  • Responsive Mockups: Mobile, tablet, and desktop versions.
  • Interaction Map: Navigation and modal flow diagram.
  • Design Tokens: Font, color, border, spacing, and state rules.
  • Prototype Links: Interactive page transitions and donation flow preview.