Product Insights
How to Rebrand and Migrate Your Website in 3 Weeks with Contentful
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:
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’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.