Douglas Limin is a design strategist at Canadian telecommunications company TELUS and he’d like to show you something. This is the company’s travel page for consumers:
This is the page for business customers:
Notice the difference?
No?
That’s the point.
“When you’re a gigantic corporation, this is a massive win,” he says. These two pages were designed by two designers—one in Vancouver and one 2,000 miles away in Toronto.
Before tackling these projects the two designers didn’t talk—they were actually unaware they were both working on similar screens. In most large companies, this would have resulted in two completely different treatments that would have to be unified later.
But thanks to a forward-thinking design team at TELUS and InVision’s Design System Manager, wins like this happen every day.
“Above the water, our work is this beautiful swan. But below the water, it’s these kicking legs,” he says. Wins like this are the result of a massive overhaul of the 50,000-person company’s digital design and development process—one that involves centralizing its communication and workflow around a design system.
The Design System Community
A design system can be something that is created in a conference room somewhere and then left to atrophy as the company’s needs (and market) change. TELUS took the opposite approach, one that insured its system was dynamic and constantly improved upon by its development and design teams.
“We have this process where there is a community around the design system,” says Limin.
It works like this:
Alongside TELUS’ main design system (what they call “core”) is an in-progress “community” design system that anyone can contribute to.
There, designers and developers are encouraged to submit components from projects that they believe could be repeatable. In the case of our “Travel and Roaming” page above, a designer in Vancouver was creating a search component where locations would be the main source of input.
For a mobile phone company, it’s the kind of component one could imagine being of use elsewhere. So the designer submitted the “recipe” to the community design system for review. Simultaneously, it was noticed by a designer in Toronto who, unbeknownst to both of them, was assigned a very similar project for another customer persona.
“It keeps people in the know of what other teams are doing,” says Limin. “You’re seeing the work in real time. This creates conversation and visibility.”
“Above the water, our work is this beautiful swan. But below the water, it’s these kicking legs.”
When you’re a small scrappy design team at a startup, consistency can be as easy as turning to the person next to you. But when you’re a large company with 50,000-plus people scattered across difference timezones? You may need some help.
The board
The community design system is the work in progress, the stuff that isn’t quite ready for prime time, or that is a suggested addition to core. And that’s where the review board aka the Digital Platform Ambassadors comes in.
At TELUS, there is a board of five designers and five developers that are reviewing submissions to the community in an 11-step process. And if they agree the component can be used in core, they “promote” it and the designer receives some widely shared kudos and even some reward points they can redeem for swag and other things.
But most importantly, when a component is promoted to core, it’s a permanent win that allows designers from all over the company to focus on other things while keeping the design system up-to-date with the company’s needs.
“A lot of designers look at design systems as a thing where there’s not a lot of flexibility and creativity,” says Limin. “So building this community encourages designers to be creative and keep making new things.”
Limin continues, “Great artists steal. Don’t work in a silo trying to come up with ideas from other websites. Take ideas from your peers and inspire new ones for yourself. It’s fun.”
The community system replaces redundant work with a hive mind. One where designers are constantly reusing and remixing each other’s work.
For example, DSM reduced the time it took a designer to pull a standard symbol from the design system by 20x. A repetitive task that used to take 10 minutes now happens in a brisk 30 seconds. Here’s how:
And when TELUS reviewed all the time savings from previously mundane design tasks and multiplied that across a 40,000-person org and 36,000 web pages, the company has calculated that it has saved itself 6,480 hours a year by using DSM.
Every org will attack rolling out a design system according to their own culture, but it can help to have a few guides—so we interviewed the team, combed through their own internal case studies and assembled some takeaways for your own roll out.
A design system is nothing without context.
Documentation was key to ensuring that the latest design standards weren’t just used, but were used correctly.
TELUS created a component catalog with supporting information so each component wasn’t existing in a vacuum. For example, see the documentation for “Cardinal” in the Web View of TELUS’ DSM library that reads “Cardinal is used for error text on Lavender Blush and the error icon.”
With DSM, that documentation is automatically visible both from the web view and from right inside their design tool.
Conduct an audit
One of the first steps for TELUS was agreeing what components were worth keeping and reviewing. The company agreed to four criteria:
- Is the component on brand?
- Is it accessible?
- Has it been tested?
- Can it be reused?
Going through each component with these four questions in mind, the company was able to work with its design leads to create its “minimum viable system.” This was the foundation of v1 and the framework for future versions.
Align on a shared set of tools
With different teams pulling from the design system and making changes to components all the time, managing versions and preventing conflicts became critical. From their case study:
Because the components were in the cloud and named the same the new updates would just replace the old components. Designers didn’t have to find those instances separately so design stayed consistent with code and it reduced any design refactoring.
This example shows what the notification message would like if there was a new release.
Establish your north star
Rolling out a design system involves moving across disciplines, business goals, and departments and building some kind of consensus. It helps to have an objective standard to guide you. In TELUS’ case, they outlined nine design rules including “Ensure decisions are informed by analytics and research” and “Design for small screens first before moving onto large screens.”
Establish design jam and pick the important components, the “atoms”
Using the above requirements TELUS held design jams to prioritize all of the possible components. Those became the “atoms” and the first set of components introduced in the design system. This assured that the most used components would be updated first, and other parts of the organization would see the benefits of the system and buy in. (Read more on rolling out a design systems pilot project).
Have representatives from each “tribe” from tech and design
Take something like a comparison chart for pricing. The mobile user has one use for that. The business user another. Meeting all of those needs is key. “If we can’t accomplish that goal, we have to build a second component. That makes sure we are simple and streamlined,” says Andrew Douglas, Manager of Design Practice at TELUS.
“[Our stakeholders] have visibility into UX patterns, so we can have those discussions more holistically. It ended the days of someone coming up with ideas in a silo, proposing the idea, and then getting crushed,” says Limin.
Be flexible
It’s easy to read all about design systems and feel slightly overwhelmed at all of the options and approaches. Every org and culture is different. Learn from other companies, yes, but be sure to map your process onto your company’s structure. From the company’s case study:
“A good design system allows for change, variation, and flexibility. If it’s too rigid, teams aren’t able to use it easily. If it’s too flexible, it becomes inconsistent. There needs to be a process in place with governance, but not too much so that we become a bottleneck in the process.”
_
To get started with Design Systems Manager and all the time-saving wonderfulness it enables, sign up here.
And if you’d like to go the next level of Design System nerdery, see our sample design system here and watch our six-part video series on Design Systems featuring Brad Frost, Dan Mall, and Josh Clark.
In the featured image (L to R): Cian Scott and Rena Guan
by Sean Blanda
Sean Blanda is the Editorial Director for InVision. Previously, he was the Editor-in-Chief of Adobe’s 99U and a founder of Technically Media. He currently resides in Philadelphia.
