The tds-community from telus

Feature	TDS Core	TDS Community
Component reusability	High	Moderate
Rate of change	Low	High
Contribution speed	Moderate	High
Review board	TDS Core Team	Digital Platform Ambassadors

_{Marco Donnici}	_{Ryan Oglesby}	_{Enrico Sacchetti}	_{Jack Reeves}	_{Jesse David Peterson}	_{Mujtaba Hasni}	_{Anatolii Gorovyi}
_{Christina L.}	_{Andrew Lam}	_{Jordan Raffoul}	_{Nicholas Mak}	_{renovate[bot]}	_{Mike Bunce}	_Ani
_{Samantha Vale}	_{Tyler Dewald}	_{Varun Jain}	_{abdul khan}	_{Nate X}	_{Mike Bunce}	_{Donna Vitan}
_{harmeetsaimbhi}	_{Fabio Neves}	_{Edison Li}	_{Michelle Linley}	_{Jeffrey Chang}	_ashwanitelus	_{Ruchi Jain}
_{Katherine Szelag}

Problem Statement

As a customer i would like an easy way to see what page i am on, how many pages there are and and then navigate between them so i can find the things i want easily rather than infinite scroll

Recommendation

Designs

none - infinite scroll in most places

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
Which teams/applications do you think would use this improvement?
MOB MYACCOUNT
High impact: No

Problem Statement

As a customer i would like to get an overview of what i have selected thus far and see the totals summarised clearly

as a designer i would like to display summary pricing in a card with consistent place and formatting so they dont get confused and clearly understand what they are purchasing

Recommendation

Have design jam and see how many different variants we need for entire business. can we rationalize to one?

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)

https://www.telus.com/en/bc/mobility/cart
https://www.telus.com/en/bc/shop/checkout/cart
https://www.telus.com/en/bc/mobility/planbuilder?INTCMP=Tcom_Plans_Individual_Plans_BAN_Plan_Builder&linktype=plans

Which teams/applications do you think would use this improvement?
B2B HS MOB
High impact: No

Problem Statement

As a designer i would like to have a consistent way to display phone numbers so that i can save time and effort
as a customer i would like a consistent way of seeing the phone number and hours so that i can read it at a glance

Recommendation

Ideal component would show phone number, with or without text in name, hours, time zone, wait time etc

Designs

None

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
Which teams/applications do you think would use this improvement?

B2B
Home solutions
Mobility

High impact: No

Problem Statement

As a designer i want a consistent wave hero execution because ive done t

Recommendation

A lockup of wave with display heading

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/mobility/phones/?linktype=nav
Which teams/applications do you think would use this improvement?
B2B
Home solutions
Mobility
My Account
High impact: Yes/No

ProgressBar component for displaying usage information

Problem Statement

As a developer I would like to include a progress bar component so that my app can provide usage
and capacity information visually for customers.

There is currently no standard progress component in the TDS, although <progress /> is a standard html5 element.
There exists informal design convention for this component, which is more/less agreed to and being used by at least on other team but its not formally codified in the TDS.

Recommendation

A common component, which can be extension of the HTML element but does follow the design conventions currently being used.
There already exist a component that is being shared for this purpose: https://github.com/telus/my-account-usage/tree/master/ui/src/components/Common/ProgressBar

Designs

Meta

Has workaround: Yes
Do any similar components already exist: Yes
Does this pattern exist already but isn’t a community component? Yes: https://github.com/telus/my-account-usage/tree/master/ui/src/components/Common/ProgressBar
Which teams/applications: 'My Account / My Telus'
High impact: No

Problem Statement

As a customer i would like a consistent way to use carousels across the site

As a designer i would like an easy way to add carousel to the site

Requirements:

Displays more than one piece of content in the same place (one at a time)
Must offer an indication that there is more than one piece of content within the carousel
Must provide navigation for moving between pieces of content (needs to live within content frame)
Each frame of content should contain:
- Image
- Copy
- CTA (optional)
- Alt-text (optional)
No more than 5 frames of content
Content frames should be built out as a list for screen readers (accessibility)
Transition between frames can play automatically, but user needs to be able to start or stop the carousel from playing.

Usage:

When space is limited and location is considered priority
When looking to provide content for a user to explore without disrupting the main objectives of the page
Make sure to put content in order of priority or relevance

Considerations:

Please explore the use of alternative components before using a carousel as there are known drawbacks:
- Users often miss content after the first frame (key points or messages can be missed or misinterpreted if they span multiple frames)
- Users often overlook and scroll past carousels

Recommendation

Would suggest a 12 column and a 6 column carousel
Could include wave
Should either have dot navigarion or left and right arrows
should be swipable for touch navigation
Should work well with text over dark and light images
Would be good if all images didnt always have to be a restrictive crop such as 2100x 500 px or something

Designs

Designed by Gary Chow

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: YNo
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/internet/fibre/new/areas/vancouver
https://www.telus.com/en/bc/internet/fibre/new
https://www.telus.com/en/bc/mobility/phones/samsung-galaxy-s9/learn
Which teams/applications do you think would use this improvement?
HS MOB B2b
High impact: No

TDS colour library for styled components

Problem Statement

As a developer , I would like to have a library of colour variables that I can use as part of styled components, in addition to the sass variables that currently exist.

Recommendation

A library of TDS colours that are accessible from within styled component JSX files.

Designs

Screenshots
Sketch file

Meta

Willing to design solution: Yes
Willing to develop solution: Yes
Has workaround: Yes
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? No
Which teams/applications do you think would use this improvement? Any team using styled components
High impact: Yes - to developers

[CRITICAL] Public Repository Created

Please note that this repository is publicly visible to the internet!

/cc @tarekamin
/cc @admins

Colour selector toggle

Problem statement

We've created a colour selector toggle that allows you to pick between a set of colours to perform an action (such as selecting which colour accessory you want to purchase).
The selected state of the colour selector does not follow the same TDS styling for selected states of other elements.
Users have found that the colour name text label and the colour selector can be visually disconnected when there are many colour options.
The colour name label does not display in words for every colour selection option in an unselected state.
The colour selector for Product Experience Page does not show the colour name in words at all.

Recommendation

Add a colour selector that is clearly defined and accessible for all teams to use (specifically mobility phones/accessory PDPs as a general use case)

Designs

Screenshots

In the wild:
https://www.telus.com/mobility/accessories/product/sonix-clear-case-iphone-x
https://www.telus.com/en/bc/mobility/phones/samsung-note-9/learn?INTCMP=Tcom_MOB_BAN_SamsungNote9_LearnLink

Meta

Willing to design solution: Yes
Willing to develop solution: Yes
Has workaround: ?
Do any similar components already exist: Yes
(https://www.telus.com/en/bc/mobility/phones/samsung-galaxy-s9/learn)
(https://www.telus.com/en/bc/mobility/phones/samsung-galaxy-s9)
(https://www.telus.com/en/bc/mobility/phones/samsung-note-9/learn?INTCMP=Tcom_MOB_BAN_SamsungNote9_LearnLink)
Which teams/applications do you think would use this improvement?
All mobility, business and home solutions teams
Other teams who have products with variants they need to choose
High impact: Yes

new: in page notification messaging

Problem Statement

As a business we sometimes need to notify the user of something important while they are carrying out a task so that they dont make a mistake and/or double confirm.

Recommendation

None

Designs

None

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: Yes
Does this pattern exist already but isn’t a community component?
Not sure
Which teams/applications do you think would use this improvement?
Mobility
B2B
High impact: No

new: store finder

Problem Statement

As a customer sometimes i want to purchase in store so that i can talk to a person face to face

as a designer i would like a consistent component so that I can add store locator to my designs easily

Recommendation

Come up with a full width and or store locator module so that customers can find the nearest store to them.

Ideas:

Geolocation
Postcode lookup
Try to keep online - explain why its better - offer help?
tracking data?

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/resources/stores/?linktype=footer
Which teams/applications do you think would use this improvement?
B2B MOB HS
High impact: No

new: language switcher

Problem Statement

As a customer I would like to easily switch my language and region

Recommendation

Improve the region switcher and create a component

Designs

FYI designed & developed as a GE component.

M to XL
https://telus.invisionapp.com/share/KYNN05HXPJT

XS to S
https://telus.invisionapp.com/share/JDO0097T2C5

Meta

Willing to design solution: Yes
Willing to develop solution: Yes
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? No
Which teams/applications do you think would use this improvement? All outcome teams
High impact: No

new: Mapping and controls

Problem Statement

As a customer, I would like a consistent way of visualizing and navigating maps

Recommendation

Create a map component that accepts: pin locations or telus stores, search current location, gps detect current location, show store info e.g.

Designs

Screenshots
Sketch file

Meta

Willing to design solution: Yes/No
Willing to develop solution: Yes/No
Has workaround: Yes/No
Do any similar components already exist in TDS (core or community): Yes/No
Does this pattern exist already but isn’t a community component? (include url)
Which teams/applications do you think would use this improvement?
High impact: Yes/No

new: product catalogue component

Problem Statement

As a customer i would like product catalogues to look and feel the same so that i can easily navigate.

As a customer i would like product catalogue pages to have filtering options so that i can clear the clutter and focus on what i want.

as a customer i would like to be able to sort products in a catalogue so that i can see the most expensive or popular

As a designer i would like a component that has options for generating a product catalogue page so that we can all use the same.

Recommendation

Bring in mobility catalogue page and then look at right columns for filtering later.

Designs

https://www.telus.com/en/bc/mobility/phones?linktype=nav

OR

https://www.telus.com/en/bc/mobility/accessories/category/tech-accessory-sales?linktype=accessories_nav

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/mobility/accessories/category/tech-accessory-sales?linktype=accessories_nav
Which teams/applications do you think would use this improvement?
High impact: Yes/No

new: Breadcrumbs

Problem Statement

As a customer i would like to know what page i am on and in which section im currently located in

as a designer i would like a standard execution of breadcrumbs and placement on the page so that i can easily add it consistently

Recommendation

Header or footer breadcrumbs?
SEO concerns?

Designs

Screenshots
Sketch file

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/mobility/accessories/category/phone-and-tablet-cases?linktype=accessories_nav
Which teams/applications do you think would use this improvement?

MY ACC, HS, MOB, b2b

High impact: Yes/No

new: reviews

Problem Statement

as a customer i would like to see other customer reviews on the site

as a designer i would like to have a standard way of displaying review information

Recommendation

Ideas:

Submit panel
Review panel
Filter/Sort
Verify customer
Top vs worst review
Stars
Was this helpful

Designs

Screenshots
Sketch file

Meta

Willing to design solution:No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component?
Which teams/applications do you think would use this improvement?
MOB / B2B
High impact: No

new: hero image + wave

Problem Statement

As a designer id like to have a consistent hero image and wave component so that the experience clicking between pages doesn't jump around

Recommendation

Pick one size for xl,lg,md,sm and codify it

Designs

not sure if this is right @lucylist ?

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/internet/content/bundles?linktype=subnav
Which teams/applications do you think would use this improvement?
B2B
Home solutions
Mobility
High impact: No

new: comparison table

Problem Statement

As a designer I want to display complex plan feature-data that the comparison card component does not adequately support so that customers can make informed purchase decisions with confidence.

Requirements

Display a minimum of 2 plan columns at a time side by side to compare
Must allow user the ability to change the 2 plans being compared
Display a maximum of 12 feature rows on table load
Additional feature rows can be expanded with a Show all/Show less

Usage

When the comparison card component does not accommodate the full list of plan features.
When a customer wants to see all the features to compare between plans
Make sure to put content in prioritized order of relevance

Considerations

Alternate data structures have not been considered for this table

Recommendation

Ideas for table requirements:

Fixed Header
Horizontal Scroll
Mobile view
Zebra Stripes, Line Divisions, Free Form
Pagination
Hover Actions
Basic Filtering
Searchable Columns
Show only differences feature

Production Design Examples

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: Yes/No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/tv?linktype=nav
Which teams/applications do you think would use this improvement?
B2b MOB HS MY Account
High impact: No

new: Product details

Problem Statement

as a customer it would be good if the main product details were displayed consistently between pages.

Recommendation

Look at both MOBILITY and HS and see where we can align for consistency.

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: Yes/No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/mobility/accessories/product/google-home-mini
https://www.telus.com/en/bc/mobility/phones/samsung-galaxy-s9?linktype=pep_mobility%2Fphones%2Fsamsung-galaxy-s9%2Flearn_mobility%2Fphones%2Fsamsung-galaxy-s9
https://www.telus.com/en/bc/deals/home/mobility-bundle?INTCMP=Tcom_Tile_Deals_AddMob_OMNI&linktype=deals_and_bundles_card
Which teams/applications do you think would use this improvement?
MOB HS B2B
High impact: No

new: comparison cards

Problem Statement

as a customer i would like to clearly see the differences between plans so that i can easily compare benefits

as a user i would like to be able to create comparisons cards consistently and with less effort so that i can get on with more important tasks

Recommendation

plans
products
with and without checkbox/radio
with and without images
minimized view w/ more info
CTA near pricing
optional secondary CTA at very bottom of card
a singular variation for this same info without comparing

Problems

desktop vs. mobile view

Designs

The design for comparison cards has been added to DSM / _TDS_Community / Components (not coded) / Compare Cards / Card

https://telus.invisionapp.com/share/FRNH1OF853K

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)

https://www.telus.com/my-account/internet/select-plan/choose/

Which teams/applications do you think would use this improvement?

My account
Mobility
B2B
Home solutions

High impact: Yes

new: Accordion step tracker

Problem Statement

As a customer i would like to see what part of the check out process i am at without breaking it up over seperate pages.

as a designer i would like a vertical / accordion step tracker

Recommendation

Worth reading these before we continue with this issue:

https://www.nngroup.com/articles/accordions-complex-content/
https://www.moovweb.com/one-page-checkout/
https://uxplanet.org/progress-trackers-in-ux-design-4319cef1c600

Could be used on a page like https://www.telus.com/en/bc/mobility/phones/samsung-galaxy-s9?linktype=pep_mobility%2Fphones%2Fsamsung-galaxy-s9%2Flearn_mobility%2Fphones%2Fsamsung-galaxy-s9

Designs

None

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)

We have a horizontal step tracker

Which teams/applications do you think would use this improvement?
High impact: No

new: Title + text + CTA

Problem Statement

As a user i would like to be able to add a title, text and a cta without having to worry about spacing etc

Recommendation

versions need to include:

with and without eyebrow + H1, H2, H3
H2, H3, H4 + body variations
CTAs: Button, chevron link

Designs

Screenshots
Sketch file

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: Yes
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? Yes, common site pattern
Which teams/applications do you think would use this improvement?

My account
Mobility
B2B
Home solutions

High impact: No

new: Storage selector

Problem Statement

as a designer i would like a consistent way to impliment storage selection for the customer

Recommendation

None

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/mobility/phones/iphone-x?linktype=nav
Which teams/applications do you think would use this improvement?
B2B MOB
High impact: No

Toggle icon

Problem Statement

We created a new data toggle for the usage page to enable and disable data within their plan.

Recommendation

add data toggle icon into the TDS library for future use for any team.

Designs

The data toggle is already coded from the Nutella team.
Screenshots
Enabled: https://telus.invisionapp.com/d/main#/console/13507983/281885578/preview
Disabled: https://telus.invisionapp.com/d/main#/console/13507983/283301249/preview

Meta

Willing to design solution: Yes/No
Willing to develop solution: Yes/No
Has workaround: Yes/No
Do any similar components already exist: Yes/No
Does this pattern exist already but isn’t a community component? (include url)
Which teams/applications do you think would use this improvement?
High impact: Yes/No

Should we have a "recipe book" of common layouts using best practices?

Problem statement

As a Developer, I would like to have a "recipe book" of common layouts employed using TDS components, so that I can:

understand current best practices
save time writing boilerplate markup, and
get a more consistent result

Recommendation

Determine if the practice of using layout "recipes" is an improvement over current practice of ad-hoc implementations by each squad
If "recipes" are a favoured / scalable approach, decide what would be the best channel to share them

Designs

Should be based on existing tds-core, tds-community, and DSM assets

Meta

Include component name and version: N/A
Willing to design solution: Yes
Willing to develop solution: Yes
Has workaround: N/A
Do any similar components already exist in TDS (core or community): No
Which teams/applications do you think would use this improvement?: Design to Developer handoff
High impact: Unknown

new: how it works

Problem Statement

as a customer i would like to see at a glance how something works

Recommendation

Vertical column showing 3,4,5 steps. Any more can be distracting and should use a different explanatory format.

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component?
https://www.telus.com/en/bc/tv/pik/?linktype=nav
Which teams/applications do you think would use this improvement?
B2B MOB HS
High impact: No

Tabs (core team is developing)

Problem Statement

We currently have multiple visual treatments for tabs with different functionality throughout TELUS.com. I would like to create a TDS approved community component for tabs, that only has one function for an overall better UX experience. (See Donna's detailed audit here: https://docs.google.com/presentation/d/1rxgXYgXVVA7VJc-hvctoHs3hIwj0_cchDa96Iuv0fYE/edit#slide=id.g57086ce1ca_1_0)

Story, acceptance criteria, appendix

All Tabs-related working files and documentation can be found in the Tabs Google Doc (available for internal use).

Design intent

InVision files: https://telus.invisionapp.com/d/main#/console/13491097/412305657/preview
Sketch file: https://telus.invisionapp.com/d/main#/loading?folderID=35356594

Outcome

Defined tab designs for desktop, tabs and mobile. This will be available to all as a core component.

Meta

Willing to design solution: Yes
Willing to develop a solution: No

new: Mapping and controls

Problem Statement

As a customer, I would like a consistent way of visualizing and navigating maps

Recommendation

Create a map component that accepts: pin locations or telus stores, search current location, gps detect current location, zoom, show store info e.g.

COMMUNICATION ZONE INC.

Unit 22, 1500 Royal York Rd

Etobicoke, ON
(13.0 km)
(416) 241-6626

Open 09:00AM - 06:00PM
Mon-Fri: 09:00AM - 06:00PM
Sat: Closed
Sun: Closed
Trade-In Program
Business Connect

Google maps directions would be cool

Designs

Screenshots
Sketch file

Meta

Does this pattern exist already but isn’t a community component? (include url)

https://www.telus.com/en/bc/resources/stores/?linktype=footer
https://www.telus.com/en/bc/internet/fibre/new/areas

Which teams/applications do you think would use this improvement?
High impact: Yes/No

new: Animated Skeleton Components

Description

Loading experience for users take long time and users are impatient
The page is blank and users don't get feedback on what is happening in the backend
Users get frustrated when they click on refresh button and presented with a blank screen
Spinner use case for loading experience does not fulfill the fundamental need for "waiting" experience for users

Recommendation

Animated Skeleton components that indicates loading the screen is real slow.
A skeleton screen gives a visual cue that content is loading one after the other into each UI element area.
It has been found that skeleton screens play a major role in the perception of users who appear to think that these are not as slow as spinners or progress bars. In fact, many users seem to love them for its look and feel.

Designs

Meta

TDS version: vX.Y.Z
Willing to develop solution: Yes/No
Has workaround: Yes/No
High impact: Yes/No

new: loop qual

Problem Statement

As a customer i would like to enter my address once and not have to do it repeatedly,

as a designer i would like a stock standard way to add address qualification to my pages

as a developer i would like to not have to build this complex item over and over again

Recommendation

Should not contain buisness logic but the form entry component should be the same design between sections.

May need two executions one that is a full width component, other which is an in page component?

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component?
https://www.telus.com/en/bc/internet/content/overview?linktype=nav
Which teams/applications do you think would use this improvement?
home solutions and b2b
High impact: No

new: Image Slider component

Problem Statement

As a user i like to see multiple product images easily and visually.
As a designer/dev i dont want to have to reinvent the wheel every time i want to show 3+ images.

Requirements:

Displays more than one piece of content in the same place (one at a time)
Must offer a thumbnail preview of all content within the gallery, and indicate which image is currently selected
Must provide navigation for moving between images (w/ clear interaction)
No more than 6 images in the gallery
Transition between images should not happen automatically, user needs to be able to move between images manually.

Usage:

When looking to provide TELUS product images for a user to explore without disrupting the main objectives of the page
Make sure to put images in order of priority or relevance

Recommendation

A component that product pages and marketing pages can use to show multiple images.

additional criteria may include:

loading product sku based on colour/capacity/physical size options
swipe gallery on touch devices
thumbnails, chevrons, or dot navigation
header, body, cta

Designs

TELUS Drive+

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist in TDS (core or community): No
Does this pattern exist already but isn’t a community component? (include url)

https://www.telus.com/en/bc/mobility/accessories/product/jbl-link-10-speaker?linktype=accessorieshomepage
https://www.telus.com/en/bc/mobility/accessories/product/instax-share-sp-3-square-printer
(see instagram looks)

Which teams/applications do you think would use this improvement?
High impact: Yes/No

sub-nav component

Problem Statement

As a designer i would like a tds component that matched the sitebuilder subnav.

As a developer i would like a consistent nav behaviour so that i dont have to recode it

As a customer i would like to have consistency between pages and the menu in the same position.

Recommendation

Take subnav from sitebuilder that has both icons and without formats. This already has had some validation and roundtable discussion and would be a great first step. This could also go into core?

Production Design Examples

PureFibre Plans: https://www.telus.com/en/bc/internet/fibre/new/plans?linktype=ge-meganavs
MyT: https://www.telus.com/my-account/
Home Security ("BlockSubnavigation"): https://www.telus.com/en/smarthome-security

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component?

https://www.telus.com/en/bc/internet/content/overview?linktype=nav

Which teams/applications do you think would use this improvement?

mobility, home solutions, business, halo

High impact: Yes

new: chat component

Problem Statement

As a customer i would like to chat with support and know that it is not a phishing site

Recommendation

TDS styled chat box with icons buttons etc

Designs

Meta

Willing to design solution:No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/mobility/planbuilder?numPeople=4&dataPlanSOC=SDSH12GB&voicePlans=PYCUNLP70,PYCUNLP70,PYCUNLP70,PYCUNLP70&needsDevices=false,false,false,false
Which teams/applications do you think would use this improvement?

MOB/HS/MYACC

High impact: No

new: calendar picker

Problem Statement

As a customer I need the ability to view time and date availability to select a single installation appointment for a technician to come and install a TELUS product or service at my service address.

Requirements/Stories

https://telusdigital.atlassian.net/browse/TELCOM-252

https://telusdigital.atlassian.net/browse/TELCOM-253

Recommendation

Unified Checkout to contribute a calendar component that teams can consume for the use case of scheduling appointments
Work with a11y primes to enhance & future-proof designs
Remain TDS compliant
Provide allowable variants & outline the usage for all cases

Designs

Preview: https://telus.invisionapp.com/d/main#/console/16124092/335215125/preview
Source file (WIP): https://telus.invisionapp.com/d/main#/projects/prototypes/16124092/assets

Usage

Meta

Willing to design solution: Yes
Willing to develop solution: Yes
Has workaround:
Do any similar components already exist: Yes
Does this pattern exist already but isn’t a community component? Yes
Which teams/applications do you think would use this improvement?
HS, MyTELUS, Business
High impact: Yes

new: Graphs and charts

Problem Statement

As a designer i would like to have consistent graphing and charting across the site. As a developer i would like to not have to recreate graphing and charting every time.

Recommendation

The ideal solution would include colour options, bar, pie and scatter graph options. legend functionality. Animation would be nice out of the box

Designs

Screenshots
Sketch file

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround:No
Do any similar components already exist in TDS (core or community): No
Does this pattern exist already but isn’t a community component? (include url)

Telus about and my account?

Which teams/applications do you think would use this improvement?
About / my account? mobility speed? fibre/copper speeds?
High impact: No

new: Terms & conditions component

Problem Statement

As a customer I need the ability to read the terms and conditions of products, services and pricing so that I may understand with clarity what is included/excluded and my legal obligations.

As a marketer I need the ability to provide specific details for products, services and pricing messages when it cannot be reasonably explained within the marketing copy.

Requirements

legal key ${LEGAL.description-of-legal-item} reference in sitebuilder that embeds a consistently styled asterisk or numerical annotation as a hypertext link (or button tbd) within pricing lockups or body copy. (see pg.55 TELUS Content Standards)
legal key link displays the specific legal copy in a disclosure notifier on-screen with a close button.
accessibility enablement - read-by text that describes the label first 'Terms & Conditions' followed by 'annotation [1]. [legal copy]'. The next tab to page element should be a [X] close button to dismiss the disclosure notifier.
markdown support (bold, etc.) to the content of legal notes inside of [G] Legal in Contentful

Considerations

do not use small type or any distracting elements that could undercut/hide the disclosure
If only one annotation is required, use superscript asterisk. For example, “Get a free gift when you bundle TELUS services*, and in legal copy, it would be “*Conditions apply.”
If only one annotation is required, when possible place elaborative copy in-page with the language or element in question.
A clickable area of 16x16 pixels would be ideal. (may require text link to be styled as a button)

Usage
v1 - InVision Prototype - XL
v2 - InVision Prototype - XL

v1 - InVision Prototype - XS
v2 - InVision Prototype - XS

v1 - InVision Prototype - XL - Pricing with legal

Research

Research deck
Existing SiteBuilder Component
TELUS Production examples (as seen in research deck)
Pattern A, B - numbered superscript that links to a slide out panel and highlighted the right numbered item.
Issues - click area is too small, annotation link and drawer both present accessibility issues with browser screen readers, feature is not consistent on mobile devices (implementation and functionality),

Pattern C - terms and conditions are in an accordion and the user must navigate up and down the page to find the relevant numbered annotation.
Issues - the correlation of annotation to legal line item is not clear, the accordion is accessible and the legal text inside can be read by screen reader however, the accessible text to open the accordion is not very good.

Pattern D - example page has been updated with in-page ToC copy and generic ToC language in an accordion.

Pattern E - example page has been updated with unlinked numbered annotations and a ToC accordion with numbered legal descriptions

Pattern F - nutcracker flow, [Terms and conditions for Internet and TV deals and bundles] new page load under [service terms]

https://www.telus.com/en/bc/tv/new/plans#/landing (slide in)
https://www.telus.com/en/bc/mobility/plans?linktype=nav (accordion)

Teams/applications that could use this improvement: All teams, All applications
High impact: Yes

new: Edit box (or a way to edit info)

Problem Statement

As a customer i would like to see at a glance if something is editable so that i can easily change info

Recommendation

Designs

Screenshots
Sketch file

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
Which teams/applications do you think would use this improvement?
High impact: Yes/No

Button Group component

Problem Statement

As a customer, I would like a clear and inviting method when filling forms
As a TELUS designer or developer, I would to use a repeatable pattern for making radio selection in forms, so that I can improve my speed to production

Recommendation

Use semantic form elements (radio group) styled as buttons to provide a clear visual presentation while communicating the recognizable pattern to assistive technology
Button Groups should be used as a replacement for a radio groups when the options are very short

Reference

Grouping controls - W3C Web Accessibility Initiative

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component?
- Yes, on the family plan selection page on telus.com
Which teams/applications do you think would use this improvement?
- Mobility
High impact: No

new: modal

Problem Statement

As a designer i would like a consistent way to show modals so that i have don't have to reinvent the wheel

As a customer i would like a consistent modal interface so i know where to close, click next etc.

Out of scope

B2B style dialogue chooser (see design)

Outcome

community-modal has two interface styles: modal, and dialogue
- modal should have a confirm and close[x] button
- dialogue should have a confirm and cancel button
Consumers of community-modal should handle focus state and return to the initiator of the modal once the modal is cancelled/closed
- Modal heading should be announced once it receives focus()
Appears over-top parent page with an overlay
Interactions (skip links etc.) need to remain inside window until closed, with Esc key available to user (accessibility). Esc key press should close the modal.
Expectations should be set before showing modal (shouldn’t be a surprise)
- Modal should be announced to assistive tech before it is triggered

Usage:

Triggered based on user action
Needs immediate action by user
- Confirmation of action that isn’t reversible
- Transactionwith an exchange of monetary value, etc.
Delivering information that requires focus

Considerations:

Does the interaction need to be disruptive
Can the information be included on the same or subsequent screen?
Can a required action be include as part of the current flow

Acceptance criteria

Documentation

Summary

A modal is used to reveal additional information to a user after they have performed an explicit interaction. They are a strongly discouraged pattern; it's preferred to have all relevant information within a page, and irrelevant information either linked externally or omitted.

Usage criteria

Modals must only appear after a user interaction, not on page load or any other circumstance
Modals must only be triggered by a button
Modals must only contain copy and no other content types
Should keep copy to a minimum
Refer to WebAIM documentation for how to achieve modals accessibly

Accessibility

When displayed, the modal focus traps the user, and locks page scroll.
It is scrollable when the viewport height is shorter than the contents of the modal

Coded component

Proposed API

<Modal
  heading="Business marketing"
  body="Solutions for your business, TELUS helps market your products."
  cta={<>Sign up <A11yContent>for business marketing</A11yContent></>}
  cancel="No thanks"
/>

heading: string, required
body: string, required
cta: node, required
cancel: node, optional

Scenario: modal is not open

a button can be given a callback function that triggers the modal view
when the modal initiator is triggered, it passes its ref to the Modal component in order to return focus

Scenario: modal is open (updated March 24, 2020)

For content models; Modal should be able to be closed with a close button (available with @tds/core-interactive-icon) on the top-right corner, clicking outside the modal, hitting the ESCAPE key
For dialogue models, Modal should be able to be cancelled with a dedicated cancel button
- Modal vs dialogue: the modal component can either render a CTA + close button (modal), or a CTA + cancel button (dialogue)
When the modal is open, the first text item should be focused and read, as per accessibility standards (set tabindex="-1" to the heading)
modal has header text, body text, required 'submit' text, and optional 'cancel' text
Modal is focus trapped (use @tds/util-shared-hocs withFocusTrap)

Scenario: modal styles

header text renders as an h3 (using a p tag) (dependency, need to render core-heading as a <p>, can use div for the interim)
- body text renders as a Paragraph, 16 pixels below the header
- submit text renders as a primary Button, with Box-5 spacing below body text
- cancel text renders as an outlined Button (currently not in TDS)
There should be an Athens Grey #F7F7F8 overlay at 94% opacity, covering the entire page behind the modal
the modal should have a box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);, which is different than Card
the modal should have a 1px shuttle grey border (have it match the styles of @tds/core-card's defaultWithBorder variant)
its z-index is 2000 (assuming chatbot has a z-index of 1001)
the last button has Box-4 space between the bottom of the modal and button

Situation: responsiveness

On mobile viewports widths (from xs to sm) (below 576px)
- the modal must cover the entire viewport, and must not have a box-shadow or border
- the buttons should be positioned at the bottom (using a flexbox)
- on short heights (where modal content is larger than the viewport height), the modal should be able to scroll
On larger viewports (sm+)
- Max width: it should not exceed 570px in width
- on short heights, the modal should be able to scroll, without the scrolling, and the modal should only scroll up until the top and bottom-most parts (aka, do not scroll with the entire page height, only the viewport height). You can take inspiration from Spinner

Examples

Example 1: triggering and displaying a modal

Designs

https://telus.invisionapp.com/project/17778239

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
Which teams/applications do you think would use this improvement?
Myaccount HS MOB B2B
High impact: No

new: Search Container w/ Quick Links

Problem statement

As a customer, I would like to have a clear path to search within a page on t.com but also have the option to jump quickly to the most popular areas of the page in the same place
As a designer, I would like the ability to drop this entire component into my page design and ensure that it will remain consistent with all of the others

Recommendation

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist in TDS (core or community): No
Which teams/applications do you think would use this improvement?: MY ACC, HS, MOB, b2b
High impact: Yes

new: price lockup

Problem Statement

As a customer i would like to see the price displayed in a similar format between pages so i can understand what ill paying at a glance

Exists as a story on the TDS core Jira board:
https://telusdigital.atlassian.net/browse/TDS-909

Recommendation

text above price w/icon; offer, sale
text below price; savings, regular price

Designs

Screenshots
Sketch file

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
All over site
Which teams/applications do you think would use this improvement?
All teams
High impact: Yes

new: quote/testimonial card

Problem Statement

as a designer i would like a consistent testimonial/quote component so that i can save time

Recommendation

Left/right executions needed

Designs

SiteBuilder already has this so sketch file should exist with gary chow

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/on/digital
Which teams/applications do you think would use this improvement?
HS/MOB/B2B
High impact: No

new: image + H + text + CTA

Problem Statement

unknown

Recommendation

@lucylist ?

Designs

see https://docs.google.com/spreadsheets/d/1CBAXvPHgEbkbKjM0X-2kYAFNQMpiVg2nfMUDAyCnqe8/edit#gid=0

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
Which teams/applications do you think would use this improvement?
HS/Mobility/Business
High impact: No

new: filters / pilters

Problem Statement

As a customer i would like to be able to clcick a filter and toggle between content

as a customer i would like to see what has been filtered so that i can decide to view more or filter more

Recommendation

Decide if we like pilters at https://www.telus.com/en/bc/mobility/phones?linktype=nav
and solve for this scenario:

Also i would like to see the option of selecting multiple options.

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://www.telus.com/en/bc/mobility/accessories/category/phone-and-tablet-cases?linktype=accessories_nav
Which teams/applications do you think would use this improvement?
Mobility, HS and B2b
High impact: No

Docs: add notes on branching

Come up with a branch convention to avoid conflicts. I propose

type/#issue_number
type/package-name_developer-name

Where type can be: feat, fix, or chore.

When complete, copy these notes to tds-core.

new: Address bar with cart

Problem Statement

As a customer i would like a consistent place to see and change my address

Recommendation

Designs

https://telus.invisionapp.com/d/main#/console/14046124/293569366/preview

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
https://telus.invisionapp.com/d/main#/console/14046124/293569366/preview
Which teams/applications do you think would use this improvement?
High impact: Yes/No

<SkeletonProvider /> High-level component for "skeletonizing" TDS components.

Problem Statement

I have observed that some teams use series if/else or ternary constructs to selectively switch display components with skeletons. This can sometimes make code appear cluttered and hard to manage.

Recommendation

I am proposing a simple method to make do this cleaner and offer some sensible presets using the existing TDS Skeleton component.

Provide a high-order-component (HOC) for wrapping TDS components and other React elements with a default or a given Skeleton.
Provide a high-level component e.g to contain TDS components and orchestrate the transition to-and-from the Skeleton state.

This pattern is current being developed for the Internet Overview page:
https://github.com/telus/my-telus-home-internet

Defaults for standard TDS components

I also further recommend providing skeletonize defaults for a subset TDS components, including Text, Heading, Box, Image etc.

This way the can wrap this subset of TDS components an minimize the amount of code needed to write add skeleton loading to UIs built with TDS components.

Designs

This is a simple StackBlitz demo I did about a month ago:

Meta

Willing to design solution: Yes
Willing to develop solution: Yes
Has workaround: Yes
Do any similar components already exist in TDS (core or community): No
Does this pattern exist already but isn’t a community component? Yes:
SkeletonProvder
TDS Skeleton Defaults
Which teams/applications do you think would use this improvement? All teams.
High impact: No

new: Promo/flag/ribbon/special marker

Problem Statement

as a customer i would like a clear way of seeing if something is on sale or a special feature or new so that i can focus my attention

as a designer i would like a way for all teams to consistently approach flags so that we can improve user experience

Acceptance Criteria:

Ribbon should have margin of 16px above and below.
Should have inner padding of 8px top and bottom.
The ribbon should expand and contract to fit the inputted text.
Any text should be allowed as an input / prop, but should be limited to strings only.
There should only be one line of text allowed, must not wrap to two lines.
The minimum total width of the ribbon is 126px.

Recommendation

Description of the proposed solution

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component?
https://www.telus.com/en/bc/mobility/phones/?linktype=nav
Which teams/applications do you think would use this improvement?
MOB/HS/B2B
High impact: No

new: toggle switch

Problem Statement

as a designer i would like a more Skeuomorphic way for customers to toggle on/off states than radio buttons

Recommendation

might be a core component?

Designs

Screenshots
Sketch file

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component? (include url)
Which teams/applications do you think would use this improvement?
High impact: No

new: Colour selector

Problem Statement

As a customer , I would like to see all the colors available clearly so that I can choose the color of my product

Recommendation

something similar to what we have just standardized. should allow for palette. one color + two color options. e.g. rose gold and white, rose gold and black. ability to select custome color maybe?

Should probably work for product pages and catalogue pages.

https://casesandberg.github.io/react-color/ has a few options

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component?
https://www.telus.com/en/bc/mobility/phones/iphone-x?linktype=nav
Which teams/applications do you think would use this improvement?
Mobility B2b
High impact: No

telus / tds-community Goto Github PK

tds-community's Introduction

TELUS Design System Community

Introduction

Getting started

For designers

For developers

Contributing

Further Documentation

Contributors

tds-community's People

Contributors

Stargazers

Watchers

Forkers

tds-community's Issues

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta

Problem Statement

Recommendation

Designs

Meta