Case study · 02 of 02

Sonar

A freelancer-focused client discovery tool that surfaces and scores early-stage startup leads — built to replace spreadsheets and cold LinkedIn searches with signal-driven outreach.

Product design Prototyping Design system Claude Code 2024 – 2025
Client Self-initiated — personal tool
Role Designer & builder
Duration ~1 sprint
Scope Concept to working product
Sonar — AI-powered B2B lead discovery tool
01

Freelancers spend too much time finding their next client.

Freelance designers and consultants spend a disproportionate amount of time hunting for work. The best leads — early-stage B2B startups with active design needs — are scattered across job boards, LinkedIn, Twitter, and founder directories, with no unified signal of intent or fit.

Most people end up building ad-hoc spreadsheets, doing manual research, and writing outreach from scratch — a process that's slow, inconsistent, and easy to abandon the moment paid client work picks up.

02

Finding the right client at the right moment is a discovery problem, not a network problem.

The missing piece isn't more connections — it's signal. A YC company that just raised a seed round, posted a design role, or started tweeting about shipping their MVP is a strong buying signal. But today, freelancers have no tool that aggregates, scores, and surfaces these signals in one place.

The result: most client acquisition is reactive. You wait for inbound, or you blast cold messages that don't convert because the timing and context are wrong.

The best time to reach out is when a company has just raised, just posted a design role, or just started talking publicly about their product.

— Working thesis
03

Build the tool I'd use myself.

Rather than researching a generic market, I designed around my own workflow. I mapped every step of how I find and qualify a client — from first signal to sent message — and called out every moment of friction, guesswork, or context switch.

The core insight: a good lead needs three things in combination — funding recency, product-market stage, and a visible design gap. Sonar's job is to surface companies where all three align, and to make the outreach step feel like the natural next action, not a separate task.

ICP definition Signal mapping Apollo API Crunchbase Exa API Claude API scoring
04

Three panels. One workflow.

The UI is deliberately minimal: a collapsible sidebar with saved searches and filters, a sortable pipeline list of companies, and a resizable detail panel with an outreach composer. Every interaction is in service of moving a lead from discovery to sent message without ever leaving the page.

Pipeline — company list
01The pipeline list — sortable by score, stage, or recency of signal. Scores are generated via the Claude API from aggregated signals.

The detail panel is where Sonar earns its keep. It surfaces a company's funding history, recent web signals, job postings, and a generated outreach draft — all in a single scrollable pane. The composer is pre-seeded with context, so outreach feels researched instead of templated, and the friction to "just hit send" stays low.

Detail — outreach composer
02The detail panel with outreach composer — context-aware draft, editable inline.
05

Warm neutrals over cold greys.

Sonar's design system is built around a warm neutral palette with a single amber accent — a deliberate choice to feel less like enterprise SaaS and more like a well-designed research tool. Typography pairs Newsreader for editorial credibility with Manrope for interface clarity.

The component set is intentionally narrow: tonal layering instead of borders, restrained motion timing, and a density that respects the information-heavy nature of the product without feeling cluttered. A research tool should feel like a good notebook — not a dashboard.

Newsreader + Manrope Warm neutrals Amber accent Tonal layering Figma component library
06

A working prototype. A validated workflow.

Sonar exists as a functional HTML prototype built with Claude Code — detailed enough to test the full workflow end-to-end, including live scoring via the Claude API. The prototype validated that the three-panel layout and signal-driven scoring model meaningfully reduce the time from "who should I reach out to" to "I just sent a good message."

~3× Faster lead qualification vs. manual research
5 APIs integrated for signal aggregation
1 Sprint from concept to functional prototype

The project also became a live demonstration of the design + Claude Code workflow I offer clients — showing that high-fidelity, testable prototypes don't need months of engineering time to earn their keep.

Previous case study · 01 of 02
Resolutions for Filio

End-to-end resolution workflow for VC fund GPs — from drafting to LP signature collection.