RLRodney L. Lewis
Pendo.io / architecture
Pendo product experience hub header with navigation bar, headline, and five pill tabs for use-case exploration alongside product interface preview.

A URL architecture the product suite could grow into

Pendo was shipping product faster than its website could hold. The product surface of pendo.io had grown one page at a time, each launch bolting a new route onto a structure that was never designed to carry a suite. By the time I joined, the marketing site had become the slowest part of a product launch: the copy was ready, the design was ready, and the architecture was the thing everyone waited on.

Challenge

Pendo's product line was expanding faster than the website architecture that carried it. Every new product needed a page, every page needed a place in the information architecture, and the existing structure had no room left. The site could absorb another launch, but only by hand, and only with an engineer in the loop for each one.

Solution

I built the product surface of the main site as a component-driven system on a headless WordPress back end, with React and Gatsby rendering the front. Content lived in structured ACF and Gutenberg fields rather than in page markup, and product family sections were organized under a shared /{family}/{use-case}/ URL pattern, so a new page composed into an existing family instead of bolting on a one-off route. A new product page became a matter of composing existing components against a new content record.

Outcome

The architecture stopped being the constraint on launches. New product family pages assembled from components the team already had, driving a launch time reduction from 72 to 24 hours, without an engineer rebuilding the section each time. The structure outlasted the stack it was built on: pendo.io has since moved off WordPress onto a different front end, and twenty of the twenty-seven pages live when I left are still serving at the same URLs years later, including every one of the fourteen use-case pages under the two solution families.

The product suite routing before and after the family URL hierarchyTwo workflows comparing page routing and build steps before and after the architecture overhaul. The upper workflow, labelled “Before: flat ad-hoc routing”, shows pendo.io splitting into disconnected routes like /feedback and /mobile-guides, each running into an engineering queue bottleneck that took 72 hours for a bespoke build. The lower workflow, labelled “Built: family URL hierarchy”, shows pendo.io routing into a structured /{family}/{use-case}/ hierarchy assembled from shared React modules into a 24-hour launch, supported by a headless ACF and Gutenberg content foundation.Before: flat ad-hoc routingpendo.io/feedback/mobile-guidesEngineering queue72h bespoke buildBuilt: family URL hierarchypendo.io/{family}/{use-case}/Shared React modules24h launchHeadless ACF & Gutenberg
Above, every product route is flat and disconnected from the catalog, requiring a scoping conversation, an engineering ticket, and a bespoke build that took 72 hours to launch. Below, product families organize under a shared /{family}/{use-case}/ pattern: new pages assemble from existing React components against structured headless CMS records, reducing launch time to 24 hours without an engineer rebuilding the section.

The build

The first decision was to stop treating product pages as pages. A product page is a content type — it has a name, a positioning line, a set of capability blocks, proof, and a call to action — and it repeats. Once you model it that way, the work moves from producing markup to producing a schema and the components that render it. I built that model in headless WordPress, using ACF and Gutenberg so the content team edited structured fields rather than layouts, and rendered it through React on a Gatsby build.

The URL structure was the other half of the architecture. Product family sections were organized under a shared /{family}/{use-case}/ pattern rather than each page getting its own bespoke route, which sounds like a routing detail and is actually a product decision: it forced a family to express how its capabilities were organized, gave it room to accept new members, and made the shape of the navigation follow from the shape of the catalog rather than from whatever had been added most recently.

Decoupling the CMS from the front end is what made the rest safe. Content changes stopped touching render code, so the marketing and content teams could work on pages without a deploy on the critical path, and I could change how a component rendered everywhere at once without opening every page. That separation is the whole point of a headless stack, and it only pays off if the component library on the front end is disciplined enough to be the single place a pattern lives.

The thing I care about in this build is what it removed. Before, launching a product page meant a scoping conversation, an engineering ticket, and a bespoke template. After, it meant a content record and a composition of existing components — cutting launch times from 72 to 24 hours. The platform absorbed the next launch instead of the team absorbing it.

Years later I went back to check which half of that claim held. Pendo has since moved the site off WordPress onto a different front end entirely, which is the real test of an information architecture: the thing it was built in got replaced, and the structure stayed. Of the twenty-seven pages live when I left, twenty still serve at the same URLs, including all fourteen use-case pages under the two solution families. The suite tier above them is gone, and a later team re-expanded some of the feature pages I had flattened — which is what it looks like when an architecture is being used rather than preserved.

This is the version of a marketing site I keep building toward: not a set of pages that happen to describe a product, but a system whose structure mirrors the product it sells, so that growth in one shows up as configuration in the other rather than as a rebuild.

Archived screenshot of the Pendo product-experience hub: a hero heading over a cut-out photo collage, then a centred "Explore use cases" row of five pill tabs, then alternating two-column rows pairing a product screenshot with a heading, paragraph and link.
The product-family hub, October 2022. The five-tab use-case row and the alternating capability rows below it are the same components every product page in the family composes from.
Archived screenshot of the Pendo in-app support product page: a centred hero, a three-column row of icons and labels, then alternating sections pairing a heading and paragraph with a screenshot of an in-product overlay.
A leaf page in the same family, October 2022. Same primitives as the hub, different content record.

Built with

  • Headless WordPress
  • ACF
  • Gutenberg
  • React
  • Gatsby
  • Next.js
Contact

Hiring for a web platform role? Let's talk.

Open to senior web developer and platform lead roles, Bay Area hybrid or remote. I reply within one business day.

Also taking select contract work through Sprintz.

Reach out

Other ways to connect