Design
UI Mockups & Wireframes
UI Mockups & Wireframes
This document provides comprehensive UI mockups and wireframes for Creatimatic's key interfaces. These designs guide the implementation of the vendor dashboard, listing creation flows, and integration test dashboards.
Overview
Creatimatic's UI is designed with three core principles:
- Clarity: Information hierarchy that prioritizes critical metrics and actions
- Efficiency: Streamlined workflows that minimize clicks and cognitive load
- Scalability: Interfaces that work for vendors managing 10 or 1,000+ products
Design System
Color Palette
- Primary: Blue (#3B82F6) - Actions, links, primary CTAs
- Success: Green (#10B981) - Positive metrics, success states
- Warning: Orange (#F59E0B) - Medium priority, warnings
- Danger: Red (#EF4444) - Negative metrics, errors, high priority
- Neutral: Gray scale (#F9FAFB to #111827) - Text, backgrounds, borders
Typography
- Headings: Inter, 600-700 weight
- Body: Inter, 400-500 weight
- Monospace: JetBrains Mono (for SKUs, IDs, code)
Spacing
- Base unit: 4px
- Common spacing: 8px, 12px, 16px, 24px, 32px, 48px
Dashboard Layout Mockup
Main Dashboard Structure
┌─────────────────────────────────────────────────────────────────┐
│ [Logo] Creatimatic [Search] [Notifications] [👤] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Welcome back, [User Name]! 👋 │
│ [Profile Image] │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Today's Sales│ │Total Expenses│ │ Total Sales │ │
│ │ $1,234.56 │ │ $567.89 │ │ $45,678.90 │ │
│ │ ↑ +12.5% │ │ ↓ -5.2% │ │ ↑ +23.4% │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Revenue vs Expense by Category │ │
│ │ [Time Range: 7d | 30d | 90d | 1y] │ │
│ │ │ │
│ │ $10k ┤ │ │
│ │ │ ╭─╮ │ │
│ │ $5k ┤ ╭──╯ ╰─╮ ╭─╮ │ │
│ │ │ │ ╰──╯ ╰─╮ │ │
│ │ $0 ┴──┴───────────────┴───────────────────────────── │ │
│ │ Apparel Home Accessories Electronics │ │
│ │ [■ Revenue ■ Expenses] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────┐ ┌─────────────────────────────────┐ │
│ │ Growth Metrics │ │ Best Sellers │ │
│ │ │ │ │ │
│ │ Weekly Sales │ │ 1. [img] Product A $5,000 │ │
│ │ ↑ +15.5% │ │ 2. [img] Product B $4,200 │ │
│ │ │ │ 3. [img] Product C $3,800 │ │
│ │ Weekly Orders │ │ 4. [img] Product D $3,500 │ │
│ │ ↑ +12.3% │ │ 5. [img] Product E $3,200 │ │
│ │ │ │ 6. [img] Product F $2,900 │ │
│ │ Weekly Listings │ │ 7. [img] Product G $2,600 │ │
│ │ ↑ +8.7% │ │ 8. [img] Product H $2,300 │ │
│ │ │ │ 9. [img] Product I $2,000 │ │
│ │ Path to 1000 │ │ 10. [img] Product J $1,800 │ │
│ │ [████████░░] 450/1k │ │ │ │
│ └─────────────────────┘ └─────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Listing Performance Matrix │ │
│ │ [Filter: Category ▼] [Priority ▼] [Marketplace ▼] [Export]│ │
│ │ │ │
│ │ SKU Name Sales Target Priority Markets │ │
│ │ ───────────────────────────────────────────────────────── │ │
│ │ SKU-001 Product A 100 80 🔴 High [E][S][A] │ │
│ │ SKU-002 Product B 45 50 🟡 Med [E][S] │ │
│ │ SKU-003 Product C 120 100 🟢 Low [E][S][W] │ │
│ │ ... │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘Dashboard Components Breakdown
KPI Cards (Requirement 5.1)
Each KPI card displays:
- Title: Metric name (Today's Sales, Total Expenses, Total Sales)
- Value: Large, prominent number with currency formatting
- Change Indicator: Percentage change with arrow (↑/↓) and color coding
- Green with ↑ for positive changes
- Red with ↓ for negative changes
- Comparison Period: Implicit (vs. yesterday, last week, etc.)
Visual Hierarchy:
┌──────────────────┐
│ Today's Sales │ ← 14px, gray-600
│ │
│ $1,234.56 │ ← 32px, bold, gray-900
│ │
│ ↑ +12.5% │ ← 16px, green-600, bold
└──────────────────┘User Personalization (Requirement 4.1)
The dashboard header includes:
- Welcome Message: "Welcome back, [User Name]! 👋"
- Profile Image: Circular avatar (48px diameter)
- If no image set: Display initials on colored background
- Clickable to access profile settings
- User Preferences: Stored in localStorage/database
- Dashboard layout preferences
- Default time ranges
- Favorite filters
Profile Avatar States:
With Image: Without Image:
┌────────┐ ┌────────┐
│ [Photo]│ │ JD │ ← Initials
└────────┘ └────────┘
(colored bg)Revenue Chart
Interactive chart showing revenue vs. expenses by category:
- Chart Type: Grouped bar chart or line chart
- Time Range Selector: Tabs for 7d, 30d, 90d, 1y
- Categories: Apparel, Home Decor, Accessories, Electronics, etc.
- Legend: Color-coded for Revenue (blue) and Expenses (red)
- Interactivity: Hover to see exact values
- Empty States: Show $0 for categories with no data
Growth Metrics Widget
Displays weekly growth percentages:
- Sales Growth: Week-over-week percentage change
- Order Growth: Week-over-week order count change
- Listing Growth: Week-over-week new listings
- Progress Bar: "Path to 1000 Products" with visual progress indicator
Color Coding:
- Positive growth: Green text with ↑ arrow
- Negative growth: Red text with ↓ arrow
- Zero growth: Gray text with → arrow
Best Sellers Leaderboard
Top 10 products by revenue:
- Product Image: 40x40px thumbnail
- Product Name: Truncated to fit (max 30 chars)
- Revenue: Last 30 days total
- Clickable: Navigate to listing detail page
- Ranking: 1-10 with visual hierarchy
Listing Performance Matrix
Comprehensive table view:
- Columns: SKU, Name, Sales, Target, Priority, Marketplaces
- Row Highlighting:
- Green background: Sales > Target
- Red background: Sales < 80% of Target
- White background: Normal performance
- Priority Indicators:
- 🔴 Very High (red circle)
- 🟠 High (orange circle)
- 🟡 Medium (yellow circle)
- 🟢 Low (green circle)
- Marketplace Icons: Small badges (E=Etsy, S=Shopify, A=Amazon, etc.)
- Filters: Dropdowns for Category, Priority, Marketplace, Date Range
- Export Button: CSV/Excel download
Listing Creation Flow Mockup
Step 1: Basic Information
┌─────────────────────────────────────────────────────────────────┐
│ Create New Listing [X Close] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Step 1 of 4: Basic Information │
│ [████████░░░░░░░░░░░░░░░░░░░░] 25% │
│ │
│ Product Name * │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Custom T-Shirt Design │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ SKU (optional) │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ TSHIRT-001 │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Description * │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ High-quality cotton t-shirt with custom print design. │ │
│ │ Available in multiple sizes and colors. │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Category * │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Apparel > T-Shirts > Unisex ▼ │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Tags (comma-separated) │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ custom, t-shirt, print-on-demand, apparel │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ [Cancel] [Next: Pricing →] │
└─────────────────────────────────────────────────────────────────┘Step 2: Pricing & Inventory
┌─────────────────────────────────────────────────────────────────┐
│ Create New Listing [X Close] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Step 2 of 4: Pricing & Inventory │
│ [████████████████░░░░░░░░░░░░] 50% │
│ │
│ Base Cost (from POD Provider) │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ $12.50 │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Markup Percentage * │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ 100% │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Retail Price (calculated) │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ $25.00 │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Estimated Profit Margin: 50% ($12.50 profit per sale) │
│ │
│ Target Sales (optional) │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ 100 units/month │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ POD Provider * │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ ○ Printful ● Printify │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ [← Back] [Next: Marketplaces →] │
└─────────────────────────────────────────────────────────────────┘Step 3: Marketplace Selection
┌─────────────────────────────────────────────────────────────────┐
│ Create New Listing [X Close] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Step 3 of 4: Select Marketplaces │
│ [████████████████████████░░░░] 75% │
│ │
│ Choose which marketplaces to publish this listing to: │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ ☑ Etsy [Connected ✓] │ │
│ │ Estimated fees: 8.5% ($2.13 per sale) │ │
│ │ Net profit: $10.37 per sale │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ ☑ Shopify [Connected ✓] │ │
│ │ Estimated fees: 2.9% + $0.30 ($1.03 per sale) │ │
│ │ Net profit: $11.47 per sale │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ ☐ Amazon [Not Connected] │ │
│ │ [Connect Amazon Account →] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ ☐ eBay [Not Connected] │ │
│ │ [Connect eBay Account →] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ ☐ Walmart [Not Connected] │ │
│ │ [Connect Walmart Account →] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ [← Back] [Next: Review →] │
└─────────────────────────────────────────────────────────────────┘Step 4: Review & Publish
┌─────────────────────────────────────────────────────────────────┐
│ Create New Listing [X Close] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Step 4 of 4: Review & Publish │
│ [████████████████████████████████] 100% │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Product Preview │ │
│ │ │ │
│ │ ┌──────────┐ │ │
│ │ │ [Image] │ Custom T-Shirt Design │ │
│ │ │ │ SKU: TSHIRT-001 │ │
│ │ └──────────┘ Price: $25.00 │ │
│ │ │ │
│ │ Category: Apparel > T-Shirts > Unisex │ │
│ │ Tags: custom, t-shirt, print-on-demand, apparel │ │
│ │ │ │
│ │ Description: │ │
│ │ High-quality cotton t-shirt with custom print design. │ │
│ │ Available in multiple sizes and colors. │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Publishing Summary │ │
│ │ │ │
│ │ Will publish to: Etsy, Shopify (2 marketplaces) │ │
│ │ POD Provider: Printify │ │
│ │ Target Sales: 100 units/month │ │
│ │ Estimated Profit: $10.37 - $11.47 per sale │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ☐ Save as draft (don't publish yet) │
│ ☑ Publish immediately to selected marketplaces │
│ │
│ [← Back] [Publish Listing] │
└─────────────────────────────────────────────────────────────────┘Listing Creation Flow States
Success State:
┌─────────────────────────────────────────────────────────────────┐
│ ✓ Listing Published Successfully! │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Your listing "Custom T-Shirt Design" has been published to: │
│ │
│ ✓ Etsy - Published successfully │
│ ✓ Shopify - Published successfully │
│ │
│ [View Listing] [Create Another] [Go to Dashboard] │
└─────────────────────────────────────────────────────────────────┘Partial Success State:
┌─────────────────────────────────────────────────────────────────┐
│ ⚠ Listing Partially Published │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Your listing "Custom T-Shirt Design" status: │
│ │
│ ✓ Etsy - Published successfully │
│ ✗ Shopify - Failed: Missing required field "vendor" │
│ │
│ [Retry Failed] [Edit Listing] [Go to Dashboard] │
└─────────────────────────────────────────────────────────────────┘Error State:
┌─────────────────────────────────────────────────────────────────┐
│ ✗ Publishing Failed │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Unable to publish "Custom T-Shirt Design": │
│ │
│ ✗ Etsy - Connection expired. Please reconnect your account. │
│ ✗ Shopify - API rate limit exceeded. Retry in 5 minutes. │
│ │
│ [Retry] [Edit Listing] [Contact Support] │
└─────────────────────────────────────────────────────────────────┘Integration Test Dashboard Mockups
Printify Test Dashboard (Requirement 2.1)
┌─────────────────────────────────────────────────────────────────┐
│ Printify Integration Test Dashboard │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Connection Status │ │
│ │ │ │
│ │ Status: ✓ Connected │ │
│ │ Shop ID: 123456 │ │
│ │ Shop Name: My Print Shop │ │
│ │ Sales Channel: Etsy │ │
│ │ Last Sync: 2 minutes ago │ │
│ │ │ │
│ │ [Disconnect] [Refresh Connection] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ API Test Actions │ │
│ │ │ │
│ │ [List Products] [Create Product] [List Orders] │ │
│ │ [Get Shop Info] [List Blueprints] [Get Shipping Rates] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ API Response │ │
│ │ │ │
│ │ Request: GET /v1/shops/123456/products.json │ │
│ │ Status: 200 OK │ │
│ │ Response Time: 234ms │ │
│ │ │ │
│ │ { │ │
│ │ "data": [ │ │
│ │ { │ │
│ │ "id": "prod_abc123", │ │
│ │ "title": "Custom T-Shirt Design", │ │
│ │ "description": "High-quality cotton t-shirt", │ │
│ │ "tags": ["apparel", "t-shirt"], │ │
│ │ "variants": [ │ │
│ │ { │ │
│ │ "id": 12345, │ │
│ │ "sku": "TSHIRT-S-BLK", │ │
│ │ "price": 2499, │ │
│ │ "is_enabled": true │ │
│ │ } │ │
│ │ ] │ │
│ │ } │ │
│ │ ], │ │
│ │ "total": 1 │ │
│ │ } │ │
│ │ │ │
│ │ [Copy Response] [Download JSON] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Error Log │ │
│ │ │ │
│ │ No errors │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘Integration Test Dashboard - Error State
┌─────────────────────────────────────────────────────────────────┐
│ Printify Integration Test Dashboard │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Connection Status │ │
│ │ │ │
│ │ Status: ✗ Connection Failed │ │
│ │ Error: Authorization token expired │ │
│ │ Last Attempt: 30 seconds ago │ │
│ │ │ │
│ │ [Reconnect Account] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Error Log │ │
│ │ │ │
│ │ [2024-01-15 10:30:45] GET /v1/shops/123456/products.json │ │
│ │ Status: 401 Unauthorized │ │
│ │ Error: Invalid or expired access token │ │
│ │ │ │
│ │ [2024-01-15 10:25:12] POST /v1/oauth/token │ │
│ │ Status: 400 Bad Request │ │
│ │ Error: Invalid refresh token │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘Common Integration Test Dashboard Pattern
All integration test dashboards (Printify, Canva, eBay, Amazon, Walmart) follow this consistent pattern:
Layout Structure:
-
Connection Status Card (top)
- Connection state indicator (✓ Connected / ✗ Disconnected)
- Account/shop information
- Last sync timestamp
- Action buttons (Disconnect, Refresh, Reconnect)
-
API Test Actions (middle)
- Grid of test buttons for common API operations
- Organized by functionality (Products, Orders, Inventory, etc.)
- Visual feedback on click (loading state)
-
API Response Display (middle-bottom)
- Request details (method, endpoint, status code, response time)
- Formatted JSON response with syntax highlighting
- Copy and download options
- Collapsible for long responses
-
Error Log (bottom)
- Chronological list of API errors
- Timestamp, endpoint, status code, error message
- Clear/filter options
- Empty state when no errors
Canva Test Dashboard
┌─────────────────────────────────────────────────────────────────┐
│ Canva Integration Test Dashboard │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Connection Status │ │
│ │ │ │
│ │ Status: ✓ Connected │ │
│ │ User ID: user_abc123 │ │
│ │ Team: My Design Team │ │
│ │ Scopes: design:read, design:write, asset:read │ │
│ │ Last Sync: 5 minutes ago │ │
│ │ │ │
│ │ [Disconnect] [Refresh Connection] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ API Test Actions │ │
│ │ │ │
│ │ [List Designs] [Get Design] [Export Design] │ │
│ │ [List Assets] [Upload Asset] [Create Design] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Design Library Preview │ │
│ │ │ │
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │[D1]│ │[D2]│ │[D3]│ │[D4]│ │[D5]│ │ │
│ │ └────┘ └────┘ └────┘ └────┘ └────┘ │ │
│ │ Design1 Design2 Design3 Design4 Design5 │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘eBay Test Dashboard
┌─────────────────────────────────────────────────────────────────┐
│ eBay Integration Test Dashboard │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Connection Status │ │
│ │ │ │
│ │ Status: ✓ Connected │ │
│ │ User ID: ebay_user_123 │ │
│ │ Marketplace: eBay US │ │
│ │ Scopes: sell.inventory, sell.fulfillment │ │
│ │ Token Expires: in 2 hours │ │
│ │ │ │
│ │ [Disconnect] [Refresh Token] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ API Test Actions │ │
│ │ │ │
│ │ [List Inventory] [Create Offer] [Publish Offer] │ │
│ │ [List Orders] [Get Order] [Update Fulfillment] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Inventory Summary │ │
│ │ │ │
│ │ Total Items: 45 │ │
│ │ Active Listings: 42 │ │
│ │ Pending Orders: 3 │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘Amazon SP-API Test Dashboard
┌─────────────────────────────────────────────────────────────────┐
│ Amazon SP-API Integration Test Dashboard │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Connection Status │ │
│ │ │ │
│ │ Status: ✓ Connected │ │
│ │ Seller ID: A1B2C3D4E5F6G7 │ │
│ │ Marketplace: US (North America) │ │
│ │ Region: https://sellingpartnerapi-na.amazon.com │ │
│ │ Last Sync: 1 minute ago │ │
│ │ │ │
│ │ [Disconnect] [Switch Region ▼] [Refresh] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ API Test Actions │ │
│ │ │ │
│ │ [List Catalog Items] [Get Product] [Create Listing] │ │
│ │ [List Orders] [Get Order] [Update Inventory] │ │
│ │ [Get Fees Estimate] [Get Competitive Pricing] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Catalog Summary │ │
│ │ │ │
│ │ Total ASINs: 128 │ │
│ │ Active Listings: 125 │ │
│ │ Buy Box Percentage: 87% │ │
│ │ Pending Orders: 12 │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ⚠ Note: Amazon SP-API has strict rate limits. Test carefully. │
│ │
└─────────────────────────────────────────────────────────────────┘Walmart Marketplace Test Dashboard
┌─────────────────────────────────────────────────────────────────┐
│ Walmart Marketplace Integration Test Dashboard │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Connection Status │ │
│ │ │ │
│ │ Status: ✓ Connected │ │
│ │ Client ID: walmart_client_123 │ │
│ │ Auth Method: Client Credentials │ │
│ │ Token Expires: in 15 minutes │ │
│ │ Last Sync: 30 seconds ago │ │
│ │ │ │
│ │ [Disconnect] [Refresh Token] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ API Test Actions │ │
│ │ │ │
│ │ [List Items] [Get Item] [Create Item] │ │
│ │ [List Orders] [Get Order] [Update Inventory] │ │
│ │ [Get Shipping Labels] [Update Tracking] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Inventory Summary │ │
│ │ │ │
│ │ Total Items: 67 │ │
│ │ Published Items: 64 │ │
│ │ Pending Orders: 5 │ │
│ │ Unpublished Items: 3 │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘Responsive Design Considerations
Mobile Layout (< 768px)
- Dashboard: Stack KPI cards vertically
- Charts: Full-width with touch-friendly controls
- Tables: Horizontal scroll or card view
- Navigation: Hamburger menu
Tablet Layout (768px - 1024px)
- Dashboard: 2-column grid for KPI cards
- Charts: Full-width with side-by-side legends
- Tables: Condensed columns, hide less critical data
Desktop Layout (> 1024px)
- Dashboard: 3-column grid for KPI cards
- Charts: Full-width with inline legends
- Tables: All columns visible, sortable headers
Accessibility Features
WCAG 2.1 AA Compliance
- Color Contrast: Minimum 4.5:1 for text, 3:1 for UI components
- Keyboard Navigation: All interactive elements accessible via Tab
- Screen Reader Support: ARIA labels for all icons and charts
- Focus Indicators: Visible focus states for all interactive elements
- Alternative Text: Descriptive alt text for all images
Keyboard Shortcuts
Ctrl/Cmd + K: Global searchCtrl/Cmd + N: New listingCtrl/Cmd + D: DashboardCtrl/Cmd + I: IntegrationsEsc: Close modals/dialogs
Interactive States
Button States
Default: [Create Listing]
Hover: [Create Listing] (slightly darker, cursor pointer)
Active: [Create Listing] (pressed appearance)
Disabled: [Create Listing] (grayed out, cursor not-allowed)
Loading: [⟳ Creating...] (spinner icon, disabled)Input Field States
Default: ┌────────────────┐
│ │
└────────────────┘
Focus: ┌────────────────┐ (blue border)
│ | │
└────────────────┘
Error: ┌────────────────┐ (red border)
│ Invalid input │
└────────────────┘
⚠ Error message
Success: ┌────────────────┐ (green border)
│ Valid input ✓ │
└────────────────┘Loading States
Skeleton Screens:
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ ░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░ │
└──────────────┘ └──────────────┘ └──────────────┘Spinner:
⟳
Loading...Progress Bar:
Publishing to marketplaces...
[████████████░░░░░░░░] 60% (3 of 5 complete)Empty States
No Listings
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 📦 │
│ │
│ No listings yet │
│ │
│ Create your first listing to start selling │
│ across multiple marketplaces. │
│ │
│ [Create First Listing] │
│ │
└─────────────────────────────────────────────────────────────────┘No Integrations Connected
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 🔌 │
│ │
│ No integrations connected │
│ │
│ Connect your first marketplace or POD provider │
│ to start managing your products. │
│ │
│ [Connect Integration] │
│ │
└─────────────────────────────────────────────────────────────────┘No Orders
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 📋 │
│ │
│ No orders yet │
│ │
│ Orders will appear here once customers start │
│ purchasing your products. │
│ │
└─────────────────────────────────────────────────────────────────┘Design Resources
Design Tools Used
- Wireframing: Excalidraw, ASCII diagrams
- Prototyping: Storybook
- Icons: MUI Icons (@mui/icons-material)
- Charts: Recharts library
- UI Components: Tailwind CSS, Material-UI (MUI)
Design System Repository
The complete design system including:
- Color tokens
- Typography scale
- Spacing system
- Component specifications
- Animation guidelines
Will be documented in the project's design system repository (link TBD).
Implementation Notes
Component Hierarchy
Dashboard
├── Header
│ ├── Logo
│ ├── SearchBar
│ ├── NotificationBell
│ └── UserProfile
├── WelcomeSection
│ ├── WelcomeMessage
│ └── ProfileAvatar
├── KPISection
│ ├── KPICard (Today's Sales)
│ ├── KPICard (Total Expenses)
│ └── KPICard (Total Sales)
├── RevenueChart
│ ├── TimeRangeSelector
│ ├── ChartCanvas
│ └── ChartLegend
├── MetricsRow
│ ├── GrowthMetrics
│ └── BestSellersLeaderboard
└── ListingPerformanceTable
├── FilterBar
├── DataTable
└── ExportButtonState Management
- Global State: User profile, authentication, integrations
- Local State: Form inputs, UI toggles, filters
- Server State: KPIs, listings, orders (via React Query)
- URL State: Filters, pagination, search queries
Data Fetching Strategy
- Initial Load: Fetch critical data (KPIs, recent orders)
- Polling: Update KPIs every 60 seconds
- On-Demand: Load detailed data when user navigates
- Optimistic Updates: Update UI immediately, sync in background
Testing Considerations
Visual Regression Testing
- Capture screenshots of all major UI states
- Test across different viewport sizes
- Verify color contrast ratios
- Check focus states and keyboard navigation
Component Testing (Storybook)
- Test all component variants
- Test interactive states (hover, focus, active)
- Test with different data scenarios (empty, loading, error)
- Test accessibility features
E2E Testing (Playwright)
- Test complete user flows (listing creation, publishing)
- Test error handling and recovery
- Test cross-browser compatibility
- Test responsive layouts
Future Enhancements
Planned UI Improvements
- Dark Mode: Complete dark theme implementation
- Customizable Dashboard: Drag-and-drop widget arrangement
- Advanced Filters: Saved filter presets
- Bulk Actions: Multi-select with bulk operations
- Real-time Collaboration: Live updates when team members make changes
- Mobile App: Native iOS/Android applications
User Feedback Integration
- Collect user feedback on UI/UX
- A/B test new features
- Iterate based on usage analytics
- Conduct user interviews and usability testing
Support & Resources
For questions about UI implementation:
- Review the Design System Documentation
- Check component examples in Storybook
- Consult the Tailwind CSS Documentation
- Join the design discussion in our Discord community
Last Updated: January 2024
Version: 1.0
Maintainer: Creatimatic Design Team