Plan Selection Step — Mobile Prototypes (390px viewport)
Round 4 — Responsive Production Build

One variation designed to work at both 390px mobile and 1200px desktop. Renders inside WordPress (no mock header/progress bar). Uses Poppins throughout, white background, fully responsive layout.

Variation 10

10
Responsive — Mobile + Desktop
V8 features, fully responsive layout
Mobile: stacked cards, full-width CTA bar, sticky type toggle. Desktop: 3-column card row (max 1100px, centered), Level 10 lifted and crowned with "Recommended" ribbon, FAQ constrained to 820px reading width. Comparison table, plan type toggle, promo FAB + bottom-sheet modal. No mock site header. Poppins throughout.
3-col desktop layout L10 recommended ribbon Mobile-first responsive Sticky type bar Promo FAB + modal Sticky CTA (safe-area) WordPress-ready
Round 3 — V4 + Plan Toggle + Promo Code

All three build on V4 (stacked gradient cards). New features added: No Contract vs. Best Value plan type toggle (swaps all prices and fees), and a promo code entry. Each variation positions and styles these features differently.

Variations 7 — 9

7
Toggle Above, Promo Below
Pill toggle above cards, expandable promo link below
Animated pill-style toggle (No Contract | Best Value) centered above the plan stack. Prices fade-slide on switch. Commitment badge shown on each card header. "Have a promo code?" expandable link below the cards, above the comparison table.
Pill toggle Fade-slide price animation Commit badge on cards Expandable promo field Sticky CTA bar
8
Sticky Header Toggle + Promo Modal
Segmented control in sticky dark bar, bottom-sheet promo modal
Dark sticky bar below the progress steps houses a segmented control toggle. Promo code is a red tag-icon floating action button (FAB) that opens a slide-up bottom-sheet modal. A green dot confirms an applied code on the FAB. Cards update instantly on toggle.
Sticky dark control bar Segmented control Slide-up modal Promo FAB + green dot Sticky CTA bar
9
Integrated Toggle + Inline Promo
Card-style toggle with savings badge, always-visible promo
Prominent two-panel toggle card below the heading. Best Value tab has a "Save 20%" badge and a green savings callout strip. Inline promo input always visible below toggle. Best Value shows strikethrough old prices on each plan card to reinforce savings.
Card-style toggle Save 20% badge Strikethrough old prices Always-visible promo Sticky CTA bar
Round 2 — Combined Best Features

All three use: gradient plan headers (from R1-V1) + sticky bottom CTA bar (from R1-V3) + V2 comparison table. They differ in how cards are laid out and navigated.

Variations 4 — 6

4
Stacked Gradient Cards
All 3 gradient cards stacked, radio select
Full-width gradient cards stacked vertically. Level 10 first with red gradient. Radio dot on each header. Tapping card or Select button updates the sticky CTA bar. L10 hero callout for free friend perk.
Gradient headers Radio select L10 hero callout Collapsible compare Sticky CTA
5
Tab Switcher + Gradient Cards
Sticky tabs, one large gradient card at a time
Sticky pill tabs at top (Level 10, Premium, Basic, Compare). Each tab reveals a single large gradient card with dominant price. Compare tab shows full table with quick-select CTAs. Sticky CTA always visible.
Sticky pill tabs Large gradient cards 60px price display Compare tab Sticky CTA
6
Expandable Gradient Cards
Compact gradient bars that expand on tap
Compact cards with gradient header bar (name + price + arrow). Level 10 pre-expanded. Tapping collapses/expands, one card at a time. Selected card gets red border + glow. Sticky CTA updates on selection.
Gradient compact bars Accordion expand L10 pre-expanded Red glow on selected Sticky CTA
Round 1 — Original Variations

Initial exploration: three distinct approaches to the plan selection step, each drawing from different reference patterns.

Variations 1 — 3

1
Conservative
Stacked cards, dark gradient on Level 10
Closest to current FIT layout with PF improvements. Level 10 reordered first with red-to-black gradient. Features hidden behind See Details toggle.
L10 gradient headerSee Details toggleCollapsible compare
2
Full PF Clone
Sticky pill tabs, one plan at a time
Planet Fitness pattern. One plan per tab. Price dominant. Compare tab reveals full table. Selection notice per card.
Sticky pill tabsPrice dominantCompare tab
3
Hybrid
Compact radio cards, sticky bottom CTA bar
Compact radio-style cards with expandable details. Sticky bottom bar shows selected plan and price with a live Continue button.
Radio selectExpandable detailsSticky CTA