A New Era of Healthcare With Drupal 8 & Gatsby

MagMutual realized their Drupal 7 platform wasn’t going to evolve with them for the long-term. They needed a solution to accommodate multi-faceted search dynamics and complex user authentication requirements pulling data from multiple services and APIs. Ultimately, they sought a ‘single source of truth’ for all data. With Drupal 9 on the near horizon, preparing for a smooth upgrade path was critical.

For MagMutual, the best path forward was an enterprise-grade CMS built on an open source Drupal 8 foundation. Performance and speed were driving priorities. Internally, the marketing team needed more customization control to build new pages. 

We worked with the MagMutual team to gain an understanding of evolving strategic objectives, brand vision, and high standards for the website’s user experience.  

A strategic analysis added depth to the materials provided by MagMutual and served as a point of reference when working through the design phase. As we proceeded through the design process, examining different pages, features, and functions strategy and design worked closely to ensure that different user types and their journeys were addressed while structuring the content strategy and page-building experience around a reusable, component-based design system. A suite of flexible components for page building and content display delivers an improved editorial experience.

The Mediacurrent development team brings a JAMStack mindset and deep Drupal 8 experience to the project. Now, a fully decoupled Drupal 8 system with a Gatsby front-end lifts the burden from MagMutual’s technology team and puts content curators at the helm of the website. The MagMutual team can adapt swiftly to meet customer demands, changing marketing strategies as they continue to grow and evolve with its customer base.

MagMutual Interview: Project Vision and Results 

A competitive and comparative analysis clearly defined MagMutual’s position in the marketplace and benchmarked against brands with a similar audience and focus. We supported MagMutual to evaluate the digital presence of their peers (top insurers). At the same time, we drew inspiration from consumer brands like Apple and Land Rover. Analyzing each site for design, conversion paths, navigation, content, and search capabilities equipped both teams with the right intelligence to steer the redesign plan.

Mediacurrent worked closely with MagMutual’s marketing team to understand the brand evolution exercise taking place internally and applied that visual aesthetic to the website. We helped explore the boundaries of the visual language and guided the creation of a component-based design system that speaks this language.

In a card sorting exercise, we used patterns of persuasion and UI cards to identify UI patterns for the system. We practiced group thinking exercises such as a brand personality test and examined photography styles to determine what was on-brand and what was not.

As a long-term support partner, Mediacurrent joined conversations leading up to the redesign. We proposed a decoupled approach.

Drupal 8 + Gatsby

On the back end, Drupal 8 provides a  powerful capacity for content modeling. Gatsby, the presentation layer, adds a robust dimension of UI flexibility and performance capabilities. Combined, Drupal and Gatsby form a fully open source and enterprise-grade system—one that puts MagMutual on an empowered path to manage content and experiences.

Developer Interview

Server

• Apollo GraphQL Server allowed us to quickly build a production-ready, self-documenting API that could be used by our Front-end developers to request data from multiple sources using one API.
• AWS Lambda allowed us to write business logic that supported the GatsbyJS site without having to manage servers.
• Serverless Framework provided a standard framework for organizing and deploying our Lambda functions and related AWS services which were key to providing dynamic resources for the web site.

React

• Storybook, an open source component library tool, was used to build React components. This approach aligns with Gatsby’s React-based framework. Front-end developers had a faster, easier way to run a style guide — with no Drupal knowledge required. 

Search

• Elasticsearch powers both global site search and search for the Learning Center. The Elasticsearch is hosted on AWS. When content is created in Drupal, we use the Elasticsearch AWS Connector module to update the index in AWS.
• The Search API Drupal module allows us to configure how we want the content to be configured in the search index.
• A custom AWS Lambda function is used to provide access control for Gatsby to use the AWS Elasticsearch service as well as and rate-limiting protection for the ES service.

• On the Gatsby side, we leveraged the open source SearchKit library to quickly build a powerful faceted search.

Authentication 

• Auth0 is used for authentication. In a standard Drupal project, users are managed by Drupal. With Gatsby added to the mix, and SSO between several services being required, we decided to use a third-party service instead of using Drupal for authentication, MagMutual opted for Auth0, an enterprise-level solution with easy access to customer support. Only content editors access Drupal, so exposure to security threats is limited. 

Hosting 

• Netlify provides hosting of the Gatsby site. Netlify is our top pick for Gatsby/Drupal sites for its continuous integration flow and capabilities to set up production and test environments in the same place.