Design New Features • 7 min read

Modern Design & UX Overhaul

Complete redesign with search-first approach, professional Inter typography, and significantly improved user experience following best practices from Product Hunt, G2, and modern SaaS platforms.

Overview

Today we're launching a major design and UX overhaul that makes ChurnTools significantly easier to use and more professional. The redesign focuses on reducing cognitive load and helping users make decisions faster.

Search-First Approach

Homepage Redesign

The homepage now prioritizes search and discovery:

  • Prominent search bar - Front and center on the homepage, users can immediately search without hunting
  • Quick category pills - One-click access to all categories with tool counts visible
  • Tool count display - Shows total available tools for immediate context
  • Clearer value proposition - "Find Tools to Stop Churn" communicates purpose instantly

Tools Index Improvements

The tools listing page now makes comparison effortless:

  • Sticky filter bar - Filters stay accessible as you scroll through results
  • Category pills instead of dropdown - All options visible at once, no hidden choices
  • Large, scannable cards - Easy to compare tools at a glance
  • Consistent information hierarchy - Logo → Name → Category → Description → Price → Trial → Tags → CTA
  • Results count - "Showing 12 of 12 tools" provides context

Professional Typography

Inter Font Family

Upgraded from system fonts to Inter for better brand communication:

  • Designed for digital interfaces - Optimized specifically for screen reading
  • Professional trust signal - Same font used by Linear, GitHub, Vercel, and Stripe
  • Exceptional legibility - Clear at all sizes from 12px to 48px
  • Complete weight range - 400-900 weights for proper visual hierarchy
  • Tighter letter-spacing - Modern feel with -0.02em on headings

Typography Hierarchy

  • Headings: 900 weight + tight tracking = confidence
  • Body text: 400-500 weight = readable without being aggressive
  • Pricing: 700-800 weight = emphasis where it matters
  • CTAs: 600 weight = clickable but not shouty

UX Improvements

"Don't Make People Think" Principles

Applied Jakob Nielsen's usability principles throughout:

  • Obvious choices - Category pills show all options, nothing hidden in dropdowns
  • Visual hierarchy - Important information (price, trial availability) gets prominence
  • Consistent patterns - Same card structure everywhere for familiarity
  • Clear feedback - Active states, hover effects, and results counts
  • Reduced decisions - One clear action per context, no competing CTAs

Pricing Transparency

Pricing information is now visible everywhere:

  • Large, bold pricing on tool cards ($74/month)
  • Trial availability with green badges (14-day trial)
  • Free tier indicators for freemium products
  • No mystery pricing - users can compare instantly

Better Empty States

Improved messaging when no results are found:

  • Helpful icon and clear explanation
  • Context-aware messages based on filters
  • Clear "Clear Filters" action button
  • Encourages next steps instead of dead ends

Design System Updates

Visual Improvements

  • 2px borders - Better definition and modern feel
  • Rounded-xl corners - Softer, more approachable aesthetic
  • Better hover states - Combined color change + shadow for clear interactivity
  • Consistent spacing - Uniform padding and margins throughout
  • Improved contrast - Better readability and accessibility

Card Design

Tool cards now feature:

  • Logo + name + category in header
  • Description with line-clamp for consistency
  • Pricing section with dividers for easy scanning
  • Tags limited to 3 with "+X more" indicator
  • Clear CTA button in footer with contrasting background
  • Featured badges for promoted tools

Technical Implementation

Font Loading

Optimized Inter font loading for performance:

  • Preconnect to Google Fonts for faster loading
  • Only load weights actually used (400-900)
  • display=swap to prevent layout shifts
  • Proper fallback stack (system-ui, -apple-system, etc.)

Responsive Design

Mobile-first approach with breakpoints:

  • 1 column on mobile
  • 2 columns on tablets
  • 3 columns on desktop
  • 4 columns for compact cards (recently added)

Inspiration & Best Practices

Product Hunt Pattern

  • Clean cards with clear pricing
  • Upvote/featured badges
  • Scannable grid layout

G2/Capterra Pattern

  • Comparison-ready information
  • Filter pills for quick access
  • Trial and pricing transparency

Stripe/Linear Pattern

  • Modern spacing and typography
  • Purposeful design without clutter
  • Professional color usage

Why This Matters

We're committed to making ChurnTools the best way to discover and evaluate churn reduction tools. These changes reflect that commitment:

  • Search is immediate - Not buried in navigation
  • Pricing is transparent - Not hidden behind "Contact Us"
  • Filtering is visible - Not in dropdowns that require clicks
  • Cards are scannable - Not text-heavy walls of information
  • Actions are clear - Not ambiguous or competing

Performance Impact

The design improvements also enhance performance:

  • Reduced cognitive load = faster decision making
  • Visible filters = fewer page loads
  • Clear pricing = less back-and-forth
  • Better typography = improved readability and trust
Back to all updates