Serai

Global Trade Platform - Scaling B2B Commerce

The Industry Problem: Why Apparel?

The $1.84 trillion apparel industry is one of the largest and most complex global markets. Despite its scale, the supply chain remains highly fragmented, inefficient, and difficult to navigate for both buyers and manufacturers.

Key Challenges Facing Brands & Manufacturers:

Lack of Transparency – Verifying supplier credentials and ethical sourcing remains a challenge.
Complex Sourcing & Negotiation – Finding the right manufacturer takes time and requires extensive relationship-building.
Limited Digital Transformation – Many industry players still rely on manual processes, slowing down trade transactions.

Serai’s Vision: A Smarter, More Connected B2B Marketplace

Serai Network & Trade was designed to be a B2B supplier-buyer marketplace, bridging the gap between brands and manufacturers through secure, verified trade connections.

✅ Funded by HSBC, Serai aimed to:
✅ Enable Verified Trade – Helping buyers find trustworthy and certified manufacturers.
✅ Streamline Negotiations & Transactions – Reducing sourcing complexity with direct supplier connections.
✅ Scale Beyond Apparel – Starting with fashion before expanding into other industries.

‍

The **$1.84 trillion global apparel industry** is dominated by **China, the U.S., and the EU**, with emerging markets gaining traction due to sustainability trends. Despite its scale, the industry faces **fragmented supply chains and inefficiencies** in supplier-buyer interactions. **Serai aims to bridge these gaps** by enhancing transparency, streamlining trade, and enabling sustainable sourcing.

This comparison highlights the key differences between **traditional apparel sourcing** and **Serai’s streamlined B2B marketplace**, showing how Serai enhances **supplier discovery, transparency, communication, and trade efficiency** while enabling **sustainable and scalable sourcing solutions.**

User Flow Breakdown: How Serai Works

1️⃣ Supplier Experience:

Onboarding & Verification → Suppliers create a profile and get vetted.
Product Listings → Upload and showcase product catalogs for potential buyers.
Connecting with Buyers → Receive RFQs, negotiate, and secure trade agreements.

2️⃣ Buyer Experience:

Searching for Suppliers → Advanced filters for location, material, and compliance.
Messaging & RFQ System → Direct engagement with suppliers for pricing and negotiations.
Finalizing Trade → Secure payments, order tracking, and ongoing communication.

This **user flow diagram** illustrates the **end-to-end journey** of suppliers and buyers within the **Serai Network & Trade platform**. It showcases how users **discover, onboard, and engage in trade interactions**, from **supplier registration** to **product listing, messaging, order placement, and shipment tracking**. The **RFQ (Request for Quote) system** allows buyers to submit requests directly to suppliers, facilitating **seamless negotiations** within the marketplace. The **messaging and order management system** ensures clear communication and transparency, streamlining transactions for a **more efficient B2B sourcing experience**.

‍

The Core Trade Features

Marketplace & Supplier Discovery

🔹 Advanced search & filtering – Find suppliers based on key criteria.

🔹 Smart trade recommendations – Matching buyers with suppliers using early-stage data-driven algorithms.

This image showcases the **Serai Network & Trade platform's supplier search and filtering system** on a laptop screen. The UI displays an **advanced filtering menu**, allowing users to **search for manufacturers based on product type, business type, certifications, facilities, services, and minimum order quantity**. The selected filter category in focus is **Product Type**, specifically within **Womenswear**, featuring multiple options such as **coats, dresses, jeans, knitwear, shirts, and trousers**. The structured layout enhances **supplier discovery efficiency**, enabling buyers to **narrow down results** and find the most suitable manufacturers based on their sourcing needs.

Messaging & Trade Negotiation

🔹 Built-in chat system – Enables seamless supplier-buyer communication.

🔹 RFQ System – Buyers request pricing & terms directly from suppliers.

This image displays the **Serai Network & Trade messaging system**, designed to facilitate **direct communication between buyers and suppliers**. The **left panel** shows a list of recent message threads, allowing users to quickly access their conversations. The **main chat window** highlights a real-time exchange between a buyer and a supplier, where a **product listing (Midi Pencil Skirt)** from the marketplace has been shared within the chat. This feature enables buyers to **negotiate, request quotes (RFQs), and finalize orders seamlessly within the platform**, streamlining the **B2B trade process**. The clean UI supports **attachments, message history tracking, and instant engagement**, ensuring an **efficient and structured procurement experience.**

‍

Trust & Security Enhancements

🔹 Verified supplier profiles – Ensuring credibility through compliance checks.

This image displays a **verified supplier profile** on the **Serai Network & Trade platform**, designed to establish **trust and transparency** between buyers and manufacturers.

The profile provides detailed company information, including:

🔹 Company Overview – Displays business type (Buying House, Manufacturer, Agent), product range, export destinations, and minimum order quantity.
🔹 Company Highlights – Features updates, areas of interest, and customer visits to showcase credibility.
🔹 Product Listings – A portfolio of the supplier’s available products, helping buyers evaluate potential sourcing options.
🔹 Certifications & Compliance – Displays industry-standard certifications such as Sedex, WRAP, and BCI, ensuring ethical and sustainable business practices.
🔹 Network & Connections – Highlights business relationships and activity, providing additional credibility.

By implementing verified supplier profiles, Serai helped brands and buyers quickly assess supplier reliability, reducing the risk of fraud and streamlining trade negotiations. 🚀

‍

Design System & Scalability

Ensuring UI Consistency Across Global Teams

🔹 Built a modular system using Material Design 2 (M2) & Ant Design.

🔹 Implemented Storybook for UI component standardization across teams.

‍🔹 Ensured cross-team consistency for Shanghai & Hong Kong tech teams.

This image showcases the **Storybook implementation** used for **UI component standardization** across the **Serai Network & Trade platform**. The design system was structured to ensure **consistency, scalability, and efficiency** across **multiple teams in Shanghai and Hong Kong**.

Key Elements in the Image:

🔹 Filters & Search Components – Ensuring a seamless supplier-buyer discovery experience.
🔹 Company & RFQ Cards – Standardized layouts for company profiles and request-for-quote interactions.
🔹 Marketplace Cards – Consistent UI elements for displaying products and supplier details.
🔹 Dialogs & Error Handling – Standardized modal interactions and error messaging UX.

Tokenization & Centralized Library:

🔹 Design Tokens were implemented to manage typography, colors, spacing, and component styles, ensuring flexibility across platforms.
🔹 All components were centralized within Storybook, allowing developers and designers to work with a single source of truth, reducing inconsistencies and improving workflow efficiency.
🔹 Modular components were built for reusability, ensuring that any UI updates were seamlessly applied across the entire platform.

By implementing Storybook, the Serai design team accelerated development, improved cross-team collaboration, and ensured a cohesive user experience across all platform interfaces. 🚀

‍

Reflections & UX Impact

Key Metrics & Growth Impact

📌 Grew from 1,000 users to 13,000 users within one year.

📌 Improved supplier discovery speed, increasing engagement rates.

📌 Successfully scaled trade functionalities beyond apparel for future industry expansions.

‍

Challenges Overcome

✅ Aligning UX/UI across distributed teams (Shanghai & Hong Kong).

‍✅ Balancing B2B platform complexity with user-friendly workflows.

‍✅ Building trust through verified supplier profiles & transparent transactions.

‍

Key UX Takeaways

✔ Trust-building in B2B platforms is as critical as usability.

‍✔ Modular UI systems enable seamless expansion into new industries.

✔ A well-structured UX process accelerates platform adoption.

‍

Other projects:

Serai

Medoxie

Time Exchange

This section is a Symbol.
Edit it once, and watch it update across your site.
Like freaking magic.