In a recent webinar, the team at Heap sat down with Dina Apostolou, VP of Marketing at Contentful, to share our rebrand story, “How We Built a World-Class Website Using Heap + Contentful.”

Keep reading to learn how we pulled off a rebrand AND a tech stack migration AND built a full website AND brought frontend web engineering in-house — all in a few weeks. (No, we’re not kidding!)

The challenge

The direction came from the top: Time to rebrand the company. And we don’t just mean, “Put together a new brand book.” We mean, “Full tech stack migration. And clean up the whole website.”

“Oh, and by the way, you have to do all of this in 21 days.”

Heap’s rebrand story wouldn’t be capped at a new logo, new colors, and new fonts. We saw the rebrand as an opportunity to also reevaluate Heap’s entire tech stack. In considering coveted features and past key pain points, we decided to replatform and move to Jamstack by utilizing a decoupled content architecture accommodated by metric-driven analytics. 

This mandated a rebrand migration of around 600 pages of content in three weeks! 

Before we began, we outlined our goals: 

• Do no harm.

• Position ourselves for long-term growth, scalability, and support. 

• Accelerate speed to market and enable agility for future changes.

• Find a platform that increases productivity by bringing engineering in-house.

• Clean up tech debt and deprecate low-performing pages. 

• Improve website performance.

• Implement the new platform in a way that reflects our rebranded visual identity and supports brand consistency across digital channels.

First step: A new CMS and a new Jamstack

After working with an old tech stack for several years, we were sick of silos and inefficient web dev processes. It was time for a change! We were very familiar with what wasn’t working, so we had a long list of requirements for our new tech stack. 

To start, we had to choose a new CMS. After evaluating what seemed like a million platforms, we landed on Contentful. We paired it with Netlify and React framework Next.js to create our Jamstack. Why? Mostly because this stack met all of our requirements: 

• A headless CMS that completely decouples content from rendering.

• A fully automated CI/CD pipeline to support near-instant deployments.

• Multiple QA environments.

• Flexibility for both static and dynamic page rendering.

• A platform (Contentful+Netlify) that integrates seamlessly with a large ecosystem of additional applications:

  • Marketing automation (e.g., Marketo and Salesforce)

  • Customer experience (e.g., scheduling and chat)

  • Testing and personalization engines

  • Digital asset management/content repositories

  • Heap products and other custom apps

• A platform that’s easy to use, intuitive, and powerful (i.e., good for marketers and web developers — one that would enable the entire marketing team to use the platform, while providing bandwidth for the web team to focus on delivering new content capabilities). 

• A platform that helps us deliver against three key metrics:

  • Volume of content deployments

  • Time to build

  • Quality of Web experience

One of the most compelling aspects of the new CMS was ease of use. We had a web team of one, and needed all hands on deck to get our website rebranded and migrated in time. Contentful’s platform is so user friendly that it was quick and easy to get our team of 25 marketers onboarded and building pages in just one day! 

Next: Migration, QA, and setting up analytics!

Once we had our modern tech stack in place, we began the migration process. Between building the site and setting up our Heap reports, we leveraged all of our resources within the Marketing team, as well as the entire company. 

To launch our existing 600 pages within our three-week time frame, we brought in 25 different marketing users of various technical skill levels to build pages on the site. With minimal training, each individual set tackled 10-60 pages each. 

Once pages were built, another set of individuals focused on QA — we tapped into the entire company. Another 25 people looked at each page of the site, clicking every link and submitting every form, from every type of device. QA was completed in about three days! 

Now, to the fun part — setting up our Heap reports! This was simple, mostly because we kept our site architecture intact (URLs didn’t change, nav didn’t change, etc.). We doubled down on making sure events set up via CSS translated correctly into our reporting by using our Event Visualizer. We added in combo events for any pages we needed to redirect. We moved all scripts from the previous CMS into Google Tag Manager (GTM) and did thorough QA and testing to ensure all scripts were firing correctly (this took just two days!). 

Before launching, we set a performance baseline with Heap. In the future, this would allow us to reflect on whether or not we achieved our goals of “do no harm” and “improve website performance.” 

What we learned (Hint: A 21-day rebrand and migration is possible!)

Although the compressed timeline wasn’t ideal, our team certainly rose to the occasion — and built a sense of collaboration and camaraderie along the way. While we wouldn’t recommend rebranding in three weeks, we did find that holding to a set date ensured the project didn’t drag on. 

Our choice of Jamstack and the decision to tackle updating both the tech and visual identity of our brand was key to our success. The comprehensive approach allowed us to get everything done at once, avoiding the drawn-out timeline that many rebrand projects end up following.

Bottom line: With our new, modern Jamstack, the pathway from ideation to execution is much, much shorter.

Because of the compressed timeline, our engineering and content builds ran parallel. As a result, we were given modules that were still in progress, which made it difficult to do a thorough QA early on. So we’d definitely recommend taking a serial approach for engineering and building, then QA-ing as soon as a module is complete. 

The landscape of digital content will continue to evolve as disruptive technologies work to solve pain points that legacy tech stacks have created or not yet solved. Integration will also be key going forward, as Martech becomes more modular and flexible (like we’ve seen with code stacks). 

The companies providing quality solutions are those that focus on what they do best, rather than trying to solve “all” of the problems users face. We believe that world-class point solutions that work well together will outperform more expansive platforms, which often overextend their reach.

So how did we do? (Results)

The data so far is indicating a significant increase in site speed. We’re continuing to maintain key metrics for site traffic/lead generation. 

Check out our TTFB (Time To First Byte) pre-Contentful

To post-Contentful

We went from seconds to milliseconds with room to continue to improve!

Anecdotally, we saw a ton of positive feedback on the new brand in social media, as well as directly from our customers. With all of the PR/Comms tied to the rebrand and site launch, we also saw an increase in brand awareness based on major increases in web traffic, social media engagements, and PR. 

What’s next?

After doing all of this in 21 days, we now know we can do anything! 

For our next step, we plan to expand our web architecture to include the next “ring” of applications needed to manage our website user experience (i.e., personalization, testing, journeys, VOC, CX platforms like calendaring or chatbots). Jamstack will enable the build itself, while all of the other apps will help inform what to build. 

We’re also looking forward to using Heap to identify areas on our site that are either working well or need improvement. With a top-notch tech stack that brings in top-notch analytics, we’re in a position to build a top-notch digital experience. 

A great combination

Heap is the leading digital insights platform that combines quantitative and qualitative analytics for a 360-degree view of your customer journey to see what’s really happening. With Heap you can see, understand, and act on every single thing your users do.

Contentful and Heap are disrupting their fields by providing next-generation technology that solves problems common with older tech stacks. When working in concert, Heap and Contentful help teams (like ours) deliver outstanding digital experiences by accelerating the time to insights and the time it takes to act on them. 

Take a tour

Chat with our team

We'll show you how our composable content platform can enhance 1:1 customer connections and drive growth for your business.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.