Tony Hersey

Page Builder

Turning Expensive, One-Off Client Requests into a Scalable Page-Building System

Role
Product Design, UX/UI Design, Front-End Architecture (CSS)
Status
Shipped. Replaced manual engineering hours with a repeatable, high-margin enterprise upsell path
Page Builder examples — multiple pages built with the system
One system, infinite variations: Three completely different enterprise client pages built using the exact same underlying modular section framework—zero custom engineering required.

The Problem

Pinpoint's LMS allowed enterprise clients to build custom resource pages for product highlights, onboarding hubs, and internal campaigns. It was a highly valued feature with a fundamentally broken, non-scalable process.

  • The Engineering Bottleneck: Every page required a bespoke template. Clients had to manually specify their exact data fields, submit an engineering ticket, and wait for a developer to hardcode a custom view file.
  • Zero Reusability: These templates were hardcoded to a single tenant and locked into a static layout. If the client wanted to alter the structure later, or if a different client wanted a similar layout, it required a brand-new engineering ticket.
  • The Business Impact: Because the process was expensive and slow, clients bought the feature sparingly. High service costs kept a genuinely useful capability out of reach for the majority of our users.

The Users

  • Enterprise Admins: Non-technical content creators who wanted to publish rich layouts quickly but were locked out by high costs and long engineering lead times.

Discovery & Reframing

I began by analyzing the archive of past custom template requests, and a clear pattern emerged. Different clients were asking for functionally identical pages over and over. Pages for things like onboarding training, product launches, team directories, sales enablement, event promotion, and so on.

The platform's backend already possessed a foundational, admin-facing template system, but it still required an engineer to generate the hardcoded layout files. The core strategic question became: Could we leverage the existing backend infrastructure to handle layouts at a component level instead of a page level?

Instead of trying to make custom templates faster for engineers to build, I proposed bypassing engineering entirely.

Page Builder System Diagram
Shifting from Page-Level Builds to Component-Driven Layouts: By decoupling layout sections from the page template, non-technical admins can freely stack, reorder, and repurpose components.

By collaborating closely with our engineering team, we discovered that configuring a single page to support multiple modular section templates was a straightforward technical wire-up. No platform rewrite necessary; we just needed to use the existing code at a different scale.

Key Architectural Decisions

  • Reframing Templates as Sections: By breaking page-level templates down into atomic, reusable section rows, the system gained infinite flexibility. Clients could assemble custom layouts from a library of parts rather than commissioning bespoke code.
  • Designing Within Existing Constraints: Rather than proposing a costly ground-up rebuild, I designed the user experience to lean heavily into what the backend could already support. This made the feature cheap to build, easy to justify, and incredibly fast to market.
  • Controlled Freedom Over Chaos: Giving non-technical admins an open canvas risks broken layouts and unsupportable edge cases. To prevent this, the builder utilizes predefined component rows with strict field constraints. Admins can freely reorder, combine, and edit blocks, but the internal structural integrity remains bulletproof.
  • Low-Code Layout Variants (The CSS Win): To handle specific client requests without cluttering the administration UI, I built a class-injection utility using pure CSS modifiers. If a client needed a unique layout tweak, admins could input layout "keywords" into a configuration field. This automatically appended modifier classes to the parent section container, instantly transforming a component (like turning a 2-column Card grid into a 4-column row, shifting images from top to side, or toggling text overlays) without touching the core backend codebase.
  • Productizing the Service Model: Because the system is entirely section-based, future capabilities were transformed into an expansion roadmap. New layouts, countdowns, or accordions could be shipped as discrete "feature packs," turning a one-time service into a repeatable product upsell path.

What shipped

We launched a modular page builder featuring 12 out-of-the-box, fully responsive sections spanning banners, media splits, carousels, and event blocks.

I designed the end-to-end admin configuration experience and built the production CSS presentation layer, ensuring every block cleanly absorbed individual tenant brandings and system themes.

The Modular Kit
A suite of 12 out-of-the-box, highly constrained UI sections designed to maintain visual consistency across tenant configurations while offering flexible content inputs.

Banner
Banner
Banner
50/50 Text Image Split
50/50 Text Image Split
50/50 Text Image Split
Table of Contents
Table of Contents
Table of Contents
Video
Video
Video
Event
Event
Event
Tabs
Tabs
Tabs
Carousel
Carousel
Carousel
Resources
Resources
Resources
Training Roadmap
Training Roadmap
Training Roadmap
Countdown
Countdown
Countdown
Accordion
Accordion
Accordion
Cards
Cards
Cards

The Outcome

We successfully converted a slow, bespoke service line into a scalable product ecosystem.

  • Zero Engineering Drag: The engineering custom-template bottleneck was completely eliminated, handing direct layout control back to client administrators.
  • New Revenue Streams: The builder instantly became a popular tier feature across several key enterprise accounts. More importantly, the expansion packs I designed created an ongoing, repeatable revenue model that kept generating value long after the initial ship date.

The real win here wasn't just shipping a page builder. It was identifying an embedded platform pattern, reframing the existing technical architecture, and turning a costly operational drain into a scalable product driver.