How Telus saves 6,480 designer-hours per year with InVision Design System Manager
In 2015, the designers at the Canadian telecommunications company Telus had a problem.
After a few years of quick wins tackling internal projects, the cracks were starting to show. The 45,000-person company had 20 teams and dozens of digital projects that, when viewed individually, were great customer experiences. But when traveling end to end across all the websites and apps… the customer experience was incredibly disjointed.
Inefficiencies would pile up with every new project. New versions of design assets sprouted up and then had to be managed like a game of whack-a-mole. Each team had its own components, its own workflow, and its own codebase.
It was incredibly difficult to remain consistent, yes. But more importantly, the team spent precious time fixing what was broken rather than developing new products—an easy way to fall behind in the market, and an extra-dangerous approach for the hyper-competitive world of wireless carriers.
“As the team went from strength to strength, quick win to quick win, cracks started to form,” the team wrote in its recap on Medium.
It’s hard to invent the next breakthrough product for the company when you’re busy tracking down a sticker sheet. Telus needed a design system.
Today, Telus’ design practice is centralized and streamlined with a design system managed and built using InVision Design System Manager.
After a thorough component audit and some documentation, it has a standard framework for organizing and sharing design components and it’s already started to see the early wins. One example: Black Friday 2018.
Black Friday is one of the most important times of the year for the wireless carrier. It’s a chance to sell new plans and new phones to new customers. Even a slight misstep is magnified, so nailing branding, messaging, and execution is essential.
“It’s hard to invent the next breakthrough product for the company when you’re busy tracking down a sticker sheet.”
The week before Black Friday, an external agency delivered a full Black Friday campaign with custom pricing and taxes for nine Canadian Provinces. However, there were two issues:
- The marketing team rejected it…
- …and they rejected it the Monday of Black Friday. That’s five days before the campaign was set to launch.
Faced with redoing one of their most important campaigns days before launch, Telus didn’t have to undergo a mad scramble to salvage the campaign. With the new design system, the team responded quickly.
“In three days we were able to turn around what the agency did in six weeks. We built custom components and delivered it using Design Systems Manager,” says Andrew Douglas, Manager of Design Practice at Telus.
How? It was the spoils of a complete overhaul to their design system using DSM. An overhaul that shaved time off many of the tasks required to use and contribute to a design system.
“A design system is nothing without context.”
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.
To undergo your own audit, you can use our handy step-by-step guide here.
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 a 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.” said Douglas.
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.
Want to learn more about design systems?
Leave a reply