Skip to main content

Case Study

A New Era of Healthcare With Drupal 8 & Gatsby

A leading professional healthcare liability insurer taps the power of Drupal 8 & Gatsby with a bold rebrand

Project Highlights

For nearly four decades, MagMutual has led the frontier of medical professional liability insurance. To confidently communicate its fast-innovating services, MagMutual needed a website redesign in step with a larger corporate rebranding effort. 

Over 30,000 physicians and healthcare organizations rely on MagMutual.com for learning resources, products, and services covering all aspects of healthcare liability, MagMutual teamed with Mediacurrent to further the website’s core mission: serving and protecting its policyholders. The new website features a UX-minded design transformation and a complete, decoupled technology upgrade with Drupal and Gatsby.  

It was time for our brand to transform in the same way we’re transforming healthcare liability insurance, making it more modern, innovative and impactful.

-Neil Morrell, president and CEO of MagMutual Insurance Company
Source: MagMutal's New Brand Identity

Results 

  • A decoupled design approach offers limitless possibilities to evolve the site—with any choice of front end tools

  • Member data is kept secure in its source location but aggregated by Apollo GraphQL in real-time, simplifying business logic on the website.
  • 0%

    Improvement on homepage load time (18.47 seconds to 3.3 seconds).

  • 0

     Reduction in page weight on the homepage.

  • 0%

     The Learning Center loads faster than the previous site.

I would absolutely recommend Mediacurrent to people who are embarking on a Drupal 8 project. They come with a well-rounded team of strategists, UX/UI designers, and developers. Tapping into an organization like Mediacurrent that can share knowledge and align toward a common goal really creates the story for success -- from what we're able to deliver, to the results we're able to measure, to being able to stay on budget and on time.

Sallie GravesCIO of MagMutual Insurance Company 

Open Source

Why Drupal 8?

  • Flexible integrations: Bringing user data together into a centralized platform reduces website support costs and ensures a full, accurate view of customer interactions. 
  • Content creation features: Drupal 8 empowers the marketing team to take ownership of content updates and page creation sitewide
  • Drupal JSON API: Increases performance flexibility 
  • Secure: A highly secure platform protects customer information 
  • Future-proof: a simple upgrade path clears the runway to Drupal 9 

The Challenge

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. 

Mediacurrent’s Solution

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 

DIGITAL STRATEGY

Connecting Content & Users

The transformed site features a fresh approach to content strategy with a Learning Management System integration to engage current customers. Certifications allow for discounts in policyholder rates, incentivizing opt-in and site engagement.

A review of MagMutual’s existing user personas determined how each persona’s goals would be met on the new site. This work was also key to guide content strategy for the new product pages. We collaborated to outline page goals, features, and expected user journeys that were used to inform design wireframes, navigation, and information architecture.

DIGITAL STRATEGY

Data Studio

As a part of our continued data optimization strategies, we used Google Data Studio to create an easy-to-understand report through data visualization. Data Studio is an intuitive reporting platform that processes raw data into shareable media. From these visual trends, their team can better understand the best next steps with less time and energy dedicated to data analysis. Our work with Google Analytics made it possible for the MagMutual team to harness their data to accurately monitor KPIs and improve customer service. 

In addition to data visualization, we used Google Analytics to understand the state of their SEO and how to continue to make improvements. This helped our team define a redirect plan and SEO optimization strategy moving into the new launch.

STRATEGY + UX/UI DESIGN

Designing a Digital Experience

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.

UX/UI DESIGN

Reimagining What Insurance Looks Like

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.

UX/UI Design

Designing for Drupal

Mediacurrent's design team ensured that the editorial, page-building experience included all of the options necessary to make the components being developed as flexible as possible. To customize the Drupal editorial experience, custom fields and styles such as text styles, background colors, and layout options were added to these components.

Consistent Brand Image 

Bringing MagMutual’s brand evolution to life, the new visual language was applied to a set of website components. These can be mixed-and-matched by content editors to maintain brand consistency while varying the display of content.

Modern Appeal

To showcase premium services, the visual framework and UI of the website was reworked to have a modern, fresh appeal. Under the direction of MagMutual’s marketing team we implemented the swiss grid system, and followed design patterns that were fluid, responsive, and minimal.

Persona-Tailored Photography

Understanding the persona’s lifestyle habits, macro photography was selected that was both attractive and unexpected to the medical profession.

Design Features

The new visual framework and UI of the website align with company-wide rebranding efforts and overall content strategy, bringing life to the latest visual language developed for the brand. Along with the visual design, special attention was paid to different sections of the site – such as the Learning Center and eQuote process to improve the user experience with these critical business tools.

 

Organized Learning Resources 

The Learning Center's toolkit features provide an essential resource for navigating healthcare compliance challenges. A more sophisticated filtering system, including color-coding by category and iconography for content type quickly orient and empower the user to get to the content they need. Content cards positioned in rows of three offer ample negative space to reduce cognitive load.

Good Form

MagMutual had a goal to improve user flow for the website’s contact section, reducing customer service calls. A float label pattern in the contact experience helps users eliminate extra visual fixations that can often result in more scanning and thus, drop off.

Bringing Brand Narrative to Design

The left-right and full-width components speak to MagMutual's brand promise and value proposition throughout each page experience. Desaturated macro photography is pulled throughout each of the components to give the overall aesthetic a unique look and feel.

Going Decoupled

Development

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.

Open Source

Why Gatsby?

  • Speed: Gatsby’s performance optimization toolset delivers a fast, high-performing site. 
  • Powerful UI Creation: A component library creates a unified design system.  
  • Security: Removing server-side rendering from the equation reduces touchpoints for attacks.
  • Open Source: Together, Gatsby the company and a wider developer community have laser-focus on improving speed, performance, and accessibility for the technology’s future. 
  • Increased Developer Efficiency: Full control over the markup made for a more productive build process (versus keeping Drupal monolithic). Gatsby uses GraphQL at build time to access content, so when we built the APIs we needed for account portion of the site GraphQL was a natural choice. This made it easier to bring on new developers to the team - we could tell them to use the same syntax.

DEVELOPMENT

Achieving Accessibility in React

Mediacurrent’s development approach is built on high standards for web accessibility. This project inspired us to find the best accessibility tooling in the React ecosystem. Adding built-in accessibility testing to the living style guide created visibility for all project stakeholders to hold the team accountable for accessibility issues. To share what we learned with the wider Gatsby community, we open sourced a Gatsby starter with built-in accessibility tools.

Why Apollo GraphQL Server?

A GraphQL server was needed to expose data as a GraphQL API for Drupal to query.

  • Central data source: Creates a single data source for your website, aggregating data from multiple data sources. Data integrity: Apollo removes the need to sync data from different sources so it can be displayed on the website. Data is queried and retrieved in real-time using a simple API.
  • Developer velocity: Self-documented API for developers increases efficiency.
  • Open source: The Apollo GraphQL company and open source community have built a powerful, well-documented suite of tools solving a complex problem for websites that need up-to-date data aggregation.

DEVELOPMENT

Top Drupal Modules

For this project, Mediacurrent drew several Drupal modules from the community and gave back as well.

Final Thoughts

MagMutual serves the intersection of two rapidly evolving industries: insurance and healthcare. Investing in a stable, yet nimble framework for MagMutual.com gains them a competitive edge. A complete visual overhaul reinforces MagMutual’s brand promise to customers. Bringing this new brand vision and platform to life was no small task—but Mediacurrent delivered on time and within budget.

The MagMutual and Mediacurrent partnership will continuously improve the online presence to position MagMutual as a leader in healthcare liability insurance providing innovative solutions focused on solving customer needs.