OfferPath — Website Redesign & Motion System · gRO Case Study
← Back to Results

Case Study · Website Redesign & Motion

A done-for-you product, made to feel alive.

gRO rebuilt OfferPath’s marketing site from the ground up — a 16-page redesign, a from-scratch motion engine written in vanilla JavaScript, and a claims cleanup that fixed a site-wide rendering bug and a contradiction on the pricing page.

OfferPath
OfferPathCareer-Tech SaaS · Done-for-you job applications · Consumer
16
Marketing pages rebuilt
14
Custom motion components
0
Framework or build-step dependencies
100%
Verifiable claims — unsourced stats dropped

The mandate

The product was strong. The site was working against it.

OfferPath sells a genuinely human service — a real assistant applies to hundreds of jobs for you. But the marketing site buried that story under a broken render, unverifiable stats, and “AI” language that described a product OfferPath doesn’t sell. We audited every public page, then rebuilt.

What we found

  • A site-wide rendering bug hid ~2,500px of the homepage — four sections sat in the DOM but never painted. Below the hero, the page read as empty. The cost: every ad click and organic visit paid to land on a homepage that looked broken before it made a single argument — the whole top of funnel spending to reach a dead page.
  • The pricing page contradicted itself — 450 applications in one place, 400 in another — on the highest-intent page on the site. The cost: the one number a buyer checks before paying didn’t agree with itself at the exact moment of the decision.
  • Headline stats weren’t defensible — a “$455K in offers” aggregate stitched from three testimonials, and a founder bio claiming “$4M from VCs” that no public source backed. The cost: the boldest claims were the easiest to disprove — one skeptical buyer, reporter, or investor checking them takes the credibility of the whole page down with it.
  • The copy sold “AI”; the actual product is a real person applying by hand. The cost: the site advertised a product OfferPath doesn’t sell — competing in the commoditized “AI tool” race to zero instead of owning the premium human service it actually delivers.
  • Free-tool pages returned soft-404s — real, working tools with no public page and no SEO. The cost: a whole acquisition channel was built, then hidden from Google — every search visit and email it could have captured, lost.

What we shipped

  • A 16-page rebuild that puts the actual product — a live application tracker — above the fold for the first time.
  • Every claim verifiable; the founder block rebuilt entirely on sourced credentials.
  • Human-first copy: “A real person applies to 200 jobs for you. $299. Once.”
  • A custom motion engine that makes a done-for-you service tangible without a single stock video.
  • A Free-Tools hub, comparison and persona pages — each with email capture wired to the CRM.

Before & after · Homepage

From a wall of white to the product itself.

Before
offerpath.co
OfferPath homepage before the redesign, showing a large blank gap where sections failed to render

The rendering bug, live. Below the hero, ~2,500px of blank space — four sections present in the DOM but never painted. A homepage that reads as empty converts at near-zero.

After
offerpath.co
OfferPath homepage after the redesign, with the live application tracker in the hero

A hero that shows the work. New headline, the live tracker beside it, and verifiable product facts replacing the unsourced aggregate.

The redesign

Sixteen pages, one coherent system.

Core pages, five free-tool pages, four persona pages, and a competitor comparison — rebuilt to a single design language, every page load clean.

offerpath.co/how-it-works
How It Works page

How It Works — the human checkpoints and mission-control ramp, animated.

offerpath.co/receipts
Results / receipts page

Results — outcome-led testimonials with a live application tracker.

offerpath.co/pricing
Pricing page

Pricing — one consistent application count, Stripe descriptor footnote, guarantee surfaced.

offerpath.co/vs/lazyapply
Comparison page

Comparison — a new head-to-head page built for high-intent, bottom-funnel search.

The motion system

We didn’t buy motion. We engineered it.

No template, no heavy animation library. A 14-component motion engine written in plain JavaScript — every animation fires on scroll via IntersectionObserver, the tracker keeps a live loop, and the whole thing honors prefers-reduced-motion. Roughly 44 KB of JS+CSS, zero dependencies. Here it is, running live:

Live components — the exact code shipped to offerpath.co
Signature component
Live Application Tracker
Rows stream in, applications advance through the funnel, the counter animates, and a toast fires on every event — a running loop that makes the product feel alive above the fold.
Free-tool demo
ATS Score Gauge
SVG ring sweeps to the score with a synced count-up.
Free-tool demo
Cover-Letter Typewriter
Types on with a blinking caret and human-variable cadence.
Onboarding
Mission-Control Ramp
A staged progress track — each step completes and lights the next, with the active dot pulsing.
Free-tool demo
LinkedIn Analyzer Bars
Staggered fills with per-bar count-up percentages.
Dashboard surface
Weekly Report + Sparkline
Counters roll up and the bar sparkline grows in sequence.

Live — the exact components shipped on offerpath.co, running the same vanilla-JS engine. Honors prefers-reduced-motion.

Real components, running the production engine — scroll-triggered, the tracker looping continuously. Reduce motion? It respects that.

Live Application Tracker ★
Rows stream in, applications advance Listed→Offer, the counter animates, a toast fires per event — a continuous live loop.
Count-Up Primitive
Eased number roll-ups on view. The reusable base every animated stat is built on.
ATS Score Gauge
An SVG ring sweeps to the score with a synced count-up in the center.
Cover-Letter Typewriter
Types on with a blinking caret and human-variable cadence.
Analyzer Bars
Staggered bar fills with per-bar percentage count-ups.
Mission-Control Ramp
A staged track completes step by step, the active dot pulsing.
Scroll Reveals
Auto-staggered fade-and-rise as groups of elements enter the viewport.
Funnel Highlight
A travelling glow runs across the pipeline pills to show progression.
VA Conversation
Messages reveal in sequence behind an animated typing indicator.
Vertical Timeline
The founder-story line fills as each milestone rises into place.
Weekly Report + Sparkline
Counters roll up while a bar sparkline grows in sequence.
Card Carousel
Auto-advancing results, pause-on-hover, native swipe on mobile.
Mega-Nav Dropdowns
Accessible, JS-injected navigation with real chevrons and one shared definition.
Per-Section CTAs
One contextual conversion CTA injected per fold — skipping folds that already have one.
Vanilla JavaScript Zero dependencies No build step ~44 KB JS + CSS IntersectionObserver prefers-reduced-motion SVG + CSS transforms Portable to Next.js

Scope of work

Strategy, design, copy, and the code.

A full-stack marketing engagement — from the audit that found the bug to the vanilla-JS motion layer that shipped. Delivered as a self-contained static site: no framework, no build step, ready to drop on any host or port into the product’s Next.js app.

Site Audit & Roadmap Website Redesign (16 pages) Motion Design & Front-End Engineering Conversion Copywriting Design System Lead Capture → CRM Persona & Comparison Pages Claims & Compliance Cleanup Developer Handoff Docs

The redesign traded impressive-but-fragile claims for ones that survive scrutiny, fixed a revenue page that contradicted itself and a homepage that rendered as a wall of white — and, through a motion system built from scratch, made a done-for-you service legible in a way static screenshots never could.

See more work → Start a project