UX Exploration & Design Systems

Pricing Cycle Selector Prototypes

Replacing the cramped 6-wide pill nav with ergonomic, high-converting selector patterns. Test all 4 interactive designs below with live simulated pricing feedback.

★ Slider-Chips Hybrid 1. Stepped Slider 2. Minimal Chips 3. Dropdown Picker Live on Homepage
★ Official Design • Live in Production

Connected Slider-Chips Rail

Combines the progressive timeline psychology of the stepped slider with the instantaneous 1-click ergonomics and scannability of chips.

🗓️ Monthly (Standard Rate)
Shared Basic
$10.00/mo
$10.00 billed monthly
Shared Plus
$15.00/mo
$15.00 billed monthly

Why Combining Them Wins

  • Dual Interaction Modes: Users can either drag across the timeline rail or tap any discrete chip button with 1 click.
  • Progressive Connected Rail: The glowing gradient track connects all terms, visually reinforcing the compounding value of multi-year commitments.
  • Dedicated Savings Tier Sub-Labels: Clear discount percentage indicators sit directly outside and underneath each capsule pill, providing instant scannability while keeping the selection pills uncluttered.

Ergonomic & Mobile Architecture

  • Desktop displays all 6 chips connected across a unified progress rail.
  • On mobile and tablets, the chips automatically adapt into a comfortable grid while maintaining large 48px touch targets and full keyboard arrow navigation.
Style 1

Interactive Stepped Rail Slider

A magnetic stepped slider where sliding to the right visibly correlates with increasing duration and escalating savings (up to 25%).

Commitment Duration

Slide right for deeper multi-year savings (up to 25% off)

🗓️ Monthly (Standard Rate)
Shared Basic
$10.00/mo
$10.00 billed monthly
Shared Plus
$15.00/mo
$15.00 billed monthly

Key UX Strengths

  • Spatial Intuition: Moving a slider along a horizontal timeline naturally conveys the concept of time commitment.
  • Psychological Incentive: Watching the discount badge upgrade in real-time creates a gamified incentive to choose 1-year or 3-year commitments.
  • Flawless Mobile Ergonomics: The range slider occupies a constant height and uses full touch target width with zero layout wraps.

Design Considerations

  • Requires accessible keyboard arrow handlers for non-mouse users (fully built in).
  • Tick buttons are provided below the track so users can also click directly on any term.
Style 2 • Clean & Modern

Streamlined Minimalist Chips

Replaces the visual noise of redundant badges with high-contrast micro-tags only on high-value terms, accompanied by a dynamic contextual status bar.

Billed Monthly • Switch to annual or multi-year terms to save up to 25%
Shared Basic
$10.00/mo
$10.00 billed monthly
Shared Plus
$15.00/mo
$15.00 billed monthly

Key UX Strengths

  • Zero Clutter: Removes the 6 repetitive "Save X%" pills that previously dominated the navbar.
  • Focused Hierarchy: The eye is immediately drawn to the 1Y, 2Y, and 3Y options with the glowing golden star micro-badge.
  • Dynamic Messaging: The callout box updates with targeted value propositions on each click.

Design Considerations

  • On narrow screens, the chips gracefully wrap onto two clean rows.
  • Requires good button spacing to prevent accidental taps on touch screens.
Style 3 • Compact & Ultra-Clean

Floating Dropdown / Popover Picker

A minimal footprint selector that opens a rich popup menu detailing the full cycle invoice total, per-month breakdown, and savings badges.

Shared Basic
$10.00/mo
$10.00 billed monthly
Shared Plus
$15.00/mo
$15.00 billed monthly

Key UX Strengths

  • Maximum Space Economy: Only occupies a compact 460px button trigger on desktop and mobile.
  • Rich Information Density: The popover list has room to communicate both the cycle billing amount (e.g. $270.00 every 3 years) and the normalized monthly equivalent ($7.50/mo).
  • Total Screen Agnostic: Performs identically on ultra-compact phones and high-resolution desktops.

Design Considerations

  • Options are hidden until user clicks the trigger, meaning all 6 terms aren't visible at a single glance.
Head-to-Head Comparison

Design System Trade-off Matrix

A systematic UX comparison of all three prototypes against the previous 6-wide pill nav.

Design Pattern Space Efficiency Discount Psychology Mobile Ergonomics Recommendation
★ Slider-Chips Hybrid High (Adaptive rail) Outstanding (Connected compounding rail) Superior (Tap or slide) Overall Winner ★★★
1. Stepped Rail Slider High (48px fixed) Outstanding (Gamified) Flawless (Touch rail) Top Pick ★
2. Minimalist Chips Medium (Flows cleanly) High (Star micro-tags) Good (Wraps cleanly) Strong Runner-up
3. Dropdown Popover Maximum (Compact trigger) Medium (Hidden until open) Rock Solid (Universal) Great for Minimalist UI
Previous: 6-Wide Pill Nav Poor (Cramped width) Fair (Repetitive clutter) Poor (Squished on mobile) Needs Replacement
Test Prototypes Live on the Homepage »