A New Era of Healthcare With Drupal 8 & Gatsby
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: MagMutual's New Brand Identity
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.
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.
CIO of MagMutual Insurance Company
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
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.
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.
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.
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.
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
Bringing Brand Narrative to Design
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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
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.