Case Studies

TELUS: 10x faster page builds, super performant

Telus Case Study
Telus, one of Canada’s leading telecom companies, leveraged Stackbit’s visual editing capabilities as the final piece of their four-year digital transformation.

Four years ago, TELUS began a digital transformation journey, driven by these goals:

  • Create a website infrastructure with top performance and reliability standards
  • Rapidly design and develop components based on an in-house atomic design system
  • Empower hundreds of internal content editors to have the freedom and autonomy to build and edit the websites and pages they need to drive business impact

Iterating to Design the Perfect Stack

Architectural decisions are the foundation of any transformation of such magnitude. The performance in delivering pages and the flexibility in how those pages are built made Next.js the perfect framework on which TELUS would build its sites.

Those sites would be consuming content to generate thousands of pages, built and managed by hundreds of authors. Contentful was the solution TELUS was confident could support their needs for years to come.

This duo of Next.js + Contentful is a powerful one. But even after these tools were chosen, TELUS was left with a blank slate on which to begin. It took several iterations to get it right.

A Flexible Component System Reduces Tech Debt

It’s natural to begin by designing and building components for a select few use cases. For large sites, it’s extremely difficult to understand the entire system before it’s built.

And this quickly became a technical debt problem. As new page layouts needed to be supported, these specific components (e.g. Hero, Card, Carousel) needed variations to support the layouts in which they were used. In some cases this led to 400 variations of a single component!

Feeling how unmanageable this system already was, the engineering team pivoted and designed a fluid and flexible layout system, where generic components like Row and Column would be responsible for laying out the components within them. Thus, components like Card could be significantly simplified.

This was a huge win for the developers, but a new problem arose with editor autonomy...

Content Editing Complexity Increases with Flexibility

If the team could then establish parity between this flexible component system and the data structures of the content, they could pass this ultimate flexibility onto their (hundreds of) content editors.

That’s fantastic in theory. In practice, it meant that content editors (non-developers) now had to understand the component architecture in order to be able to edit content.

Editors would have to work with a form-based interface in Contentful to drill down to locate the appropriate piece of content to edit. And components with content could be nested within several layers of generic, structured components. Editors would have to click column, row, column, row, column, row ... to try to find the content they to edit.

telus old schema

And they didn’t have an easy mechanism for saving content combinations as reusable templates.

We had 100 authors that we needed to train for hours to enable them to build new pages. Nika Karliuchenko - Product Manager at Telus

Stackbit Removes Content Complexity for Editors

Stackbit became the link that enabled TELUS to maintain manageable and well-designed code, and provide ultimate flexibility to content editors while reducing the friction and complexity of managing content.

telus website
With Stackbit, the hundreds of content editors would be able to build visually-rich pages without developer help. No new variations of components. No need to drill down through structural components.

Unlocking Reusable Content Templates

One of Stackbit’s most powerful features is its ability to enable content editors to save content as a preset. With Stackbit’s visual editor, Telus editors can now build component layouts from their atomic design system. Once they build a template they’d like to reuse, they can store it as a template that can be reused on other pages throughout the site.

telus save content as a preset

New components and pages can be created in seconds, rather than having to set up the structural elements each time.

With Stackbit we can finally build templates from the atomic component once, save and reuse however the organization needs. Nika Karliuchenko - Product Manager at Telus

Stackbit Brings Power + Speed to Content Editing

It simply doesn’t make sense for editors to spend so much energy to understand the infrastructure of a page’s code just to be able to change its content. Stackbit enabled them to locate the element they want to change, and change it directly.

 Stackbit Brings Power and Speed to Content Editing

Building new pages is 5 times faster than before. Nika Karliuchenko - Product Manager at Telus

Integrating with Stackbit is “Super Simple”

The magic of visual editing with Stackbit is made possible by adding data attributes (that can be stripped out at build time) to the HTML elements containing content.

The integration with Stackbit was straightforward and super simple. Other companies told us we had to write adapters or wrap their code around our components and register them. With Stackbit it was just adding a few annotations. Jordan Raffoul - Developer Tech Lead at Telus

Annotations are designed to stay out of developers’ way and let them work how they want to work.

  • No refactoring.
  • No wrappers.
  • No additional dependencies.
  • No code added to production.

Stackbit Minimizes Content Training Costs

As an added benefit, because content editors don’t have to understand the structure of a page to edit with Stackbit, training new editors is extremely fast and simple. TELUS was spending hours training each content editor before Stackbit.

Now they watch a quick video and are instantly ready to go. Editor can spend their time editing rather than learning how to edit.

Now we have 500 authors that learn about Stackbit in a 5-minute video and are building new pages immediately afterward. Nika Karliuchenko - Product Manager at Telus

A Single Source of Truth for Content

After making a change, Stackbit maps the content to the appropriate model in Contentful, and writes the updated content instantly back to the CMS.

And if content changes in the CMS itself, the changes are immediately reflected in the editable preview in Stackbit. Thus, there is always a single source of truth.

Moreover, content isn’t always stored in the same place. For example, product catalog data for e-commerce sites might be in a headless commerce solution, while production data is sometimes taken from internal databases, or API-based services like Notion, Airtable, or Google Docs.

Stackbit abstracts these sources away from editors by providing a unified editing interface that updates each respective source behind the scenes.

Editing Experience is a Common Problem

The problem that TELUS experienced before working with Stackbit isn’t an isolated case.

Modern Website Tooling is Developer-Driven

Modern tooling for building websites has become extremely powerful. Tools like Next.js and Contentful are designed for an excellent developer experience.

Yet, what is great for developers has little implication for less technical content editors. At Stackbit, we prioritize the editing experience without sacrificing development experience.

Engineers can work the way they want, and editors can move quickly and freely without the need for a developer to help build custom and complex pages.

Building Websites that Achieve their Goals

We’re extremely happy that we've helped the folks at TELUS achieve their lofty long-term goals.

Working with Stackbit has increased both satisfaction and cadence for both engineers and content creators at Telus. Nika Karliuchenko - Product Manager at Telus

If these problems sound familiar, we’ll leave you with one final note of advice from Nika at TELUS:

If you have a design system and are using a headless CMS, you should be using Stackbit. Nika Karliuchenko - Product Manager at Telus

Telus t logo

Telus

TELUS is a dynamic, world-leading communications and information technology company with $16 billion in annual revenue and 15.2 million customer connections spanning wireless, data, IP, voice, television, entertainment, video and security, healthcare and agriculture.

Contact us

Let's discuss your project

Request a free demo to see how Stackbit may accelerate your organization's site creation and ongoing maintanance.