The design and build of a new Drupal 8 website, ready for Drupal 9
Earth observation, oceanography, atmospheric science, climate science, marine science, terrestrial science, freshwater science, geology, and physics of the sun and space are some of the areas covered by the Environmental Data Service (EDS).
Networked data centres with domain-specific expertise make up the EDS network.
- British Oceanographic Data Centre (Marine)
- Centre for Environmental Data Analysis (Atmospheric, Earth Observation, and Solar and space physics)
- Environmental Information Data Centre (Terrestrial and freshwater)
- National Geoscience Data Centre (Geoscience)
- UK Polar Data Centre (Polar and cryosphere)
Whilst the data centres have individual discipline specific expertise, we pull together decades of experience to provide an integrated shared service that works across all domains.
EDS hosts the largest collection of environmental science data in the UK to support researchers and everyone interested in learning more about the natural world. Ensuring that environmental data is available, accessible, and re-usable indefinitely is their top priority.
Why Drupal?
When it came to choosing a CMS, EDS was ready to adopt the latest version of Drupal. They understood that the CMS can support the desired front-end aesthetic while also providing a simple back-end administration experience. Drupal emerged as the preferred platform from the start.
What we did
EDS wanted to engage Code Enigma to provide branding for their Drupal 8 website. Plus, be responsible for maintaining and making available environmental data collected by various different organisations.
We started with a systematic review of existing site, users, workflow, and website goals. Historically EDS has not had its own brand or website, but there was a desire to change that. Consequently the organisation needed to partner with an organisation to provide the necessary design work to produce a new EDS brand, working closely with the UKRI branding which already exists, and then design and build a new EDS website using that brand.
Then, we collaborated on a discovery period with workshops/meetings to prepare a needs assessment and find solutions.
We applied a professional consulting approach toward content strategy, user experience, design and brand guidelines with stakeholder feedback.
An in-depth review of Drupal modules; matching stability and features with required functionality.
Custom code development
We developed the Drupal 8|9 version of the contributed module Help Scout's Beacon
This module provides basic integration with Help Scout's Beacon - A helpdesk tool (similar to Zoho Desk or Zendesk). This allows people to submit support tickets or chat from a Drupal site.
EDS has everything centralised using Helpscout.net (i.e: FAQs, Webforms, etc), so we had to integrate it with Drupal 8|9. Moreover, we contributed in Drupal.org.
Integration with the NERC Data Catalogue service. It is an external site https://data-search.nerc.ac.uk working as a meta catalogue. We didn't have access to this site, so the main challenge here was to know how to build the right search URLs from EDS site, creating an effective search results pages.
This functionality can be tested on the homepage, using the search bar in the banner.
Design, Workflow, Content Admin
The design strategy discussion resulted in providing various templates (via the Paragraphs module) that could be used to assemble content with flexibility and ease, thereby reducing the need for a developer/designer to be involved with standard content entry tasks.
Brand guidelines
As we mentioned, until recently, EDS was not a brand in and of itself. We were therefore asked to create brand guidelines. Maintaining quality and consistency can be a challenge for any client.
The website theme was tailored to branding and corporate identity guidelines. This provided a cohesive look and feel designed to engender trust and confidence in EDS. The overall result is polished and professional. The brand guidelines will now act as a comprehensive style guide for EDS, which they can use frequently to ensure consistency.
Workflow
Implemented a streamlined and sustainable content workflow process to allow for a growing number of users, different content states, smoother revision monitoring, and more granular control over content permissions. The new system allowed for greater oversight and review, allowing content to be managed and repurposed rapidly.
Key features of the site
- Having a simple and clear header, without complex menus, making the navigation easier for users
- Customisable banners per page; being able to configure a picture by default from the backend side
- Well-defined crop tool to create different image presets, all of them editable by the editors, using the contributed module ImageWidgetCrop
- Search bar to use the external NERC Catalogue from EDS
- Integrated with Helpscout; an external tool to centralise communications with the users
- Component-based architecture: aka Drupal paragraphs. The content design and development is based on different paragraph types, according to the client requirements. The editors can use these paragraphs to build different pages
- New paragraph types can be added without having to define or change the current templates of the site
- Inclusive use of gender pronouns. One paragraph type is used to show a list of people, including a field to show (or omit) the gender pronoun.
- The event area displays the next events according to the date. Nearest events are displayed before.
- An RSS feed
Website performance
If you go to the EDS website, you’ll notice it loads blisteringly fast.
Google Lighthouse is an open-source, automated web page quality-improvement technology. Performance, accessibility, progressive web apps, and more are all audited. It provides a full view of potential user experience and development bottlenecks.
Looking at the results of the GL inspection, we can see that the site is incredibly efficient.
Accessibility
Alongside tools like Google Lighthouse, we use aXe. We utilised it to test numerous website URLs (for a typical accessibility audit, this would be around 10 - 15). aXe is a website accessibility testing engine for HTML-based user interfaces. We used aXe first, then manually tested the site to verify we cover all of the remaining WCAG 2.1 requirements.
Over the span of a 5 page test, we found no Critical errors and few Moderate issues that can easily be corrected; such as using appropriate and unique alt tags for images.
