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