UNICEF Ireland
About the Project
The site had outgrown a rigid CMS locked to fixed templates. The rebuild replaced it with a flexible page builder made of reusable components: content teams assemble pages from a library of 20+ reusable components, while templated content types (Stories, News, Class Resources, Appeals) keep editorial areas consistent.
As the sole frontend developer, collaborating with backend engineers, designers, and a PM, I translated the functional spec and Figma wireframes into a fully responsive, accessible, CMS-editable front end within a WordPress/Twig stack.
How it was built
Clean data → presentation architecture: a PHP "Twiggify" layer normalises messy ACF/Gutenberg CMS fields into tidy data ready for the view before rendering through Twig, keeping templates declarative and complex logic in one testable place.
Reusable component system: 20+ page-builder components share a consistent field vocabulary (colours, anchors, a 3-colour button system) with an enforced inline/full-width layout contract, so editors can't break the design. A base-theme + override model layers the UNICEF theme over a shared starter theme via a Gulp build step, inheriting base improvements while allowing custom design.
A donation flow built to lift conversions: Gravity Forms integrated with custom JS that skips redundant steps and pre-fills the donor's chosen amount and frequency when launched from inline widgets, reducing friction at the highest-value surface. A custom WooCommerce gift-card handler manages electronic vs postal cards end-to-end, with shipping and checkout fields that adapt per item plus PDF voucher integration.
Outcomes
The rebuild shipped a page builder that content teams run without developer involvement, backed by IA-driven navigation: multi-level mega-menus, auto-generated local nav and breadcrumbs, and taxonomy filters exposed as addressable URLs so components can deep-link into filtered content.
Front-end delivery was tuned for performance: a single concatenated and minified JS bundle with non-critical scripts deferred, compressed autoprefixed CSS, SVG sprites, and responsive art-directed images that lazy-load below the fold. Accessibility was built to WCAG 2.1 AA: semantic landmarks, labelled ARIA on the mega-menus and taxonomy filters, visible focus states, full keyboard operability, and prefers-reduced-motion fallbacks. Scale: 180+ Twig templates, 15k+ lines of SASS, 20+ components, and 4 custom content types.