Unifying content, design and code with Site Builder

In our last post, we talked about the adoption of a headless content management system (CMS). In this post, we’re continuing with our content platform transformation journey by discussing how we unify content, design and code to empower our users to build seamless experiences for our customers online. 

Codifying content is a modern approach to scaling design and content for large-scale applications, like our mission to implement changes across thousands of TELUS’ web pages. However, with the benefits of a headless CMS came a drawback: a heavy reliance on developers and architects to unlock most of the system’s potential and value. We had to find a way to enable content creators, designers, the marketing team and other TELUS Digital members to build and deploy pages to our site with all the benefits from the Digital Platform. Our solution was to layer Site Builder, an internally built Reference Architecture application, on top of our headless CMS so our teams could combine content, design and code in one place.

How does Site Builder work?

Site Builder helps us add a “head” to our headless CMS by using an internally built presentation layer. Contentful provides the content, and Site Builder controls how it gets viewed on the website. The latter is accomplished in Site Builder through a catalogue of React components, known as Blocks. These building blocks are mainly constructed from TDS (TELUS Design System) components and encompass all the user interface needs for content focused (static) page. 

When a request comes to TELUS’ website for a page that is managed by Site Builder, the application will go into the CMS and retrieve the requested content. Alongside each piece of content is information on which Site Builder block to use. An image with text, for example, can be presented as a landing page banner (Banner Block) or as a promotion (Promotion Block). Site Builder will take the content and the information on how they should be displayed, pull in the necessary React code relevant to those Blocks and stitch them together. The end result is a consistent web page that synthesizes content, design, and code.

Site Builder is easy to use and for everyone. The architecture provides UI building blocks that allow team members with no development or coding knowledge to drag and drop content. These pre-approved building blocks allow teams to build out pages quickly. The blocks can then be edited, reordered and targeted to specific customer segments, enabling our ability to personalize content. With Site Builder, our teams can quickly create high-quality websites and campaign pages in 45 minutes or less that are guaranteed to adhere to our digital standards.

How does Site Builder contribute to our success?

We’re treating our internal teams and stakeholders like our customers by focusing on their experience with advanced platforms like Site Builder. Site Builder has allowed us to create a community of practice similar to TDS. We have seen our developers, designers, UX team, content practitioners, and optimization team benefit from Site Builder by simplifying their path to production. Although our various outcome and enablement teams interact with Site Builder in different ways, the advantages of the platform have rippled throughout TELUS by improving several areas.

Site Builder and SEO

Every team at TELUS Digital is evaluated, in part, by their performance across our basic quality metrics: i.e. page speed, content, SEO, accessibility, and analytics. Lighthouse provides detailed reporting on a host of key metrics. The ease with which we can extend it to include our own quality concerns as well as integrate it into our existing workflows makes Lighthouse an invaluable tool in our Search Engine Optimization. Bake these standards into Site Builder and they very quickly scale to hundreds of pages.

Personalization

Site Builder gives teams a set of pre-approved building blocks to build out pages quickly. Once those blocks have been created on a page, minimal development effort is required. 

By simplifying these day-to-day tasks, our teams can turn insights into on-page application faster than ever. We have been able to test copy variations and distribute the content that resonates with our customers across our web pages with ease. This benefits both our teams delivering the content and our customers, enjoying a hyper-personalized experience online.

Content and design standards

Site Builder allows our developers to fix or add code quickly without affecting the content. By preventing code duplication, this enables us to enforce our brand guidelines, code standards and the quality of our products that we push to market.

The Site Builder blocks are wrappers around TDS components, meaning every page that a customer visits will be configured to render with TELUS’ agreed upon design standards. The application will configure this automatically so that our content team can add and modify the content with confidence.

Security and accessibility

Rather than drawing content directly from the database, we use a high-performance Content Delivery Network, which improves security by reducing the risk of distributed denial-of-service attacks (DDOS). 

The fact that Site Builder helps remove inconsistencies across hundreds of web pages is also a huge leap towards ultimate accessibility for our customers. Our customers can connect with our website on any device and render the content accurately, wrapped in the brand standards TELUS promises to deliver every time.

Analytics and performance 

Continuous Delivery means we’re improving our process every day. With every code change, we’re making production changes to our website to improve performance, accessibility, SEO, personalization, security and overall usability. As a result, we have significantly reduced the time between insight and action.

What’s next for the Digital Content Platform

At TELUS, we’re always open to new ideas and technologies. In fact, we already have our eye on a number of tools that could help us push our Digital Platform to the next level. The following tools present unique opportunities for us to improve upon our existing platform and further enhance the digital experience we offer our customers.

1. Using a recursive publishing tool

A recursive publishing tool allows content managers to publish (or unpublish) multiple contentblocks with ease, including all of its related entries and assets (such as photos). This means that content managers don’t have to waste time individually publishing/unpublishing blocks or worrying that they missed certain blocks across pages.

2. Using a duplicate tool

The duplicate tool saves time for teams that are in the process of scaling content. This tool allows content managers to move and reuse content, without recreating the same content each time. This helps safeguard against mistakes and enables us to streamline with increased efficiency.

3. Enable visual regression testing

Visual regression tests are able to use advanced technology to ensure that a web page still renders as expected across different browsers after changes to the code. This test will help prevent us from sending incorrect code to production and allow us to tighten up the code before it’s translated into a visual rendering on-site.

We have leveraged all our key learnings from the Reference Architecture and Digital Platform to build a tool that satisfies all the specific needs our users need to deliver world-class digital experiences.

The capabilities of digital technology are evolving every day, and we continue to be cognizant of the latest tools that could improve the quality of our process and product. We’re proud of our energetic teams that have embraced the changes to the Digital Platform and continually deploy incremental improvements to support our digital evolution.
__________________________________________________________________________________

Follow us on Instagram and Twitter @telusdigital for events and updates. If you’re interested in joining our team, check out our careers page!