How I Improved Search UX for a $100M Loan Company (Claude Code AI)

Sometimes the simplest problems eat the most time. DoubleClose, a company facilitating over $100 million in real estate transactions, had a massive table listing all 48 states they serve. It looked awful, killed mobile experience, but served a crucial SEO purpose - letting Google know they had dedicated pages for each state.

Traditional web development would mean hiring a developer, going through design iterations, and waiting days or weeks. Instead, I spent an afternoon with Claude Code and delivered a solution that improved user experience while maintaining SEO value.

Here's how AI helped me build a custom state selector that replaced their ugly table with an interactive map - in just a few hours instead of weeks.

The Challenge: Balancing SEO and User Experience

DoubleClose provides transactional funding for real estate wholesalers across 48 states. Their Carrot-based website had individual pages for each state they serve - crucial for local SEO rankings. But the way they displayed this information was... painful.

Picture this: A massive HTML table with 48 rows. Three columns: State name, "Learn More" link, "Apply Now" button. On mobile? You're scrolling forever. On desktop? It's a wall of repetitive text that screams "we built this for Google, not you."

The challenge was clear: How do you maintain SEO value (Google needs to see those 48 state links) while creating an experience that doesn't make visitors want to leave immediately? This is where Claude Code entered the picture.

The Solution: Interactive State Selector

Instead of fixing the table, I proposed replacing it entirely. My vision: An interactive SVG map for desktop users showing all 48 states, with a smart dropdown for mobile. Click any state, go directly to that state's funding page. Simple, clean, effective.

But here's where it gets interesting. Building this from scratch would typically involve:

• Finding or creating SVG paths for all 50 US states
• Making it responsive and interactive
• Building a mobile-friendly alternative
• Ensuring it works as a simple HTML embed (no framework dependencies)
• Maintaining SEO value with proper links

This is exactly the kind of tedious, detail-oriented work that AI excels at. Time to put Claude Code to work.

Building With Claude Code: The Process

Working with Claude Code on this project felt like pair programming with a developer who never gets tired of revisions. Here's how the conversation evolved:

What would have taken days of back-and-forth with a traditional developer happened in REAL-TIME. Each iteration took minutes, not hours. The AI understood context, maintained consistency, and produced production-ready code.

The Final Product: Clean, Fast, SEO-Friendly

The final solution delivered everything DoubleClose needed and more:

Desktop Experience:

• Interactive SVG map - Users can visually see all states and click to navigate
• Hover effects - States change color on hover, providing instant feedback
• Disabled states clearly marked - New York shows as grayed out since they don't serve that state
• Zero dependencies - Pure HTML/CSS/JS that works anywhere

Mobile Experience:

• Smart search dropdown - Type "TX" or "Texas" to find states instantly
• Clean, touch-friendly interface - Large tap targets, smooth scrolling
• No results handling - Clear messaging when searches don't match

Most importantly, Google still sees all 48 state links for SEO purposes, but users get a VASTLY improved experience. The embed loads instantly, works on any device, and actually helps visitors find what they're looking for.

The Technical Details That Matter

The beauty of this solution isn't just the visual improvement - it's the technical elegance. Here are the key implementation details:

// Smart responsive design - no media query hacks
.desktop-view { display: block; }
.mobile-view { display: none; }

@media (max-width: 768px) {
  .desktop-view { display: none; }
  .mobile-view { display: block; }
}

// Search functionality that just works
function filterStates() {
  const searchTerm = searchInput.value.toLowerCase();
  // Search both full names and abbreviations
  if (stateName.includes(searchTerm) || 
      stateAbbr.includes(searchTerm)) {
    // Show state
  }
}

The entire embed is self-contained in a single HTML file. No build process, no dependencies, no maintenance headaches. Just drop it into any page and it works. This is crucial for Carrot sites where you often have limited control over the hosting environment.

For more examples of building embeddable tools, check out my article on creating standalone optimization tools.

🚀 The key was starting with working code and using AI to rapidly customize it. Claude Code excelled at adding the search functionality, implementing responsive behavior, and customizing the styling to match DoubleClose's needs.

Real Business Impact: Beyond the Code

Let's talk about what this actually means for DoubleClose's business:

Time Savings:

• Traditional development: 2-3 weeks minimum
• With Claude Code: 3-4 hours
• Cost savings: $3,000-5,000 in developer fees

User Experience Improvements:

• Mobile users can find their state in seconds, not minutes
• Desktop users get visual context - they can SEE where states are
• Page load time reduced (one embed vs. massive table)
• Professional appearance that builds trust

But here's the REAL win: DoubleClose maintains full SEO value while dramatically improving user experience. Google still sees all 48 state links. Users see a clean, modern interface. It's a rare case where you don't have to choose between SEO and UX. 💰

This kind of rapid problem-solving is exactly what I did when recovering million-dollar revenue through automation. Sometimes the biggest wins come from fixing the "small" problems that everyone else ignores.

Lessons Learned: When AI-Built Embeds Work Best

Not every web component should be built with AI. Here's when this approach shines:

Perfect Use Cases:

• Well-defined requirements ("interactive state selector")
• Standard patterns (maps, dropdowns, search)
• Need for rapid iteration and testing
• Self-contained components with no dependencies
• When you need both desktop and mobile versions

Less Ideal Scenarios:

• Complex state management or real-time data
• Heavy animations or 3D graphics
• Components requiring backend integration
• When you need pixel-perfect custom designs

The key is recognizing when AI can accelerate development without sacrificing quality. For standalone embeds that solve specific problems? AI can deliver professional results in hours instead of weeks.

This mirrors the approach I used in achieving 5x conversion improvements - let AI handle the heavy lifting while you focus on strategy and implementation.

Beyond State Selectors: Where Else This Works

This pattern of AI-assisted embed development applies to countless scenarios:

• Store locators: Interactive maps with search and filtering
• Product configurators: Visual builders for customizable products
• Pricing calculators: Dynamic tools that update in real-time
• Service area maps: Show coverage zones with different styling
• Interactive FAQs: Searchable accordions with categorization

The methodology stays the same: define clear requirements, let AI generate the base code, iterate until perfect, and deploy as a simple embed. No complex build process, no maintenance nightmares.

Want to see more examples? Check out how I used similar techniques for automating SEO content generation - same principle of letting AI handle the repetitive work.

The Future of Web Development

DoubleClose's state selector represents a fundamental shift in how we approach web development challenges. What once required weeks of developer time and thousands in costs can now be built in an afternoon.

The magic isn't that AI replaces developers - it's that AI amplifies what one person can accomplish. I brought the vision and user experience knowledge. Claude Code brought the technical implementation speed. Together, we created something that improves both user experience AND maintains SEO value.

As AI tools evolve, the winners will be those who learn to leverage these capabilities for rapid problem-solving. Not as a replacement for human creativity, but as a force multiplier that turns ideas into reality at the speed of business. The future isn't about AI OR humans - it's about AI AND humans working together to solve real problems, fast. 🚀