WRAP (the Waste and Resources Action Programme) Building a sustainability charity a new Drupal 8 website (2020 rescue, migration and front-end rebuild)

Onboarding and discovery (2020): Code Enigma led project onboarding sessions with WRAP in Banbury, working to understand the client, the project domain and the business objectives. As a team we spent a large portion of that time simply listening to stakeholders: hearing how the client describes things gives invaluable insight into the domain, and agreeing a precise, shared vocabulary for each concept; flushes out ambiguity early.
Card sorting and sizing: Stakeholders described requirements at a high level so we could derive epics and user stories. We wrote each epic on an index card, captured user stories as they fell out of the conversation, then sorted and sized them until there was consensus. This drove prioritisation, budget allocation and agreement on the MVP. As a by-product, surfaced how the client was actually thinking and what mattered to the business.
Migration (the rescue core) : We started with a barebones migration and built out from it: a simple source class and the simplest field mapped first, to prove we were migrating the right data. As more fields were added, data transformations were required, and we kept the migration config files deliberately simple ; "the only thing worse than complexity is complexity in two or more locations." Much of the prepareRow complexity was eliminated by making the source database queries as precise as possible (including MySQL and PostgreSQL aggregate functions via Select::addExpression, then explode in PHP or the Explode migrate process plugin). Database schemas were mapped using PHPStorm's Diagrams visualisation tool.
Front-end rescue: A full audit of all existing front-end code using CSSLint, ESLint and Google Lighthouse for page performance scores. As expected, a large number of minor issues (code style, formatting) and some outright errors; plus significant tidying up was needed ; unnecessary duplication and empty files. Taken together these were causing a very poor page performance score. We used aXe for accessibility checks on common page types and fixed the issues found during development sprints.
Editor and user experience: Many Drupal paragraphs had been built by the previous supplier. Talking to editors, it became obvious they didn't understand why some paragraphs existed or which to use to achieve what they wanted. Some were poorly named, others near-duplicates, some didn't work at all. We ran a dedicated design workshop to agree a unified approach to content patterns, build a domain language glossary with naming conventions for paragraphs and content types, fully specify paragraph functionality, capture design and development user stories in Redmine, and evaluate the sitemap with particular attention to navigation.
Design iteration: We established a fast feedback loop with WRAP to reach design decisions quickly. We established that Reports, Guides, Case Studies and Tools are the key components of WRAP's mission.

Outcomes:

• A single, coherent Drupal 8 website consolidated from three disparate sources.
• A front-end theme transformed from something broken and slow into something that serves WRAP's mission: clarified signposting with larger in-text headings for scanning; reduced editor options with fixed places for downloads, related content and tags so every resource feels familiar without editors having to remember layout patterns; restoration and restyling of the sidebar menu navigation from the Drupal 6 site for grouped content such as the Household Waste Prevention Hub.
• A resourceful, flexible "Resource" content type that accommodates many downloads, grouped information, or links to software, including resources with no cover page or where the web page is the resource.A refreshed colour system: the core WRAP blues now sit alongside the wider brand palette, with a key colour per resource type so a Tool reads differently from a Case Study at a glance, and colours enhanced to meet WCAG 2.1 criteria.
• A materially improved page performance profile and a cleaner, more maintainable codebase.

2024 intervention - consolidation and update

• Continued development through a sprint model, with WRAP sprint planning calls to scope the next tranche of work.
• Delivery of a production release cycle (WRAP release), including improvements front-end page-type labels misaligned on search results and a spike into a related-content block introducing an unwanted grey stripe.
• Resolution of a laptop/desktop layout defect where paragraphs were being chopped off.
• Platform and infrastructure work on the WRAP Jenkins build and deployment setup.
• Sprint scoping for expanding WRAP's Northern Ireland presence on wrap.org.uk.
• Consolidation of the Welsh domain into wrap.ngo.
• Ongoing core and contributed module update investigation within WRAP's PHP constraints.

Client quote:

I do want to thank you all for your work on the WRAP site over the last few years - it has been really enjoyable working with the team on that