MagMutual Insurance: Drupal 8 & Gatsby Redesign

The Challenge

To align the website with company-wide rebranding efforts, MagMutual challenged Mediacurrent to help craft a narrative and design system to clearly establish brand position as an industry pioneer. They needed a strategic partner to uncover high-value opportunities for improved functionality and user experience. These user experience and technology goals were driven by MagMutual’s overarching strategic objectives: to embrace data and automation, prime for expansion, and improve operational efficiency.

The homepage experience called for a clean layout to feature MagMutual’s new branding message. Stronger CTAs, cross-linking, and multiple entry opportunities were key to drive content discovery. Defined image styling and subject matter needed to reflect the new brand values, breaking past the “stock image” fatigue in modern healthcare brand marketing.

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 deliver 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.

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.

Project Highlights

Digital Strategy

Measuring Success 

A measurement strategy serves as a framework for measuring site performance against MagMutual’s business objectives. Together with proactive planning, we set specific goals and defined performance indicators for the new site. For example, monitoring task completion rate and the number of error pages quantifies the impact of our goal to improve user satisfaction. Other success metrics include:

• Generate Leads - New account created, eQuotes quotes created,
• Raise Brand Awareness - SEO, organic traffic, marketing campaigns.
• Educate and Engage - Learning Center login, course completions, video consumption for both new and current users.  

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 Graves, CIO of MagMutual Insurance Company 

Connecting Content to User Needs

To help increase content marketing effectiveness, 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.

We reviewed MagMutual’s existing user personas to determine 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. The data gathered from our content strategy work helped to inform the navigation and information architecture.

Data Visualization & Analytics 

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.

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.

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, as in this brand personality test, where we examined photography styled to determine what was on-brand and what was not.

The strategy team led a discussion around the purpose of each product page. We put users at the center of each experience, asking questions around: Why do users care? How does the product work? Why should users trust the brand? What should users do next?

Reimagining What Insurance Looks Like 

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.

Designing for Drupal

From the Drupal perspective, our design team was able to ensure that the editorial, page-building experience included all of the options necessary to make the components being developed as flexible as possible. Text styles, background colors, and layout options are all examples of custom fields and styles added to different components that allow for a customized editorial experience catered towards the components created during design.

• Consistent Brand Image: The site’s new design brings MagMutual’s brand evolution to life through their website. The new visual language was applied to a set of website components that 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.

Organized Learning Resources 

We worked with MagMutual to create a more sophisticated filtering system for the Learning Center’s toolkit feature. These toolkits provide an essential resource for navigating healthcare compliance challenges. 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. We recommended using a float label pattern in the contact experience to help users eliminate extra visual fixations that can often result in more scanning and thus, drop off.

Bringing Brand Narrative to Design 
The new designs integrate a strong brand narrative throughout the website that establishes what MagMutual does and how they differ from competitors. The left-right and full-width components (shown above) were designed to speak to the 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.

Development

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.

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 Tools

• 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.