Every design decision was tied to a number it was meant to move
Instead of redesigning by feel, I paired each interface change with a specific, falsifiable target — so the work could eventually be judged against real traffic, not opinion.
A strong product, undersold by its own homepage
I started by using the site the way a first-time visitor would — landing cold, with no context, trying to work out in five seconds whether Chatwoot was worth a second look. It wasn't obvious. The product had real substance; the homepage didn't get out of its own way to show it.
The hero made a claim but never told the visitor what to do next — no single, obvious primary action above the fold.
Every section competed for attention at once: pricing, features, integrations, and social proof all fighting for the same eye at the same time.
A visitor couldn't answer "what is this and is it for me?" without scrolling and reading — which most visitors simply won't do.
Chatwoot's real differentiators — open source, self-hosting, data ownership — were true and defensible, but they were competing for space with generic SaaS messaging instead of leading the page. The fix wasn't more content. It was ordering and restraint.
Benchmarking against the tools Chatwoot actually gets compared to
I audited Intercom, Zendesk, Crisp, and LiveChat side by side with Chatwoot's own site — not to copy their layouts, but to see what a visitor's expectations would already be before they ever landed on Chatwoot's page.
Polished, expensive-feeling
Confident visual hierarchy and heavy use of product motion, but pricing and self-hosting are nowhere close to the surface.
Enterprise-first
Built for a buying committee, not a solo evaluator — dense with logos and enterprise proof, light on product feel.
Lightweight, playful
Fast to understand, but the simplicity undersells depth — thin on the technical detail developers look for.
Feature-dense
Leads with breadth of features over a coherent story, which reads as capable but generic.
- None of the four incumbents lead with open-source ownership or self-hosting — it's a real, unclaimed wedge for Chatwoot
- All four assume the visitor already wants "a support tool" — none help a developer evaluate build-vs-buy, which is exactly how Chatwoot gets chosen
- Simplicity and data control kept surfacing as the two things closed-source competitors structurally can't offer
From understanding the product to shipping the interface
Six phases, run roughly in sequence but with real back-and-forth between them as each stage surfaced things the last one missed.
Understanding the product
Before touching layout, I went through Chatwoot itself — the inbox, automations, Captain AI, self-hosting docs — to understand what was actually being sold, not just what the marketing copy claimed.
Gap identification
I mapped the existing site section by section against that product understanding, flagging every place the page undersold, buried, or failed to mention something the product was genuinely strong at.
Competitor studies
Intercom, Zendesk, Crisp, and LiveChat gave me a baseline for what "good" looks like in this category, and made Chatwoot's unclaimed positioning — open source, self-host, ownable data — obvious by contrast.
Hypothesis building
Every proposed change was written as a hypothesis with an expected, directional outcome before it went into a wireframe — a discipline check against redesigning things just because they looked dated.
Cooking the UI
Wireframes moved into full visual design in Figma, then into a working Framer build — the fastest path from an approved layout to a page that actually loads and scrolls like production.
Refining
Multiple passes on copy density, spacing, and the specific order of sections — cutting anything that didn't earn its place above the fold.
What the work actually looked like
Before any of this reached Figma polish, it lived on a messy FigJam board — kickstarter notes, a heatmap read of the old site, hypothesis sticky notes, and a full competitor teardown of Intercom, Crisp, Tidio, and LiveChat.
Six changes, each tied to a specific, testable outcome
This is the actual list I designed against — every layout or copy decision on the new site traces back to one of these.
Sharpen the hero to one clear value prop and one primary CTA.
Cut above-the-fold noise so the first screen answers "what is this" in one glance.
Show the product in action near every CTA instead of describing it in text.
Give Captain (Chatwoot's AI agent) a dedicated, prominent section as a key differentiator.
Foreground self-hosting, data residency, and security instead of leaving it to the docs.
Add explicit docs / API entry points in the nav and footer, not just the product.
Reordering the page around how a visitor actually decides
The old page asked visitors to piece the story together themselves. The new IA tells it in the order a skeptical evaluator would actually want it: prove it's real, prove it's credible, show it works, then make it easy to go deeper.
The redesign, live
The shipped site, currently live at chatwoot.framer.website — built from the hypotheses and IA above.
What this project actually taught me
Writing a hypothesis before a wireframe is a good forcing function — it stopped me from redesigning sections just because they looked dated.
Competitor audits are most useful for finding what nobody else is saying, not for finding a layout to copy.
Open source and self-hosting are easy to bury as a footnote — treating them as the headline story was the single highest-leverage change on the whole page.
Shipping without formal validation is a real constraint, not a footnote — it changes how confidently you can talk about "impact," and I'd rather say that plainly than imply numbers I didn't measure.
Interested in working together?
I'm always open to discussing product design work, new projects, or opportunities to collaborate.
Send message