Automated Case Study System

Focus: Systems Design · Document Automation · Brand Engineering Role: Sole designer and engineer Timeline: 2025 Revenue impact: Eliminated manual layout cost for a growing sales asset type Complexity: Medium: Node.js, Puppeteer, CSS print layout, asset pipeline

Executive Summary

I designed and built a fully automated document production system that generates print-ready, 6-page PDF case studies from structured content files. Each PDF represents a different audiology practice: unique practitioners, pull quotes, patient photos, and performance data, all produced from a single terminal command with zero manual layout work.

The system was built for Neurotone's sales team, who needed a continuously growing library of practice-specific case studies to support clinic onboarding. The constraint: each study had to look custom-made, but no one on the team could spend hours in a design tool each time a new clinic was onboarded.

The Problem

The sales team needed a continuously growing library of case studies, each featuring a unique practitioner, their clinical philosophy, patient outcome data, and brand-consistent layout, to support clinic onboarding conversations.

• Doing this manually in a design tool meant rebuilding every document from scratch
• Any copy change required reopening the file, reflowing text, and re-exporting
• Scaling to dozens of clinics was impossible without automation
• The visual system had to be pixel-perfect regardless of content length variation

The Strategy

1. Separate content from layout: each study is a single .md file with YAML frontmatter for structured data and a Markdown body for prose. The generator owns all layout decisions
2. Enforce design in code: typography, spacing, brand consistency, and conditional layouts are all CSS rules, not per-document decisions
3. Make onboarding trivial: adding a new study means creating a folder, writing a content file, dropping in photos, and running one command
4. Build for handoff: the client's team can produce new studies without design involvement

Key Design Decisions

Content architecture: YAML + Markdown

Each case study is driven by a single .md file split into two parts. YAML frontmatter carries all structured content: pull quotes, at-a-glance stats, pricing callouts, checklist items, result cards, patient outcomes, and photo references. The Markdown body supplies paragraph copy keyed by section heading. The generator assembles these into a fully laid out 6-page document.

6-page layout system

Every study follows a fixed page structure: cover and practice intro → practice model → patient conversations → implementation → results → takeaways and QR code. Each page template is a reusable HTML/CSS layout that pulls from the content file, with no copy-paste, no per-study adjustments.

Conditional layouts

Pages auto-adapt based on content presence. The results page renders a single-section layout for most studies, but automatically switches to a two-panel layout (practice impact + patient impact) when a patient_results block is present in the frontmatter. No manual intervention required.

Orphan prevention and vertical rhythm

A single CSS custom property (--vspace: 30px) enforces consistent spacing across every element. A utility function inserts a non-breaking space before the last word of any text block, preventing single-word widows across all content variations, a print-design detail that would normally require manual review.

Asset pipeline

Practice photos resolve from a per-study /photos/ folder. Small assets (icons, QR codes, headshots) are inlined as base64 data URIs to keep the PDF self-contained. Large decorative SVGs load via file:// URLs to avoid memory limits. A custom page background image is layered as the base of every page, with all content rendered above it via z-index stacking.

Key Screens

Collaboration

Built independently as a systems design and engineering project in support of the Neurotone sales team. Worked with the sales and clinical teams to understand what information drove clinic buying decisions, which shaped the page structure and content hierarchy. The final system was designed so that non-technical team members could produce new studies by writing a content file; no design or engineering involvement required after initial build.

Outcomes & Impact

• Eliminated all manual layout work for a growing sales asset type
• Made copy edits instant: change a line, rebuild in seconds
• Ensured pixel-perfect brand consistency across every study regardless of content variation
• Rebuilt the full library in under 30 seconds
• Created a foundation the sales team can hand off content into without design involvement
• Scaled to 5+ unique practice studies, each reading as individually crafted

Leadership

• End-to-end ownership: system architecture, design system, code, and delivery
• Identified and eliminated a scaling bottleneck before it became a production problem
• Built for handoff: the client can operate the system without the original author
• Applied print design discipline (orphan prevention, vertical rhythm) programmatically
• Translated a design problem into an engineering solution without losing visual quality