variant-ui

### UI Prototype Comparison for 'Pricing Page' Feature in Sortd for Sales

**Prototype 1: Minimalist Card Layout**
*Wireframe:* A clean grid of 3 pricing cards (Basic, Pro, Enterprise) with hover effects. Each card displays price, features, and a prominent CTA button.
*Key Elements:* Card shadows, rounded corners, monochrome color scheme (#F5F5F5, #FFFFFF, #333333).
*User Flow:* User clicks 'Get Started' → redirected to checkout with pre-selected plan.
*Evaluation:* High usability (familiar pattern), low conversion (lack of urgency).

**Prototype 2: Tiered Table Layout**
*Wireframe:* A comparative table with columns for features, Basic/Pro/Enterprise plans, and a sticky CTA column.
*Key Elements:* Zebra-striping, color-coded highlights (#E3F2FD for highlights), sticky headers.
*User Flow:* User scrolls → 'Compare Plans' button appears → redirects to detailed comparison page.
*Evaluation:* High conversion (clear comparisons), moderate usability (complex layout).

**Prototype 3: Dynamic Slider Layout**
*Wireframe:* A single pricing slider with adjustable features (e.g., 'Number of Users') and real-time price updates.
*Key Elements:* Interactive slider, live price calculator, gradient background (#4A148C → #7B1FA2).
*User Flow:* User adjusts slider → CTA updates dynamically → 'Custom Quote' option appears.
*Evaluation:* High visual appeal, low usability (unfamiliar pattern).

**Recommendation:** Prototype 2 (Tiered Table Layout) is the best approach for Sortd’s pricing page. It aligns with Sortd’s B2B focus on clarity and comparison, and the sticky CTA column ensures high conversion. The color scheme (#E3F2FD) matches Sortd’s professional aesthetic while highlighting key elements. Deploy this prototype first, then A/B test against Prototype 1 for incremental improvements.