Our journey to build the TELUS Design System
By: Jack Reeves & Alexandra Fedyk
At TELUS we take our brand very seriously. Visual design can infer a lot about the level of quality, service and support customers can expect so making sure everything we create is reflective of our values is of utmost importance. Collaborative design is a hard thing to manage. It doesn’t scale. Aesthetics are subjective so keeping multiple internal teams and external vendor partners on the same page over 36,000 web pages is challenging.
Why we built a Design System
Our Design System journey started off in late 2015 but to understand it fully we must go back to the birth of TELUS Digital. In 2013 we took a look at what was happening in the wider tech space and realised that if we were to stay relevant we had to stop considering digital as a sales channel and start thinking of it as the core of the business. A separate team was spun up and a startup culture was fostered. The team moved fast, they made a best in class digital telco experience and the rest is history…
Or so it seemed. The technical underpinnings of the group’s formation were instrumental to its success but as the team went from strength-to-strength, quick-win to quick-win, cracks started to form. The customer experience began to break down and become fragmented. Cycle times began to get longer and longer.
Screen captures showcasing the inconsistencies between web pages at TELUS before a design system
Shawn Mandel, the Chief Digital Officer at TELUS, knew that the disjointed experience was hindering our end-to-end journey. He gave the simple mandate - solve the design consistency problem no matter what it takes.
"It was great to see senior management push for greater visual and brand consistency. In many other corporations, you have to compromise design in favour of the bottom line so TELUS' approach to quality in action was really refreshing." - Jack Reeves, Senior Digital Strategist
The root of the problem was clear to anyone working on the shop floor at that time - scaling. What was easy to control in a team of 25 proved very difficult in a team of 250. The simple set of CSS rules developed at the start of the journey had forked as the team expanded and the team needed a new design framework that could grow with them.
What is a Design System
Traditional ‘pen and paper’ designers realised that by agreeing on a few rules beforehand (grids, colour palettes and typography) they could make sure that many people could work on solving one large design problem efficiently. Essentially, this is what modern design systems do for digital development. They define common UI elements and patterns that digital designers can utilize to create consistent customer experiences over and over again.
The idea of creating a design system was not a new concept when we began our journey - but it was still in its infancy. Twitter had “conquered the web” with Bootstrap in 2012 and two years later Google released Material Design, their all-encompassing design system behind all of their modern products. The big leap from Bootstrap to Material was its embrace of Brad Frost’s theory of Atomic Design. Rather than have a collection of UI elements on a page, you could ladder these items up into larger reusable concepts, creating a system of modular Molecules and Organisms. As anyone who's ever played with lego will tell you - your imagination is the limit with this kind of system.
© Frost, Brad. “Atomic Design Methodology.” Atomic Design by Brad Frost, atomicdesign.bradfrost.com/chapter-2/
With a trail already blazed TELUS Digital set off on a journey to see how we could apply this concept to our business, our infrastructure, and our teams. We read everything we could on the topic in an attempt to find our own way to solve our problems. We talked with Salesforce, Google, and Adobe to see what helped them. Eventually, it took a quote from our Design Strategy Manager to get us on our own path:
"Let’s make things easier for our team so they can focus on the end to end experience and make things better for our customers." - Neal McGann, Design Strategy Manager
With this as our North Star we knew that the most critical component of our design system was community buy-in and support; without this, we would fail. Together we established 9 design principles and agreed that they must be followed at all times. On top of this foundation, we set out to build a design system that was a living product that could be iterated upon.
Building a solid Core
Initially, we fully decentralised development of the system. However, without clear direction and a pre-existing framework in place, we quickly realised that getting a clear consensus was going to be too difficult. It was back to the drawing board. We quickly pivoted and stood up a ‘core’ design system team who focused on TDS full time. This centralised approach helped speed up initial communication and planning - but we made sure not to lose our community connections. We broke down the inter-team silos and investigated what had worked in the past, what was needed for the future, and what was of the greatest need to our teams right now. We established design jams around these requirements and worked with the community to prioritize our ‘Atoms’ / Components. These atoms would later go on to form our Minimum Lovable Product and TDS Version 1.
Between alpha and beta versions, we had 55 releases over 12 months. We released to select community teams as early and as often as we could to gather as much feedback as possible. We needed to know what worked, what didn't, and why before moving on to the next Component. This community-based feedback model was instrumental in getting us to version 1.0 so quickly.
In January 2018 we successfully launched TDS to all teams and vendors in the TELUS ecosystem. It’s now production ready and successfully embodies the TELUS digital mission: Enabling our customers and team members to do what they want, easily. It’s working well and adoption has been quicker than expected with old experiences rolling over on a weekly basis.
How TDS works
TDS is not just one thing; it's a holistic platform that integrates code, documentation, guidelines, and design management all under one roof. It serves as a single source for our digital design guidelines, code patterns, and UI elements.
We use Design System Manager from InVision to distribute more than 35 Sketch components to our UI, UX and Interaction Designers. This ensures that changes cascade across the teams at the same time and helps bring drag and drop like efficiency to what was previously a complex task. To aid the community in further component development we also documented the Design Foundations that underpin our components - that way designers who weren’t present for the conception can still understand the design direction and thinking.
For developers we have a Github repo containing identical React versions of the components designers use. These components are independent, composable and distributed as individual npm packages. They include semantic, accessible markup, cross-browser compatible styling and responsive behaviour. Every effort has been made to keep them small and contain UI logic.
All issues and feature requests are collected through Github and support is provided via slack. Each part of this system is documented on tds.telus.com to help educate our user base and provide context. We outline each components usage instructions, change log, governance processes, example executions and feature roadmaps.
What’s next for TDS
This isn't the end. Our journey is just beginning. With version 1.0 we have the atoms and some of the most common molecules necessary to build consistent brand experiences. But to truly make our teams lives easier we need to get back to our original vision of a decentralised community run project.
Only through decentralisation can we scale our pattern library of molecules up to the size it needs to be, and only with the communities help can we begin to capture the most useful organisms. So, our focus over the next few months will be developing the product, practice and governance to ensure the teams can do this in an efficient and effective manner.
As the community begins to take ownership back from the benevolent Core team we will focus on taking the system from good to great. We will concentrate our energy on adding further meaning, structuring how elements can and should work in harmony and adding context to the components so that people understand when to use which approach. This includes considering more complex design challenges such as motion, depth and the underlying tooling itself. We can see a point where components are no longer designed in Sketch and then developed in React, but where React generates the designs and ensures both are always perfectly identical.
So that's the TELUS Design System and our work over the last 2 years. So far it’s been an amazing journey and we are all grateful to TELUS for embracing what at times was a difficult systemic change. But, thanks to the hard work and determination of too many people to mention in this post we now have a system that enables an easy path to production for our team, and a greater experience for our customers. It’s rare to be able to work for a company that values design and brand enough to employ a dedicated Design Systems team.
In our next post we’ll delve deeper into the technical challenges we faced and what solutions we settling on to overcome these challenges - so stay tuned for more on the on the technical side of design system engineering. If you are eager to jump into the action, check out all of our open positions on the Design team.