B2B Textile Marketplace - Detailed

Wireframe Specifications
Project Overview

WhatsApp-inspired B2B textile marketplace for India

Design Foundation

Color Palette (WhatsApp-inspired)

 Primary Green: #075E54

 Secondary Green: #128C7E

 Accent Green: #25D366

 Light Background: #ECE5DD

 Chat Bubble (Self): #DCF8C6

 Chat Bubble (Other): #FFFFFF

 Text Primary: #000000

 Text Secondary: #666666

Typography

 Primary: Inter/Helvetica

 Sizes: 12dp, 14dp, 16dp, 18dp, 24dp

Grid System

 8dp base unit

 16dp margins

 56dp touch targets minimum

1. AUTHENTICATION FLOW (5 Screens)

1.1 Splash Screen

Components:

 App logo (centered)

 Company name

 Loading indicator

 Tea-green background (#DCF8C6)

1.2 Phone Number Entry

Layout:

 Header: "Welcome to [App Name]"

 Input field: Phone number with country code

 CTA button: "Send OTP"

 Footer: "By continuing, you agree to our Terms"

1.3 OTP Verification

Components:

 Header: "Enter OTP sent to +91XXXXXXXXX"

 6-digit OTP input boxes

 Timer: "Resend in 00:30"

 CTA: "Verify"

 Edit number link

1.4 Role Selection

Layout:
  Header: "I am a..."

 Two large cards:

o "Buyer" (with icon)

o "Supplier/Manufacturer" (with icon)

 Subtitle explaining each role

1.5 Business Profile Setup

Form Fields:

 Company name

 GST number

 Business type (dropdown)

 Years in business

 Primary products/requirements

 Upload GST certificate

 CTA: "Complete Setup"

2. BUYER HOME DASHBOARD (6 Screens)

2.1 Main Dashboard

Top Bar:

 Search icon (left)

 App logo (center)

 Cart icon with badge (right)

 Profile avatar (right)

Tab Navigation (Bottom):

 Chats (WhatsApp-style icon)

 Products (grid icon)

Content Area:

 Quick actions: "New RFQ", "Browse Products", "Find Suppliers"

 Trending categories tiles

 Recent conversations preview

 Order status cards

2.2 Search & Filters

Search Bar:

 Magnifying glass icon

 Placeholder: "Search fabrics, suppliers..."

 Voice search icon

 Filter icon

Filter Panel:

 Product type (Cotton, Polyester, etc.)

 GSM range slider

 Width options

 MOQ range

 Location filter

 Price range

 In stock toggle

2.3 Quick RFQ Creation

Form Layout:

 Product type selection

 Specification inputs (GSM, width, color)

 Quantity needed

 Target price
  Delivery timeline

 Additional notes

 Attach reference image

 CTA: "Send RFQ to Suppliers"

3. PRODUCT CATALOG (8 Screens)

3.1 Product Grid View

Layout:

 Masonry grid layout

 Product cards with:

o Product image (square aspect ratio)

o Product name

o Price per meter/kg

o Supplier name

o MOQ badge

o Stock status indicator

o Heart icon (favorites)

3.2 Product List View

Layout:

 Linear list layout

 Horizontal product cards:

o Image (left, rectangular)

o Product details (center)

o Price & CTA (right)

o Stock badge overlay

Sections:

 Image carousel with zoom

 Product title & supplier

 Price breakdown table

 Specifications table:

o Fabric type

o GSM

o Width

o Composition

o Color options

 MOQ & stock info

 Supplier rating & reviews

 Action buttons:

o "Add to Cart"

o "Send Inquiry"

o "Chat with Supplier"

o "Request Sample"

3.4 Specifications Table

Data Structure:

Property | Value
------------------|-------
Fabric Type | Cotton
GSM | 180-200
Width | 44-45 inches
Composition | 100% Cotton
Weave | Plain
Color | White, Dyed
Finish | Bleached
3.5 Sample Request Form

Fields:

 Sample quantity needed

 Shipping address

 Special requirements

 Target date

 Contact details

 CTA: "Request Sample"

4. SUPPLIER DASHBOARD (6 Screens)

4.1 Supplier Home

Dashboard Widgets:

 Pending RFQs (count & priority list)

 Today's orders to process

 Payment receivables summary

 Inventory low-stock alerts

 Recent inquiries

Quick Actions:

 "Add New Product"

 "Update Inventory"

 "View Analytics"

 "Manage Orders"

4.2 RFQ Management

RFQ List:

 Buyer company name

 Quantity needed

 Timeline

 Status badges: New, Quoted, Negotiating, Closed

 Action buttons: "View Details", "Send Quote"

4.3 Quote Creation Screen

Form Elements:

 RFQ details (read-only summary)

 Price per unit input

 MOQ specification

 Delivery timeline

 Payment terms options

 Additional notes

 Attach product images/specs

 CTA: "Send Quote"

4.4 Inventory Management

Product List:

 Product image & name

 Current stock quantity

 Stock status indicators

 Last updated date

 Quick edit icons

 Bulk actions toolbar

Add/Edit Product Form:

 Product images upload (multiple)

 Product name & description

 Specifications input

 Pricing tiers

 Stock quantity

 MOQ settings

5. CHAT SYSTEM (10 Screens)

5.1 Chat List (WhatsApp-style)

Layout:

 Search bar at top

 Chat list items:

o Contact avatar (56dp circle)

o Name & company

o Last message preview

o Timestamp

o Unread count badge

o Online status indicator

5.2 Individual Chat Screen

Header:

 Back arrow

 Contact avatar & name

 Company name subtitle

 Phone/video call icons

 Menu (3 dots)

Message Area:
  Date separators

 Message bubbles:

o Buyer messages: white background (#FFFFFF)

o Own messages: light green (#DCF8C6)

o Message status: sent, delivered, read (WhatsApp-style ticks)

o Timestamp

Input Area:

 Text input field

 Attachment icon (camera, gallery, document)

 Send button (WhatsApp green)

5.3 Group Chat (Multi-supplier RFQ)

Participants:

 Multiple supplier avatars

 Group name: "Denim Fabric RFQ - [Date]"

 Participant count

 Group settings access

5.4 Message Types

Text Messages:

 Standard text bubbles

 Emoji support

 Reply/forward options

Product Cards:

 Embedded product preview

 Image, name, price

 "View Details" button

Quote Messages:
  Structured quote format

 Price breakdown

 Accept/Reject buttons

 Counter-offer option

Document Sharing:

 PDF preview

 Download option

 File size indicator

5.5 Quick Replies

Pre-defined Responses:

 "Yes, interested"

 "Send more details"

 "What's your best price?"

 "Can you reduce MOQ?"

 "When can you deliver?"

6. ORDER MANAGEMENT (7 Screens)

6.1 Orders List

Order Cards:

 Order ID

 Supplier/Buyer name

 Product summary

 Order value

 Status badges: Pending, Confirmed, In Production, Shipped, Delivered

 Order date
  Expected delivery

6.2 Order Details

Information Sections:

 Order summary

 Product specifications

 Quantity & pricing breakdown

 Delivery timeline

 Payment terms

 Shipping address

 Documents (PO, Invoice, etc.)

Action Buttons:

 "Track Shipment"

 "Contact Supplier"

 "Download Invoice"

 "Report Issue"

6.3 Order Creation (from Quote)

Workflow:

 Quote acceptance confirmation

 PO generation

 Payment terms selection

 Delivery address confirmation

 Special instructions

 Final order confirmation

6.4 Payment Screen

Payment Options:
  Net 30/60/90 terms

 Advance payment

 LC (Letter of Credit)

 Bank transfer details

6.5 Logistics Tracking

Tracking Interface:

 Progress timeline

 Current status

 Estimated delivery

 Courier details

 Contact delivery person

 GPS tracking (if available)

7. ADDITIONAL SCREENS

7.1 Profile Management

Sections:

 Personal information

 Company details

 Business verification status

 Subscription plan

 Settings

7.2 Settings

Options:

 Notification preferences

 Privacy settings
  Language selection

 Theme (Light/Dark)

 Data usage settings

 Help & Support

7.3 Notifications

Types:

 New RFQ received

 Quote response

 Order updates

 Payment reminders

 Chat messages

7.4 Help & Support

Sections:

 FAQs

 Video tutorials

 Contact support

 Feature requests

 Report issues

Navigation Patterns

Primary Navigation (Bottom Tabs)

1. Chats - Communication hub

2. Products - Catalog browsing

3. Orders - Transaction management

4. Profile - Account settings

 Header-based navigation with back arrows

 Contextual menus (3-dot menus)

 Floating action buttons for primary actions

 Bottom sheets for forms and details

Interaction Patterns

WhatsApp-Inspired Elements

 Long-press for message options

 Swipe gestures for quick actions

 Pull-to-refresh for content updates

 Double-tap for quick reactions

 Status indicators (typing, online, last seen)

B2B-Specific Interactions

 Multi-select for bulk operations

 Swipe-to-quote in RFQ lists

 Pinch-to-zoom for product images

 Drag-and-drop for file uploads

Error States & Empty States

Error Handling

 Network connectivity issues

 Form validation errors

 Payment failures

 Upload errors

Empty States
  No products found

 No chat history

 No orders yet

 Empty cart

Responsive Considerations

Screen Sizes

 Small phones (320dp width)

 Standard phones (360-414dp width)

 Large phones (414dp+ width)

 Tablet considerations for supplier dashboard

Accessibility

 Touch targets minimum 44dp

 Color contrast ratios WCAG AA

 Screen reader compatibility

 Text scaling support