Sector(s)
The group revised its visual identity, site structure and menus. The new brand guidelines had been designed for print: some color pairs lacked contrast and thin typefaces were hard to read on screen. Parker+Parker adapted the guidelines for the web and made them accessible. The agency redesigned nearly 60 shared blocks and about 15 content types in the group's Drupal site factory, then deployed the result to more than 20 sites in successive batches.
About the project
Results
- Nearly 60 shared blocks redesigned and aligned on common spacing, typography and heading levels.
- About 15 content types adapted to the new identity, site structure and menus.
- More than 20 sites switched to the new design in successive batches.
- No retroactive impact: existing content did not have to be re-entered, more than 30,000 pages across the site factory.
Goal
Apply the group's new identity to every site of the factory, make it accessible on screen and fix inconsistencies inherited from earlier development.
Challenge
The new guidelines were designed for print: some color pairs lacked contrast, and thin typefaces were hard to read on screen. The block library also had inconsistent margins, fonts and heading levels. Because all sites share the same blocks, every change affected the whole fleet.
Solution
- Adapting the guidelines for the web. Contrast, text sizes, font weights and link and button states were reviewed for accessibility, while keeping the group's identity recognizable.
- Desktop, then mobile designs. Each block was redesigned in a design library shared with the client, desktop first, then mobile.
- Block redesign. Nearly 60 blocks were redesigned and aligned on the same margins, fonts and heading tags.
- Content types. About 15 templates, including pages, articles and the home page, were adapted with the new site structure and menus.
- Cross-testing. Each block was tested in every content type that accepts it, on desktop and mobile, before client sign-off.
- Batch rollout. Sites moved to the new design in batches. Each batch was checked before the next.
Standards
The work targeted on-screen accessibility from the design stage: contrast, readable typography and a consistent heading structure.
What editors do without developers
Editors build their pages from the redesigned block library and keep their existing content. Country teams kept publishing during the rollout.
Why Drupal was chosen
The sites already shared one Drupal codebase and one block library. The redesign therefore became a single design and development project instead of one project per site. With Drupal's block-based page building, each block reused across several content types could be redesigned, tested and shipped once. Drupal's theme system separates presentation from content: existing pages kept their content while their layout and styles changed. The multisite setup made it possible to switch sites to the new design in batches, each batch checked before the next. Staying on Drupal avoided a content migration and kept editors on the back office they already knew.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
Paragraphs powers the shared block library used in every content type and on every site. Drupal core's multisite feature lets all sites of the factory share the same CSS files, so a style change applies across the fleet. CKEditor 5, now part of Drupal core, is the editor used for rich text fields: it was loaded with the text styles, lists, tables and colors of the client's brand guidelines.
