FUJICAI B2B Procurement Platform

Project details

FUJICAI is an intelligent B2B procurement platform within the FII Cloud ecosystem, designed to consolidate electronic component sourcing for small and medium-sized enterprises (SMEs). The project covered procurement, vendor management, logistics, payment, and invoicing subsystems — requiring a scalable design system built across three parallel axes: five user roles, five device sizes, and three listing modes.

Context

Traditional B2B procurement platforms are typically designed around a single buyer-seller relationship. However, real-world SME procurement is more complex — a single account often acts as a buyer, supplier, and platform operator at the same time.

The core challenge of FUJICAI was unifying three user types (demand-side / supply-side / platform-side) along with fragmented workflows — sourcing, quoting, negotiation, ordering, and fulfillment — into a single, operable design system.

Since the platform had to serve both novice sellers (simple SKUs) and large-scale suppliers (complex SKUs), the UX needed to balance: operational flexibility / listing efficiency / role clarity / cross-device consistency.

Problem

At the start of the project, the platform faced three structural problems:

Overlapping role permissions — Five roles (Standard / Supplier / Operator / Developer / Vendor Mgmt) had unclear responsibility boundaries, causing repeated permission disputes during development.

Three coexisting listing modes — Standard, Quick, and Bulk Listing each had distinct tradeoffs, but users could not determine which mode to choose — leading to high listing failure rates and customer support load.

Fragmented procurement flows — Sourcing, quoting, negotiation, and ordering were spread across separate subsystems, with no unified perspective. Users had to navigate between multiple entry points.

Constraints

The design had to operate within four boundary conditions:

ROLES · Five-tier user model — The permission system needed to clearly separate Standard / Supplier / Operator / Developer / Vendor Mgmt to prevent accidental feature triggers.

DEVICES · Five screen sizes — Desktop HD 1440 / Desktop 1024 / Tablet 768 / Mobile 375 / Mobile Small 320 had to share a single grid system.

FLOWS · Dual procurement tracks — The sourcing flow (user → platform → supplier) and the quoting flow (supplier → platform → user) needed to be designed independently while sharing the same underlying logic.

MODES · Three listing modes — Standard (flexible) / Quick (fast) / Bulk (efficient) had to coexist, and the UI needed to guide users to the right choice.

Decisions

Five-tier role model — Roles were designed as a progressive "level-up" hierarchy (Standard → Supplier Mgmt → Operator → Vendor Mgmt → Developer) rather than as parallel permission slices. This gave cross-functional teams a shared vocabulary for "who can do what," reducing permission disputes during development.

Unified 12-9-6-3 grid system — All five screen sizes shared the same column configuration (HD 12c / Desktop 9c / Tablet 6c / Mobile 3c). Responsive design here was not about scaling, but about restructuring by column count.

Three-level UI Guideline — Solution Hub → Product Overview → Product Detail. Cross-functional teams could hand off directly from the documentation — the spec was the handoff, with no need for page-by-page walk-throughs.

Trade-off:

The coexistence of three listing modes was a deliberate tradeoff. The initial proposal was to merge them into a single unified flow to reduce decision cost. But user interviews revealed that the needs of novice sellers and large suppliers diverged too widely — forcing a single mode would have compromised the experience on both ends.

The final decision was to keep all three modes coexisting, but to introduce a wizard at first publish — recommending the appropriate mode based on product count and SKU complexity. "Coexistence" became "guided selection" rather than passing the decision cost to the user.

The cost of this tradeoff: the platform had to maintain three backend listing pipelines, increasing development overhead compared to a single-mode system. In exchange, novice sellers ramped up quickly and large suppliers operated efficiently — neither side was compromised.

Outcome

FUJICAI delivered a complete design system from zero, with the following outcomes:

✓ Complete UI Spec — Three-level guidelines, RWD specifications for five screen sizes, and a Component / Token / Pattern system that engineering teams could implement directly.

↑ Role clarity improved — After the five-tier role model was introduced, cross-functional teams shared a common understanding of "who can do what," reducing permission disputes during development.

↓ Listing confusion reduced — Three coexisting modes combined with guided selection allowed sellers to self-select the right mode, lowering backend support load and customer service tickets.

⚙ Subsystems shipped in sync — Procurement requests, Vendor / Customer Code, logistics, payment, and invoicing subsystems launched with a consistent UI layer.

"Building a B2B procurement design system from zero — across roles, flows, devices, and listing modes."

What's next?

The full case study — including the user role matrix, grid system specifications, three-level UI guideline documents, and cross-device component mappings — is available upon request.

For collaboration or interview opportunities, feel free to contact me via email or LinkedIn. contact@yasminalin.com.tw