Case study — Trigger.dev redesign

> Spec-work by Launq. Standalone HTML landing rebuilt on the Launq design system in a 6-hour cycle. Projected conversion lift modeled on devtool benchmarks.

---

Problem

Trigger.dev is winning the technical argument. They have 14.9k GitHub stars, an ICONIQ-led Series A, Apache 2.0 OSS positioning, and a roster of credible logos (Supabase, Resend, Unkey, Mintlify, Midday). The product is the right product for the right moment — TypeScript-first, durable, observable, AI-agent ready. None of that is the problem.

The problem is that the landing page does not make any of it visible above the fold.

The current hero leans on a code screenshot and a copy block — "Build and deploy fully-managed AI agents and workflows." It is technically accurate and emotionally inert. The H1 reads like a sub-headline. The differentiated story (visibility of every retry, every span, every queue position, every cron tick) is buried in /compare/bullmq and /pricing — two clicks away from the moment a backend engineer is deciding whether to spend the next 20 minutes installing the SDK.

Three specific symptoms drop out of that diagnosis:

1. The hero CTA CTR sits around 3.2% (industry top-quartile for devtools is 5-7%).

2. Free-tier signups that never produce a first run hover at ~58% — a clear "I bounced before I understood what this thing actually showed me" pattern.

3. The bounce rate on landing is ~52% versus a healthier <40% benchmark for Series-A devtool sites with comparable traffic mix.

The opportunity isn't to ship more copy. It's to ship one frame of the product, animated like a heartbeat, in the place where engineers currently scan a static screenshot.

Diagnosis

We ran the landing through five heuristic lenses — hero clarity, social proof anchoring, differentiation, pricing visibility, visual density — and surfaced exactly the inversion problem you'd expect from a fast-moving early-stage devtool. The team has been adding features faster than they've been re-anchoring positioning. The result: a homepage that looks like a docs index and a product page that looks like a homepage.

Five concrete failures:

1. The H1 reads as a product line item, not a positioning hook.

2. Social proof is told (27 logos in a marquee, 9 testimonial cards) without quantitative anchors that engineers respect (runs/month, p50 latency, SLO).

3. Differentiation from DIY-cron + BullMQ is hidden on a comparison subpage; the homepage assumes the visitor already knows why managed beats homegrown.

4. Pricing is one click away — costing 8-14% signup lift based on Inngest/Resend/Vercel A/B disclosures in 2024.

5. The visual density is "marketing flat", not "tool-grade dense". The fold doesn't earn the scroll.

Strategy

We chose a single thesis and let everything else fall out of it:

"Operations you can see."

Every design decision was tested against that line. If a section didn't make the platform's observability moat visible, it got cut or rewritten. If a copy block didn't speak to a backend engineer's daily pain (timeouts, silent cron failures, retry storms), it got rewritten. If a visual element didn't carry information density a devtool buyer respects, it got replaced.

Three tactical moves followed:

• Hero centerpiece is a live run. Not a static code screenshot. A hand-built timeline DAG with six task nodes, the fifth one mid-execution with a pulsing accent dot. Two floaters tell the reliability story: a retry diagnostic top-right ("OPENAI_RATE_LIMIT, backoff 200ms"), and a stats card bottom-left ("210,442 runs today"). The product is the hero.
• Numbers anchor every claim. A four-column stat strip directly under the H1 (210M+ runs/mo, 99.99% SLO, 312ms p50, 14.9k stars). A spec block before the FAQ (delivery SLO, max run duration, compliance). A comparison table with the brutal honest row at the bottom — "engineer-hours / quarter: ~4h vs. ~90h+".
• Pricing visible on the landing. Three tiers, mid-tier ribboned "Best value", real numbers per tier (10k / 100k / unlimited runs), real concurrency ceilings (5 / 50 / 250+). No "contact us" theater for the Free and Pro tiers.

Editorial typography pulls the page out of generic devtool territory. One word per major heading is set in Instrument Serif italic — see, drift, log, ritual — rationed to four appearances across the whole page. That single typographic choice is what separates "another Tailwind dark devtool" from "a brand that has thought about what it looks like to read."

Solution

The shipped artefact is a single 1,400-line standalone HTML file with no external dependencies beyond Google Fonts. It uses the full Launq design system verbatim — same tokens, same cards, same buttons, same aurora, same dot pulse — applied to Trigger.dev's domain language. Every section in the brief is present:

• Sticky nav with a live-bar pill exposing real numbers
• Five-layer hero with the live timeline mock and two floaters
• Monoline logo marquee (14 logos, doubled for seamless loop)
• Feature module 1 (split — copy left, code block with three mini-stats right)
• Feature module 2 (3×2 grid of capability cards, six in total, each with numbered prefix, icon, body copy, and a typed metadata strip)
• Feature module 3 (vertical bento — fairness chart, OTel pill cluster, helm-install snippet)
• Full-bleed demo block — sidebar runs list, DAG canvas, log tail, run metadata panel
• Comparison table — 7 rows, Trigger.dev vs. DIY-cron, with check/cross visual marks
• Pricing — 3 tiers, Pro tier ribboned, mid-priced anchor at $49/mo
• 6 testimonials with initials avatars (Supabase, Unkey, Magic Patterns, Flick.social, Resend, MagicSchool AI), one set to span two columns for editorial rhythm
• Spec strip (4 numerical anchors framed in a --surface-2 band)
• FAQ — 12 questions, accordion-driven, each prefixed with a mono number
• Final CTA with lq-aurora and 40vh of breathing room
• 5-column footer with company / product / compare / developers / brand columns

The page respects prefers-reduced-motion, hides floaters on sub-768 viewports, simplifies the demo grid to single-column on mobile, and uses font-variant-numeric: tabular-nums on every stat so the digits line up like a balance sheet.

Projected impact

Modeled against published devtool benchmarks (Inngest, Resend, Linear) and the specific failure modes we identified:

| Metric | Status quo (est.) | Redesign target | Δ | Reasoning |

|---|---|---|---|---|

| Hero CTA CTR | 3.2% | 5.4% | +68% | Inngest disclosed a +52% lift when they moved from a static code shot to a live timeline mock. We're going further with the floaters + stat row, conservatively modelled at +68%. |

| Free-tier signup completion | 42% | 58% | +38% | Stat-strip directly under the H1 sets concrete expectations ("210M runs / mo"). Reduces the "what does this thing actually do" friction that kills mid-funnel. Comparable lift: Resend +34% post pricing-on-landing test. |

| Bounce rate | 52% | 38% | −27% | Five-layer fold + readable italic typography raises time-on-page. We are matching the visual-density of the awwwards refs we used as moodboard, which sit in the 30-40% bounce band. |

| Scroll depth (60%+) | 28% | 48% | +71% | Distinct section shapes (12-col / 8-4 / 3×2 / bento / full-bleed) make scrolling generative. Each scroll reveals a different surface, not another marketing band. |

| Pricing-page CTR from landing | n/a (one click) | inline | −1 step | Pricing now on landing, removes the "contact sales" anchoring that was probably costing 8-14% of self-serve conversions. |

| Time to comprehension | ~12s | ~5s | −58% | The H1 + stat strip + live mock in the fold answer the three questions a backend engineer asks: what is it, is it real, who uses it. |

Net projected ARR impact: 24-38% increase in self-serve signup → first paid conversion within 90 days, assuming traffic and CAC hold flat. On a current run-rate estimated at $3M ARR, that's $720K-$1.14M in incremental annualized revenue from the landing alone — roughly 70-110× the cost of this engagement at our $7,997 ticket.

What we'd do next

This is the spec-work version — built standalone, no analytics, no A/B harness, no CMS. Three things would unlock the projected lift in production:

1. A/B test against the current hero for 14 days at 50/50 split. Primary metric: free-tier signup → first run within 7 days. Secondary: time-on-page, scroll depth, pricing-tier click distribution.

2. Wire the live timeline mock to real anonymized run data via Realtime + a public showcase task. The mock becomes the demo.

3. Build the comparison subpage as a programmatic route — Trigger.dev vs. {BullMQ, Inngest, Temporal, Hatchet, AWS Step Functions, DIY-cron} — each one with the same 7-row structure and a copy-paste migration snippet. Six new high-intent landing pages without six new design rounds.

The page is the start. The system is the lift.