JSON-driven setup
Reduced manual campaign configuration overhead.
anyMotion
Turning repetitive banner setup into a repeatable production pipeline with JSON-driven configuration, shared runtime logic and faster iteration.
A JSON-driven banner production pipeline built to reduce repetitive setup, standardise campaign output and speed up delivery across high-volume digital work.
Workflow automationCampaign deliveryReusable runtime logic
One pipeline
Centralised repeated build steps into a reusable workflow.
Self-contained output
Generated artifacts that were easier to review and deliver.
Focus
Campaign production pipeline
Role
Workflow engineering, build tooling, production efficiency
Period
Recent
Stack
Node.js, Vite, TypeScript, Build tooling
Showcase
Visuals and the delivery priorities.
The main priority was reducing production overhead while keeping banner builds flexible enough for campaign-specific motion, sizes and asset variations.
Overview
Project context
This project focused on replacing repetitive manual banner setup with a structured production system. Campaigns could be defined through JSON configuration and shared runtime logic, then compiled into self-contained outputs that were easier to validate, preview and ship across multiple sizes and streams.
Key point
An internal production tool focused on campaign automation, reusable build logic and faster banner delivery.
Challenge
The main problem to solve
The challenge was creating a pipeline that was flexible enough for campaign-specific variants while still keeping builds deterministic, outputs consistent and day-to-day production work fast under delivery pressure.
Key point
The main priority was reducing production overhead while keeping banner builds flexible enough for campaign-specific motion, sizes and asset variations.
Role
My contribution to the delivery.
What I directly shaped in the case study.
01
Defined the JSON-first campaign configuration model
02
Built the script pipeline for validation, asset handling and HTML generation
03
Created shared runtime and styling layers for reusable campaign behaviour
04
Improved the local workflow for previewing, rebuilding and shipping banner sets
Approach
How the work was structured
Delivery principles that shaped the implementation and helped keep the work practical in production.
01
Configuration first
Campaign data, sizes, loops and runtime variants were driven from configuration so new work could be set up from a predictable structure rather than repeated manual steps.
02
Deterministic pipeline
The build flow was broken into validation, cleaning, copying, optimisation, styling, HTML compilation and cache-busting so production output stayed consistent and easier to debug.
03
Shared runtime logic
Shared runtime and style layers kept common banner behaviour centralised while still allowing campaign-specific variants where needed.
UX decisions
Clarity, usability and trust.
Design-aware implementation choices rather than generic UI praise.
Fast operator flow
The development flow prioritised quick previewing and regeneration so production work could move without long setup delays.
Clear build stages
Separating the pipeline into explicit steps made failures easier to reason about and reduced the ambiguity that often slows down delivery tooling.
Flexible without drift
Variant handling was structured so campaign-specific differences could be introduced without creating a different workflow for every new build.
Practical previewing
Campaign viewer pages and local serving made it easier to review outputs quickly before handoff or release.
Technical implementation
What the build relied on
The system was implemented with Node.js, TypeScript and Vite-backed local serving, using script-based build stages for validation, asset copying, image optimisation, SCSS compilation, HTML generation and cache-busting. Campaign output was generated as standalone HTML artifacts so delivery remained practical for production environments.
Stack in context
The technical layer was kept aligned with the delivery goal: make the interface maintainable, production-ready and easy to evolve.
Node.jsViteTypeScriptBuild tooling
Challenges and solutions
Tradeoffs handled during delivery.
Real frontend work usually involves constraints. These challenge-solution pairs keep the case study grounded in that reality.
Challenge
Supporting many banner variants without duplicating setup
Solution
Moved campaign differences into JSON config and runtime variant blocks so the pipeline could stay consistent while outputs remained flexible.
Challenge
Keeping outputs production-ready while speeding up iteration
Solution
Combined deterministic build steps, preview tooling and self-contained HTML output so teams could move faster without sacrificing delivery quality.
Outcome
What improved by the end of the work
Faster campaign turnaround with more consistent outputs and far less manual banner setup.
Key point
Less repetitive manual banner setup
Less repetitive manual banner setup
Faster campaign iteration and previewing
More consistent generated outputs
A clearer, reusable production workflow