Turning a 43-Page Report Into a Living Web Experience
The Cardholder Dispute Index is a flagship annual consumer research report — a deep dive into payment behavior, dispute patterns, and the systemic forces behind friendly fraud. For the 2025 edition, marketing wanted it to live natively on the corporate site instead of behind a PDF download: scrollable, responsive, and built to convert readers into leads. I led the complete frontend build — turning 43 pages of designed report content into interactive PHP templates, animating 105 SVG charts, and writing a shared 1,037-line SASS system that now powers 2 report families.
The Challenge
Marketing didn't want a PDF with a landing page bolted on in front of it — they wanted the report itself to live on the site, styled exactly to the designer's original layout, and built to capture leads while readers were still inside the content. That meant reproducing 43 pages of mixed layouts — pie charts, horizontal bar comparisons, pull quotes, two-column tables, full-bleed section dividers — as pixel-faithful, responsive HTML and CSS, from a 1440px desktop down to a 375px phone. And it meant treating the whole thing as a funnel, not just a document: enough of the report visible to build curiosity, then a HubSpot-gated wall that feeds straight into the CRM.
- Rebuild 43 pages of mixed report layouts — charts, callouts, tables, pull quotes — as responsive HTML/CSS matching the designed PDF pixel for pixel
- Repair 60+ Illustrator-exported SVGs whose text had shattered into per-character fragments on export
- Build a sticky table of contents that tracks which section is active as the reader scrolls
- Wire a HubSpot-gated content wall with a localStorage unlock, so returning readers never hit the gate twice
The Illustrator Problem
The most labor-intensive part of the build wasn't the layout — it was fixing what Illustrator broke on export. Every character of exported text arrived as its own <tspan>, positioned by an explicit x-coordinate to preserve Illustrator's custom kerning. That's how Illustrator remembers letter spacing, but it also meant the SVG was unreadable as text, invisible to screen readers, and immune to a CSS font-weight change.
Fixing it meant reading each file, consolidating the character fragments into single <tspan> elements per line, and recalculating the centering math Illustrator had baked into individual glyph offsets. Sixty-plus files got this treatment before a single one could be animated.
Same glyph, before and after
<!-- Before: one <tspan> per glyph --><tspan x="9.76">I</tspan><tspan x="13.96">n</tspan><tspan x="18.9">t</tspan><tspan x="21.76">e</tspan><tspan x="26.7">n</tspan><!-- ...six more tspans for one word --><!-- After: consolidated, live, readable --><tspan x="0" y="0">Intentional chargeback fraud</tspan>One line of markup doing the work of eleven <tspan> fragments.
Preferred Online Payment Models
The report opens with the baseline landscape: how consumers actually prefer to pay online, tracked across card types, digital wallets, buy-now-pay-later, and emerging alternatives. It's a wide horizontal bar chart in the original design, and the SVGator export animates each bar in on its own — no scroll-linked JS to write on my end, just an SVG that knows how to play itself once the browser drops it into the DOM.
$84 — The Average Dispute Value
The most-cited number in the report, a 10.5% jump over the prior year. In the original file this arrived as stacked path outlines layered over a card-and-envelope illustration — no live text, all vector paths — so it's presented here exactly as designed, letting the stacked-bills visual carry the number.
The Convenience Gap
The report's central argument, in one chart: 76.64% of consumers say they'd rather resolve a dispute through their bank, but fewer than half actually do. That gap between preference and action is where merchants lose the narrative — and it's the chart the rest of the report builds on. It draws its two bars in sequence on scroll, so the contrast lands before the reader has time to skim past it.
Disputes as a Refund Alternative
Close to three-quarters of respondents told us filing a chargeback is a legitimate stand-in for requesting a refund. That's the number underneath the report's "friendly fraud is normalized" argument, and a compact animated donut is doing all the work of making it unavoidable.
The Trust/Satisfaction Paradox
The most abstract diagram in the report, and the one I spent the most time getting right: a feedback loop showing how bank responsiveness feeds back into dispute behavior. Banks improve service to protect customer trust, customers dispute more freely as a result, and dispute volume climbs — which is exactly the loop this report exists to document.
Customer Satisfaction by Bank
A ranked, multi-metric comparison of major card issuers, with Capital One leading across both US and UK respondents. The chart is tall and narrow in its native proportions, so instead of stretching it full-bleed like the wider charts, it's capped and centered here — the same instinct as the original layout, which gave it its own dedicated column rather than fighting it into a row.
One Stylesheet, Two Reports
The CDI and a parallel 62-page publication, the Field Report, share a single 1,037-line SASS file. Everything in it hangs off one BEM block, .p-study — graph wrappers, section dividers, callouts, pull quotes, numbered lists — so a new report means a new PHP template, not a new stylesheet.
The sticky table of contents works the same way across both: a scroll handler reads the offset of every h2[id^="section-"] and toggles .active on the matching TOC link, while the sidebar itself flips between fixed and floor-pinned so it never runs into the footer.
The Gate: Where Content Meets the CRM
None of this mattered to marketing without a lead-capture mechanism, so the report is gated: readers get enough of it to build interest, then hit a content wall backed by a HubSpot form. Submitting it writes an unlock key to localStorage, so a returning visitor never sees the wall twice — the gate remembers them, not just the session.
The threshold is tied to scroll position rather than a hard page count, calculated off the offset of the second report section, so the gate feels like a natural break in the reading experience instead of an arbitrary paywall.
Unlock the Full Report
Get My CopyA Publication Platform, Not a One-Off Page
What started as "build the CDI page" became a reusable publication system. The Field Report 2026 — a second annual report with 62 charts across 43 pages — shipped on the same SASS foundation without a single new stylesheet line. Each new edition is now an additive build, not a rebuild.
The gated format gives marketing a concrete lead-gen mechanism tied to content people actually want to read. The animated charts give the data a presence it never had as a PDF. And the consolidated, live text — recovered from Illustrator's glyph fragments — means the report is finally searchable, selectable, and readable by assistive technology, the way a report on a website should be.