Maple Migration

Overview

Year
2025
Team
Growth Marketing Director
Product Manager
Marketing Enablement Director
Production Designer
Product Marketing Manager
SEO agency
Role
Web development
UI design
View Maple

What is Maple?

Maple is a virtual healthcare platform founded in 2015. It offers direct access to doctors and nurse practitioners, 24/7 from your smartphone, tablet, or computer. Maple can be accessed privately as an individual, through employer benefits or insurers or publicly through select provincial health systems. To date, over 3 million consults have been completed.

The Project

Migrate Maple's existing monolithic WordPress site to a static site build on Cloudflare Workers using headless WordPress on AWS Lightsail.

The Brief

Context

An audit of the top 20 pages by traffic revealed significant performance, UX, accessibility and brand-consistency problems across the marketing site:

  • Outdated platform: WordPress ran as a multisite install on an outdated core, theme and PHP version, with over 44 active plugins.
  • Expensive hosting: Pantheon's plan ran around $1k a month and was difficult to optimize. Pushing a single change per environment took over ten minutes, in addition to persistent caching issues.
  • Buggy page builder: Beaver Builder was slow and tedious to edit, requiring manually recreating pages across environments to share previews with stakeholders and introduced inconsistencies with custom CSS/JS per page.
  • Client-side geotargeting: GeoTargetingWP swapped page content entirely client-side, causing layout shifts and loading overhead.
  • Unreliable scheduling: WordPress's built-in scheduler wasn't a real cron job, so scheduled pages often failed to publish on time.
  • A11Y issues: Interactive components were missing state feedback and proper focus management.
Pre-migration desktop homepage with LCP 3.1s in yellow, CLS 0.43 in red and TTFB 2.3s in red below it. Hero section titled 'Skip long waits at the clinic. Talk to an online doctor now.', an email sign-up form and provider/patient chat animation. Review section below titled 'Care starts with trust here' with three five-star reviews.
Pre-migration desktop French homepage with LCP 7.2s, CLS 0.63 and TTFB 4.3s all in red below it. Hero section titled 'Consultez un médecin en ligne au Canada', an email sign-up form and a grid of nearby pharmacies on maps. Press section below titled 'On parle de nous' with six news logos.
Pre-migration desktop pricing page with LCP 3.8s in yellow, CLS 0.89 in red and TTFB 2.1s in red below it. Section titled 'Experience the Member advantage' with a membership card at $79.99 a month listing four benefits, next to a photo of a hand holding a phone on a video call with a doctor.
Pre-migration desktop Nova Scotia regional page with LCP 3.4s in yellow, CLS 0 in green and TTFB 2.6s in red below it. Hero section titled 'See a doctor or nurse practitioner for free online in Nova Scotia today and skip the walk-in clinic' with two registration options, next to a photo of a woman with a laptop. Press section below titled 'Proudly featured in' with six news logos.
Pre-migration desktop sick notes features page with LCP 3.3s in yellow, CLS 0 in green and TTFB 2.6s in red below it. Hero section titled 'Online doctor's note for work or school in Canada' and an email sign-up form, next to a photo of a person wrapped in a blanket with a doctor's note card. Section below repeats the same title.
Pre-migration desktop online prescriptions features page with LCP 2.2s in green, CLS 0 in green and TTFB 1.3s in yellow below it. Hero section titled 'Online prescriptions and refills in Canada' and an email sign-up form, next to a photo of a woman holding a mug with diagnosis and prescription cards. Section below titled 'Getting a prescription on Maple is easy'.
Pre-migration desktop how it works features page with LCP 3.1s in yellow, CLS 0 in green and TTFB 2.1s in red below it. Hero section titled 'Get an online doctor consultation in minutes' and an email sign-up form, next to a photo of a smiling woman with diagnosis and prescription cards. Section below titled 'Talk to a doctor online in three easy steps'.
Pre-migration desktop dermatologists specialties page with LCP 1.7s in green, CLS 0 in green and TTFB 1.9s in red below it. Hero section titled 'Talk to a dermatologist online in Canada without a referral' and a 'See a dermatologist' button, next to a photo of a smiling man applying cream to his face. Section below titled 'Seeing a dermatologist on Maple is easy'.
Pre-migration desktop screenshots of top 8 pages along with corresponding metrics.

Goals

  • Pass Core Web Vitals across the top 20 pages by traffic, with a focus on Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) and Time to First Byte (TTFB)
  • Simplify the deploy and content-editing workflow, and reduce hosting cost
  • Replace page-by-page custom styling with a consistent, on-brand design system

Requirements

  • Editable for the entire marketing team, in both English and French
  • Region-specific content based on geolocation
  • Preserve existing SEO value and minimize content loss

The Process

Design System

Before any page could be rebuilt, the site needed a design system to rebuild it with. Since the product design team already had one, base typography, colours and spacing, along with elements like buttons and form fields, were reused directly and extended to cover the range of components marketing pages needed. New pages started pulling in these new styles, along with standardized headers, footers and heroes built on the new tokens, iterating further as new content types came up throughout the migration.

Marketing design system type scale for headings and default text elements. First column is a serif heading scale from 5x large to 2x small. Second column shows styles for heading one to six and paragraph elements.
Marketing design system colour tokens as labelled circles in a four-column grid. Primary reds, a plum secondary, tertiary greens and a row of quaternary creams at the bottom.
Four marketing design system hero variants, each above its label. 'Full media text condensed' sets white text over a full-bleed photo of a mother and daughter with a laptop. 'Media text', 'media text condensed smaller text' and 'media text emphasis' each pair a title, text and two buttons with an image, on cream, red and pale green backgrounds.
Marketing design system device variants in a two-by-two grid of tinted panels. The app dashboard on a phone in English and French and a symptom checklist phone paired with a video call phone, also in both languages.
Marketing design system form elements. A radio fieldset and a checkbox group with options selected and a radio group and textarea in their required error states with red warning messages and borders.
Typography, colours, hero and image variants as well as form elements from the marketing design system.

Edge Static Site

Optimizing the existing site incrementally was considered, but was decided against because of the high effort and modest gains from improvements like opting for a lighter plugin or switching to a faster host. Going static with serverless functionality through Cloudflare Workers removed the entire class of problems in one move instead.

  • Static site generation: Formation Static handles site generation, and Formation handles web components and styles for an optimized front end.
  • Geotargeting: Cloudflare-provided geolocation information allows redirects and content rewrites at the edge, replacing client-side logic.
  • Optimized media: Uploads now live in Cloudflare R2, served through a Worker that transforms width, height, format and quality.
  • SEO preservation: Redirects compile into static 301s at build time, alongside more consistent per-page schema and auto-generated sitemaps.
WordPress edit screen for the how it works page with the deploy panel open, split into production and preview, each with a build button, progress spinner and links to the built/live preview pages. Hero block on the left shows its title, text and button.
WordPress edit screen for the home page with the geotarget panel open, showing a searchable checklist of provinces and territories with Nova Scotia selected. Page blocks are listed on the left: options, geotarget, hero and containers with their presets.
Admin screens showing production and preview builds and page with geotargeting enabled.

Headless WordPress

Sticking with WordPress instead of switching to another headless CMS came down to practical factors. AWS was already used elsewhere at Maple. It also meant owning our own data and having the option to sit behind SSO without extra cost. Staying on the same CMS also simplified the migration and shortened the learning curve for the team.

  • Shareable previews: Live preview links and copyable/syncable patterns replaced manually recreating pages across environments to share with the team.
  • Faster workflows: Production data can be selectively pulled into local and staging environments to keep them in sync, and bulk changes are easier with WP CLI and Gutenberg blocks instead of Beaver Builder's serialized data.
  • Reliable scheduling: A real server-level cron job replaced WordPress's traffic-triggered scheduler, so entries publish on time.
  • Editable forms: Forms moved from Gravity Forms to Formstack, allowing the business development team to update them on their own.
WordPress pattern library screen for the Maple site with 67 patterns across sixteen categories in the sidebar and a grid of eight synced patterns with emoji thumbnails, names and tags.
WordPress edit screen with a container block selected, holding a nested content header and provider slider pattern, with sibling containers listed below. Block panel on the right shows settings for internal title and preset and styles for border, radius, theme and background colour.
Admin screens showing editable patterns and container block with nested pattern and options.

The Outcome

A month after launch, Core Web Vitals passed across every one of the top pages. Search Console also told the same story. Pages flagged as poor or needing improvement dropped to zero across both mobile and desktop, and the count of good URLs more than doubled on mobile.

Mobile

  • Poor URLs – 66 → 0
  • URLs need improvement – 582 → 0
  • Good URLs – 272 → 1,029

Desktop

  • Poor URLs – 24 → 0
  • URLs need improvement – 322 → 0
  • Good URLs – 574 → 1,045
Post-migration desktop homepage with LCP 0.8s, CLS 0 and TTFB 0.4s all in green below it. Hero section titled 'Healthcare that fits your life' over a full-bleed photo of a father cradling a sleeping baby. Trust section below with number of five-star in-app reviews and scores on the App Store, Google Play and Trustpilot.
Post-migration desktop French homepage with LCP 0.7s, CLS 0 and TTFB 0.3s all in green below it. Hero section titled 'Consultez un médecin en ligne au Canada' and a sign-up button, next to a photo of hands holding a phone showing the Maple app. Review section below titled 'Plus de 1 million de notes de 5 étoiles' with three reviews.
Post-migration desktop pricing page with LCP 0.7s, CLS 0 and TTFB 0.3s all in green below it. Section titled 'Experience the member advantage' with a membership card at $85 a month listing four benefits and a join button, next to a photo of a hand holding a phone on a video call with a doctor.
Post-migration desktop Nova Scotia regional page with LCP 0.6s, CLS 0 and TTFB 0.3s all in green below it. Hero section titled 'See a doctor online in Nova Scotia — get care anytime, 24/7' and a call to action button, next to a photo of a woman with a laptop. Press section below titled 'Proudly featured in'.
Post-migration desktop sick notes features page with LCP 0.7s, CLS 0 and TTFB 0.4s all in green below it. Hero section titled 'Online doctor's note for work or school in Canada' and a sign-up button, next to a photo of a person wrapped in a blanket with a medical note card excusing them from work.
Post-migration desktop online prescriptions features page with LCP 0.7s, CLS 0 and TTFB 0.4s all in green below it. Hero section titled 'Online prescription refills within minutes' and a sign-up button, next to a photo of a woman holding a mug with diagnosis and prescription cards.
Post-migration desktop how it works features page with LCP 0.7s, CLS 0 and TTFB 0.4s all in green below it. Hero section titled 'Get an online doctor consultation in minutes' and a sign-up button, next to a photo of a smiling woman with diagnosis and prescription cards.
Post-migration desktop dermatologists specialties page with LCP 0.5s, CLS 0 and TTFB 0.3s all in green below it. Notice bar listing the four provinces the service is available in, above a hero section titled 'Talk to a dermatologist online in Canada without a referral' and a call to action button, next to a photo of a smiling man applying cream to his face. Trust section below with review ratings and scores.
Post-migration desktop screenshots of top 8 pages along with corresponding metrics.

The design system has held up past launch too. Content editors have been able to make updates on their own with relative ease. A recent brand refresh, adjusting components and site-wide styles, rolled out with a fraction of the effort it would have taken pre-migration. Stakeholders have noticed the difference too, remarking how much faster the site feels since launch.

View Maple

Explore more work

All work items