Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up for Free

How WaveDirect Used Gatsby, Rudderstack, and Sanity to 4X Leads and Dominate Search Results

Sam Bhagwat
January 14th, 2022

Canadian internet service provider WaveDirect provides high speed internet and TV service to thousands of customers in Ontario, including a number of rural communities where they are the only reliable service provider available. 

When Kevin Gervais, founder and CTO of Toronto-based digital agency Touchless, was working with WaveDirect, the WaveDirect team wanted to improve their ability to digitally communicate with their customers. 

The existing WaveDirect marketing systems had some restrictions. Some of this was related to data quality – over half of addresses and phone numbers were incomplete or not formatted correctly, and a quarter of names were not standardized. With fractured or opaque marketing data, decisions were often made without a robust understanding of the customer.

The main WaveDirect goal was to progressively identify a visitor and shepherd them in a journey to being a customer. And since they were in a regulated market – data had to be stored in Canada – they needed a privacy-centric approach. 

Their project took a three-pronged approach:

  • First, data interface design and collection with Rudderstack.
  • Second, optimizing performance with a website redesign on Gatsby.
  • Third, SEO content campaigns with Gatsby and Sanity
wavedirect-architecture

Data Interface Design and Collection With Rudderstack

Because Touchless and WaveDirect were starting the project with an eye to solve the data problem, they designed and mocked up the data flow before they did anything else. “The interesting thing is, the data design drove the interface design,” Gervais said.

After consulting with business stakeholders, the team gained clarity on that toughest of questions – which metric actually mattered. For WaveDirect, that was not visitors. It was the number of visitors that used the lookup tool to check if they were eligible for Internet service. 

“What’s actually really important about the journey is we need to have somebody do a lookup,” said Gervais. “If they don’t do a lookup, they’re not really a visitor we care about. “

In addition, WaveDirect offers different services, like cable or fiber, depending on what address someone lives at. A progressive data enhancement for WaveDirect would look something like this visitor from September 2021:

visitor-journey-rudderstack

Using Rudderstack as their customer data platform (CDP), they were able to collect and display sequences of events for visitors to the sales team. And because Rudderstack was an open-source solution, they were able to achieve their data locality goals simply by running an instance of Rudderstack in a Canadian data center.

Optimizing Website Performance With Gatsby

The second part of the project was to optimize website performance. For that, WaveDirect turned to Gatsby. Once they had the designs and the data flow, the site building itself only took two or three weeks. 

Rebuilding the site with Gatsby on Gatsby Cloud, they got to “synthetic” page loads of one second. Then, they used Rudderstack to consolidate their analytics scripts, which halved page loads again to half a second.

wavedirect-core-web-vitals-lab-data

Great performance wasn’t just limited to lab tests – Google’s monitoring tools showed excellent real-world performance – coming in far under Google’s 2.5-second threshold for a Core Web Vitals SEO boost.

wavedirect-core-web-vitals-field-data

Working with Gatsby, Gervais said, fundamentally changed his approach to performance. When the technical side of it is completely buttoned up, he says, you don’t have an excuse as to why you can’t drive business outcomes beyond what you might think was possible.

“What I used to do is – you get to one second load time and stop there. Because who gets faster than one second load times?

“Once we got to where it breaks 0.5 seconds or 0.4 seconds consistently, it’s like, ‘huh.’ First, I didn’t know that was possible. Second, Google seems to care. And then it’s also impacting click rates. Some of these is just crazy to see. Because of the performance change and the page experience score, Google highlights it more.”

“And so you’re seeing for some of these things, some of these keywords, click-through rates, 30%, 20%, 15%. It’s just amazing to see. This was not the intent. So it was worth it. We knew that we wanted to get performance up, we knew that it mattered to humans, but it shows Google … because they want to make sure they’re showing relevant results, they care about it.

For a lot of people, Gervais added, performance is an accessibility issue. For people on the autism spectrum, he says, “what happens as we use things is that you expect a certain kind of feedback loop. And it can be really frustrating when you don’t see that 50 millisecond kind of response time or 100 milliseconds. It breaks the flow and it’s intense. It makes it really frustrating to use the web.”

Driving SEO with Sanity and Gatsby

The third part of the project was to optimize SEO. WaveDirect wanted to make sure they ranked highly for searches like “best Internet service in [coverage area]”. 

“You’ll notice that we can optimize the site very highly for performance, but because the content is customized per area, it ends up getting really high ranking for local searches,” said Gervais.

WaveDirect used Sanity to write content, like this blog post on Internet service in rural Ontario, and then with Gatsby’s plugin for Sanity, integrated it into the website.

When Google’s SEO update rolled out in mid-2021, WaveDirect’s website update hadn’t rolled out yet, and their search rankings took a hit. When WaveDirect’s new website rolled out with Gatsby, Sanity, and Rudderstack, the impact was immediate and dramatic:

google-core-web-vitals-good-urls

(screenshot from WaveDirect’s Core Web Vitals dashboard in Google Search Console)

Prior to the redesign, only around 25% of their URLs were considered good from a performance perspective. They got to about 70% with redesigning on Gatsby; then when they used Rudderstack to consolidate analytics, they got to 98%.

Prior to the redesign, they had about 30 keywords ranking on the first page of Google search results. After launch, that jumped to 153:

wavedirect-top-10-urls

(screenshot from Google Search Console)

What this all meant was that WaveDirect saw a 3x jump in core keyword traffic after the website redesign. Previously, the traffic would rank well for markets outside of their core region (Ontario). So while traffic was higher, it was the wrong traffic. With their data-centric approach encoded in Rudderstack, performance with Gatsby, and content in Sanity, that all changed.

wavedirect-changes-in-click-rates

(screenshot from Google Search Console)

In addition, using Sanity meant that the content was easy to change.

“Because of using something like Sanity, [marketing users] can log in, make a change, hit the publish button, and in under a minute, sometimes 20 seconds later, a new page is created or changes live,” says Gervais.

And working with Gatsby and Sanity made their site modular. 

“Before you used to have to build a site all at once all the time, but now you can do things incrementally,” said Gervais. “So one section in the WaveDirect site when we were rushing to get it out, we [wrote the copy inline] in React knowing that we’re going to replace it with Sanity later.” 

Results

The top-level business results of the two-month project were staggering.

  • 60% increase in in-market website traffic within 30 days 
  • 450% increase in website-to-lead conversion from 1.8% to 10.2%
  • 50% increase in conversion rate once lead was contacted, to 59%. 
  • 4X increase in targeted “in-market” lead volume – 1782 lookups – 182 leads 
  • 98% decrease in duplicates and poorly formatted data

Just another testament to the power of best-in-breed, modular technologies like Gatsby, Sanity, and Rudderstack to drive business results in B2C companies.

(For more information on how Gatsby, Sanity, and Rudderstack work together, an hour-long interview with Kevin Gervais is available on the Rudderstack website)

Share on TwitterShare on LinkedInShare on FacebookShare via Email

Gatsby cofounder & chief strategy officer. Programmer, analyst, writer

Follow Sam Bhagwat on Twitter

Tagged with Agencies, analytics, Case Studies, Marketer Workflows, sanity, seo, Website PerformanceView all Tags

Originally published at netlify.com/blog/how-wavedirect-used-gatsby-rudderstack-and-sanity-to-4x-leads-and-dominate-search-results

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2024 Gatsby, Inc.