Supplier Modal — 3 Redesign Approaches

The core problem: the two tabs (Full Order / By Item) are mutually exclusive but look like equals. Choosing one should lock out the other. Here are three ways to fix that.

A

Two-Step Wizard Recommended

The modal opens on a "choose your method" screen with two large cards. Clicking one card transitions into that mode — no tabs ever appear. A small "← Change method" back link lets you restart if needed.

📦
Full Order
One set of suppliers for everything
🔀
By Item
Different suppliers per item
↓ clicking a card opens that flow directly

Pros

  • Zero ambiguity — only one path at a time
  • Clean separation of concerns
  • Escape hatch via back link

Cons

  • Extra click before seeing suppliers
B

Wizard with Step Indicator

Same two-step wizard as A, but with a visible step breadcrumb at the top: ① Choose Method → ② Select Suppliers. Adds visual progress context for users who need orientation.

1
Choose Method
2
Select Suppliers
step indicator lives in the modal header

Pros

  • Users see where they are in the flow
  • Familiar wizard UX pattern

Cons

  • Slightly more UI chrome
  • Overkill for a 2-step flow
C

Prominent Mode Toggle (No Wizard)

Keep a single-screen modal but replace the tabs with a large segmented toggle at the top. Switching mode clears all selections and shows a confirmation toast. Less structural change, but still communicates mutual exclusivity.

📦 Full Order
🔀 By Item
⚠ Switching clears your current selections

Pros

  • Fewest changes to existing code
  • Both options always visible

Cons

  • Still looks like "tabs" — same confusion risk
  • Warning toast feels like an afterthought