Sector(s)
Team Members
PleasePrEPMe.org is a San Francisco based organization that distributes information about HIV Pre-exposure prophylaxis (PrEP) and PrEP resources. Through their website, they provide state-specific provider information, including a provider finder of PrEP providers across the United States. The site is in English and Spanish.
Hook 42 created the new Drupal 8 website and migrated all content.
About the project
The goals of the project were to remove pain points from their previous custom Angular.js implementation and add CMS functionality. The previous website was difficult to support and extend by the non-technical team, slowing the time-to-market for information distribution. Some updates were performed using SQL commands directly to the production database by the non-technical content team leading to errors and unpredictable results.
Key improvement goals include:
-
Hosting, development, and deployment workflow
-
Content Editor interface for non-technical content updates
-
SEO support
-
Accessibility / 508 Compliance support
-
Migration and API Services
-
Multilingual support
-
Platform for multiple integrations
-
Content Workflow Processes and Moderation
The initial site development and content migration project was strictly budget and time-constrained and contained a large scope of feature requests. To meet the timing and budget expectations, the original design was carried over with some improvements to meet 508c accessibility compliance. Our team prioritized the use of core and contributed modules to provide best practice baselines for SEO, the Content Editor experience, multilingual support, and accessibility within the project constraints. Custom applications met the primary goals of the site - finding a PrEP provider and the population of the provider directory.
A combination of manual and programmatic migration efforts were leveraged for the project. Manual migration was used for the low amount of structural and landing page content. A programmatic migration was developed for the initial provider import and a base for an ongoing integration to consume the Emory University, and now CDC, nationwide PrEP provider feeds. After provider information is imported into Drupal, the content team adds additional information to the provider to enrich the experience.
Notable Website Features:
-
Provider Finder: React.js, Google Maps API, JSON:API, Content Entities
-
Provider Directory Feed: Recurring Migration, Custom Migrate Module, External JSON Feed
-
Multilingual Support: English & Spanish
-
Integration to Snap Engage (online chat service)
-
Component Based content creation with Paragraphs
Why Drupal was chosen
Drupal 8 was chosen to provide improvements over the original Angular installation for two leading reasons:
- Drupal’s native feature-rich CMS and website platform
- The City of San Francisco, University of California, San Francisco, and other supporting organizations choose Drupal as a supported CMS framework
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
Bootstrap was selected for the theme because it is well supported, aligned to the site’s design, and integrated support with the Bootstrap Paragraphs group. At the time of the initial build, the Bootstrap theme provided an accessibility-forward out-of-box solution.
Drupal 8’s native support was leveraged for most of the page rendering. React.js was selected as a performant solution to implement the PrEP provider finder functionality. The provider finder Provider locative information and a Google Maps integration.
A decoupled React.js application and Google Maps API render a Drupal block to provide the customized Provider Finder functionality. The application loads Drupal provider content with the JSON:API within Drupal and displays results from Drupal content entities with geolocation and other supporting metadata.
The progressively decoupled React.js application was the best technology solution for the amount of content and integration needs for the client. Contributed modules for the mapping integration were explored but were not meeting performance expectations with the amount of data surfaced to end-users. The combination of Views AJAX loading speeds and the content rendering speed (sheer amount of content) were not meeting the performance success criteria of the client.
A full-site “Headless CMS” decoupled approach was more technology than necessary and out of budget and schedule. The overall cohesiveness of Drupal’s admin and rendering system with the decoupled React.js application provided the best of both worlds across the site. The new site’s architecture did not introduce any of the original Angular site issues the project was meant to prevent.
The recurring provider importer was built leveraging the Drupal Migrate API and an external feed using JSON API. Custom plugins were written to parse, extend, clean, and map data fields from the source directory into the website’s content structure.
Pantheon was selected as the hosting solution because of its robust publication and hosting tools that fit the client’s budget. The time-to-market for procurement and deployment was very fast and fit the client’s schedule.
