NEW: Heap for mobile. Track every interaction, on every platform.

Learn more
skip to content
Loading...
    • The Digital Insights Platform Transform your digital experience
    • How Heap Works A video guide
    • How Heap Compares Heap vs. competitors
    • The Future of Insights A comic book guide
  • Data Insights

    • Session Replay Complete context with a single click
    • Illuminate Data science that pinpoints unknown friction
    • Journeys Visual maps of all user flows

    Data Analysis

    • Segments User cohorts for actionable insights
    • Dashboards Share insights on critical metrics
    • Charts Analyze everything about your users
    • Playbooks Plug-and-play templates and analyses

    Data Foundation

    • Capture Automatic event tracking and apis
    • Mobile Track and analyze your users across devices
    • Enrichment Add context to your data
    • Integrations Connect bi-directionally to other tools

    Data Management

    • Governance Keep data clean and trusted
    • Security & Privacy Security and compliance made simple
    • Infrastructure How we build for scale
    • Heap Connect Send Heap data directly to your warehouse
  • Solutions

    • Funnel Optimization Improve conversion in user flows
    • Product Adoption Maximize adoption across your site
    • User Behavior Understand what your users do
    • Product Led Growth Manage PLG with data

    Industries

    • SaaS Easily improve acquisition, retention, and expansion
    • eCommerce Increase purchases and order value
    • Financial Services Raise share of wallet and LTV

    Heap For Teams

    • Product Teams Optimize product activation, conversion and retention
    • Marketing Teams Optimize acquisition performance and costs
    • Data Teams Optimize behavioral data without code
  • Pricing
  • Support

    • Heap University Video Tutorials
    • Help Center How to use Heap
    • Heap Plays Tactical how-to guides
    • Heap Updates
    • Professional Services

    Resources

    • Blog A community for digital builders
    • Content Library Ebooks, whitepapers, videos, guides
    • Press News from and about Heap
    • Webinars & Events Virtual and live events
    • Careers Join us

    Ecosystem

    • Customer Community Join the conversation
    • Partners Technology and Solutions Partners
    • Developers
    • Customers Over 8,000 successful companies
  • Free TrialRequest Demo
  • Log In
  • Free Trial
  • Request Demo
  • Log In

All Blogs

Product Insights

How to Rebrand and Migrate Your Website in 3 Weeks with Contentful

Heap
June 29, 20226 min read
  • Facebook
  • Twitter
  • LinkedIn

Originally published on contentful.com.

In a recent webinar, we 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 front-end web engineering in-house — all in a few weeks. (No, I’m not kidding!)


The challenge

Direction came from the top: time to rebrand the company. Oh, 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 didn’t just provide us with a new logo, new colors, and new fonts. We saw the decision to move forward with a rebrand as an opportunity to also reevaluate our entire tech stack. By taking our key features and also key pain points, we decided to replatform and move to a Jamstack by utilizing the best-in-class infrastructure accommodated by metric-driven analytics. 

This meant we needed to rebrand and migrate around 600 pages of content within 3 weeks! 

Just wait — it gets better. 

Before we began, we outlined the following 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 would allow us to bring engineering in-house to increase productivity.

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

  • Improve website performance.

  • Implement the new platform in a way that would reflect our rebranded visual identity and support brand consistency across the digital experience.

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. Time for change! As we were very familiar with what wasn’t working, 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 CMS platforms, we landed on Contentful. We chose to pair Contentful with Netlify and .js/React/Next.js to create our Jamstack. Why? Mostly because this stack met all of our requirements: 

  • A Headless CMS, so we could completely decouple content from rendering

  • A fully automated CICD pipeline that would allow for near-instant deployments

  • Multiple QA environments

  • Flexibility to do both static and dynamic page rendering

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

    • Marketing Automation - Marketo, Salesforce

    • Customer Experience - Scheduling, Chat

    • Testing & Personalization Engines

    • DAM/Content Repositories

    • Heap Product and other Custom Apps

  • A platform that is extremely easy to use, intuitive, and powerful (i.e., good for both marketers and web dev team). 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 helped us deliver against 3 key metrics:

    • Volume of Content Deployments

    • Time to Build

    • Quality of Web Experience

One of the most compelling aspects of the new CMS for our team was ease of use. We had a web team of one, and needed all hands on deck in order 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 entire marketing team (25 people!) onboarded and building pages within the same day! 

Next: we do the work!

Once we had our modern tech stack in place, we began our 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. 

In order to launch all 600 pages within our three-week time frame, we brought in 25 different marketing users of all technical skill levels to help build pages on the site. With minimal training, each individual was set out to tackle anywhere between 10-60 pages each. 

Once pages were built, another set of individuals were ready to solely QA. This is where we tapped into the entire company to help QA. We had about another 25 people looking at every page of the site, clicking every link, submitting every form and checking on every device type. All QA was completed in about 3 days! 

Now, to the fun part! Setting up our Heap reports 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 any event set up via CSS translated over 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 out of the previous CMS and into GTM and did thorough QA and testing to make sure all scripts were firing correctly (took just 2 days!). 

Importantly, before launching we used Heap to set a baseline on performance, so we could later look back and be sure that we had achieved our goals of “do no harm” and “improve website performance.” 

What we learned (Hint: it’s possible!)

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

Our choice of Jamstack and our decision to tackle updating both the tech and visual identity of our brand was also key. 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, we ended up parallel pathing the engineering and content builds. 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 the time to do the engineering and build work in serial vs. parallel, building and QA-ing as soon as a module is complete. 

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

The companies providing the best-in-class solutions will be those that are focusing on what they do best, rather than trying to solve “all” of the problems their users face. We believe that world-class point solutions that work well together will outperform more expansive platforms that often end up overextending 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:

ttfb-pre-migration

To post-Contentful:

ttfb-after-migration

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’re now planning 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 and/or chatbots, etc.). Our 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 best-in-class tech stack coupled with best-in-class analytics, we’re in a position to build a best-in-class digital experience. 

A great combination

Contentful and Heap are two great examples of companies disrupting their fields with next-generation technology that solves problems older tech stacks can’t by providing opportunities to do things never done before. 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. 

Heap

Was this helpful?
PreviousNext

Related Stories

See All

  • Heap.io

    Data Stories

    Celebrating H&R Block as the inaugural winner of the Digital Innovator Award

    March 22, 2023

  • Heap.io

    Product Updates

    Introducing Heap for mobile: see Everything, Everywhere all at once

    March 14, 2023

  • Heap.io

    Data Stories

    How I shipped a mobile app without tracking and bad things™ happened

    March 15, 2023

Subscribe

Sign up to stay on top of the latest posts.

Better insights. Faster.

Request Demo
  • Platform
  • Capture
  • Enrichment
  • Integrations
  • Governance
  • Security & Privacy
  • Infrastructure
  • Illuminate
  • Segments
  • Charts
  • Dashboards
  • Playbooks
  • Use Cases
  • Funnel Optimization
  • Product Adoption
  • User Behavior
  • Product Led Growth
  • Customer 360
  • SaaS
  • eCommerce
  • Financial Services
  • Why Heap
  • The Digital Insights Platform
  • How Heap Works
  • How Heap Compares
  • The Future of Insights
  • Resources
  • Blog
  • Content Library
  • Events
  • Topics
  • Heap University
  • Community
  • Professional Services
  • Company
  • About
  • Partners
  • Press
  • Careers
  • Customers
  • Support
  • Request Demo
  • Help Center
  • Contact Us
  • Pricing
  • Social
  • Twitter
  • Facebook
  • LinkedIn
  • YouTube

© 2023 Heap Inc. All Rights Reserved.

  • Legal
  • Privacy Policy
  • Status
  • Trust