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.
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
At this point, the TELUS Digital Team started a 1-year journey of trying to build their own internal site builder until they found Stackbit.
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.
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.
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.
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
