TELUS Design System February 2017
TELUS digital
Why do we need a design system? 3
Land of broken toys ● Disjointed customer experience ● Very complicated technical landscape ● Large effort required to deliver quality experiences
The challenge Many teams are building TELUS experiences without an easy way to reuse work, share ideas, or receive and consume design / code updates.
● ● ●
Multiple tech stacks Multiple overlapping CSS files No single source of code or design truth
● ● ●
Teams reinvent the wheel Inconsistent customer experience Builds and updates take longer
The solution
A system that streamlines design, code, and processes.
“In the future, it'll be more important to design long-term systems that can pivot to change, optimize, and reinvent their products, without having to start from zero each and every time� FastCo, March 2015
TELUS Design System A reusable design system to enable digital brand delivery at scale. A common fabric from which to create consistently great TELUS experiences. Benefits: 1. Increase brand consistency 2. Increase speed to market 3. Enables more focus on end-to-end journeys 4. Evolve and grow together
Brand
Design Files
Code libraries
Process to consume + contribute
Design System architecture
The TELUS Design System is derived from the principles, characteristics and aesthetics of the TELUS brand. A system architecture connecting the TELUS brand to rich customer experiences. The system is tiered to enable choice in how deeply you want to integrate into it. 

Shared design files
Shared code library
Consume + contribute
●
The system is based on the open source model
●
Design system site contains documentation
●
Shared code library A centralized design team maintains the system A design system guild enables collaboration
● ●
Building blocks of the Design System Brand
Core CSS
Lists
Colour
The design system is based on based on the principles, characteristics and aesthetics of the TELUS brand. It contains descriptions of our brand philosophy, colour palette, font, tone of voice, etc.
Experience Packages
Enriched components are the interactive elements of web interfaces. JavaScript is combined with Core CSS to create components such as step trackers, headers, footers, etc.
Experience packages pull together enriched components and Core CSS into page templates that can used to address recurring customer and business goals.
Grid
Forms
Icons
Enriched Components
Font
Buttons
Core elements are the foundational building blocks of web experiences, such as a form label, an input or a button. CSS is used to create and style core elements.
TDS adoption framework
Contribution criteria
Why is this component needed?
Is it better than what’s available?
Can it be applied globally?
What are the impacts to adoption?
Does it align with standards?
☑
☑
☑
☑
☑
Design System roadmap 2016 Q4 Alpha launch - Foundational sketch file and CSS released
2017 Q1 Beta launch - Operationalize and test system with Beta users
2017 Q2 Beta testing - Refine foundations and operations
2017 Q3 V1 release and open up to rest of organisation
Thank you
TDS support model Full support
Lite support
What are we doing for them Introduction sessions ( Lunch & Learn) to the digital platform incl. TDS Respond to issues posted in github Weekly guild meetings Design and code reviews What is expected for each team Update to latest version with 1m Provide with feedback and ideas Build and contribute components TDS team classifies as globally reusable
Current teams 1. Biz migration 2. Mobility online / offline 3. PikTV / TVX 4. Biz auth
Current teams 1. Velocity 2. Nascent 3. GTM 4. Apply 5. PS? 6. Fibre?
Contribution criteria
1.
Why is this component needed?
2.
Is it better than what’s available?
3.
Can it be can be applied globally?
4.
What are the impacts to adoption?
5.
Does it follow our guidelines? o
Brand guidelines (T&P)
o
Experience principles (TD)
o
Usability (Jacob Nielsen)
o
Creative direction guidelines (HUGE+TDS)
o
Fills a business outcomes
o
Code guidelines
Creating an Issue in Github In TDS we use github to track our backlog, user feedback, and design/code contributions. To provide feedback or nominate a component for global reusability, please follow these instructions to create an issue. 1) On GitHub, navigate to the main page of the repository https://github.com/telusdigital/telus-thorium-core. 2) Under the repository name, click Issues. 3) Click New issue. 4) Type a title and description for your issue. 5) If you're a project maintainer, you can assign the issue to someone, associate it with a milestone, or apply a label 6) When you're finished, click Submit new issue.