new: comparison cards

[jackreeves]

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

[jesdavpet]

Hey @jackreeves would you be able to post links to the Invision designs for the "comparison card"?
They contain a bunch of useful information, which is missing in the slide deck.

[mike-bunce]

Developer team has taken a look, there is more design work to be finalised before development work can begin.

[lucylist]

Friday, June 15, 2018

• Explore bonus offer options (above card, within card)
• Gift offer (free product or save money)
• It's possible to get both bonus offer and gift/save money
• Icons are examples only, all teams need to agree on similar icons (Brian is leading)
• If using the meter icon (move the needle forward, optimistic)

Consideration for hierarchy/a11y

• Keep description/bullets together
• Keep price/CTA near the bottom
• Once you reach the CTA, people may not be able to read additional content to make informed decisions

Action items

• Brandon to reach out Laurel for bonus offer/gift explorations (Brandon & Laurel)
• Add hierarchy to their content pieces so that we can develop a robust component (All)
• Create options based on hierarchy of info on each card to respective tribe (Brandon)
• Donna to help Brandon with spacing alignment (Brandon & Donna)
• Follow up with Brian to make sure we're in the loop for icon selection (Lucy)

Future steps

• Testing new card component within each user flow
• Build out card (code) and contribute to TDS-community repo
• Build out card (design) and contribute to TDS-community design library

https://docs.google.com/presentation/d/1iFyE7DOuU5Obi9UlU7TSbFvoS6p5THomx0NhhUOsuO4/edit?usp=sharing

[DougTelus]

The design for comparison cards has been added to DSM / _TDS_Community / Components (not coded) / Compare Cards / Card
https://telus.invisionapp.com/share/FRNH1OF853K

[theetrain]

While chatting with @sketchidea regarding the viability of comparison card as a community component, we found it breaks one of the conventions of being a component:

5. Should be sufficiently granular to promote reuse
   Design system components should encapsulate a single pattern or user experience “element.” Seek to find the most granular, standalone, reusable pattern.

With that said, this may be more appropriate as a block/element seeing that it uses multiple core (and potential community) components by convention, rather than represent a single reusable case. Consider this image:

If the comparison card always uses these components, in this order, then a rigid component could work. If there are permutations of the comparison card that may include other components, or may not use the components listed above, then there's the issue of high maintainability in code, as well as delivering a bloated component that may not be fully used in a given page (for example, not adding content for the core-input-feedback component, but still loading core-input-feedback on the page is dead weight).

Should we instead make the comparison card a convention and work on its inner components, rather than group everything into a single component?

[DougTelus]

Hello Enrico, The card design is such that the elements used inside the component never change in order. The ability to turn elements on/off or edit the copy/iconography is the only configuration.

…

-Doug From: Enrico Sacchetti <notifications@github.com> Reply-To: telus/tds-community <reply@reply.github.com> Date: Friday, August 10, 2018 at 4:08 PM To: telus/tds-community <tds-community@noreply.github.com> Cc: Douglas Limin <Douglas.Limin@telus.com>, Comment <comment@noreply.github.com> Subject: Re: [telus/tds-community] new: comparison cards (#21) While chatting with @sketchidea<https://github.com/sketchidea> regarding the viability of comparison card as a community component, we found it breaks one of the conventions of being a component: 1. Should be sufficiently granular to promote reuse Design system components should encapsulate a single pattern or user experience “element.” Seek to find the most granular, standalone, reusable pattern. With that said, this may be more appropriate as a block/element seeing that it uses multiple core (and potential community) components by convention, rather than represent a single reusable case. Consider this image: [image]<https://user-images.githubusercontent.com/12798751/43978798-804576e0-9cb6-11e8-952b-9a063b6f4adf.png> If the comparison card always uses these components, in this order, then a rigid component could work. If there are permutations of the comparison card that may include other components, or may not use the components listed above, then there's the issue of high maintainability in code, as well as delivering a bloated component that may not be fully used in a given page. Should we instead make the comparison card a convention and work on its inner components, rather than group everything into a single component? — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#21 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AensiEU9D7Vj6HYbNN2B1X8UJf9uoiItks5uPegtgaJpZM4UcqSl>.

[jesdavpet]

I want to second @theetrain's comment above.

As I recall, this request came out of an exploration of how existing designs differed for similar use cases for comparisons using a card on t.com. Is that correct? If so, maybe we've already crossed the finish line for comparison cards.

Wouldn't @DougTelus's contribution to the DSM for this layout be sufficient to address design inconsistencies going forward?

From a development perspective I don't think a new React component is a tool we need for this. We can just use what's already in tds-core to implement this design. As a stand-alone component, it would be brittle, with a high cost in complexity given the number of permutations possible.

[lucylist]

before going into development, we will want to test this. next testing session is sept 11/13.

[varunj90]

prerequisite: icons needs to be updated by tds-core team and benefits component needs to be built before the development of comparison cards can begin

[varunj90]

hey @twirlingsky / @gkychow can you add the updated designs for the comparison card.

thanks!

[twirlingsky]

Here are the Optik TV cards (includes spacing):

https://telus.invisionapp.com/d/main#/console/15376081/329593121/preview

[varunj90]

hey @gkychow and @twirlingsky do we have an updated design for this component?

@twirlingsky i saw you posted a link for optik tv cards - is someone updating the comparison card based on the research?

cc: @lucylist

[invalidred]

After discussion with @varunj90 seem like this will ultimately be a complex component once the <Badge.Ribbon> is created. In the meantime it will be a recipe and will be completed once #168 is figured out.

[varunj90]

hey @twirlingsky can you look into the design and add screenshots and links here, thank you!

[twirlingsky]

[varunj90]

DPA discussion

1. can we use price lockup in card addon/hardware - 9.54/ month to be consistent
2. Card plan - corner colour feature needs to be looked at a little more and won't be added into DSM for now
3. content/verbiage - francisco and laurel to fix it, specifically /month vs per month (connect with content/ CX )

@twirlingsky can you update the above designs

Also great job in categorizing it!

[twirlingsky]

*Note: These cards appear in a grid layout and it is intended that all the elements line up left to right and that the cards are the same height. So vertical breathing room is required (below the second benefit line usually)

Also, currently we don't have a direct add to cart in Home Solutions - but it is coming, so I've included the design intent of the main CTA btn for Add to cart or check availability (if unqualled), and the chevron link below goes to the respective PDP.

[donnavitan]

Consider adding usage guidelines to address the following:

• Will the card with fibre corner be excluded from being added to the DSM? If it is included, will it have a disclaimer that this is currently not available as component or variant of card?
• What is the breakpoint for the card being a set width? When does it become a responsive component (expand to 100% width)?
• How many can be shown in a row?

[twirlingsky]

Added to DSM with guidelines. I omitted the Pure Fibre corner since it is an edge case to resolve an ask from marketing

[Christina-Lo]

@twirlingsky thanks for adding the guidelines, they look great! I did a desk check on the DSM component and have some edits. Let us know if you have any questions

• On all cards, change H3 so that it reflects what the label is for
• Naming should follow format on DSM right now
  TV Plan, 2 year term > comparisonCard/tvPlan/term
  TV Plan, no term > comparisonCard/tvPlan/noTerm
  Internet, no term > comparisonCard/internet/noTerm
  Internet, 2 year term > comparisonCard/internet/term
  Add-ons, one-time cost > comparison/addOn
• Change benefit 1 and benefit 2 to use list/benefit/withheading
• Change price to price lockup component
• Card (background) should be using layer style card/default
• When building patterns, everything should be using TDS-components, so the text styles also need to be attached to the text used right now

[twirlingsky]

Thanks @Christina-Lo - will update the designs. And re-post to the community

Note: card/default is missing the 1 px #D7D7D7 outline and the 4 px rounded corners.

[twirlingsky]

Updated in TDS Community.

*Note: The ribbon is quite a bit larger vertically than it was formatted before. To me, it looks a bit bulky - but I guess we've decided on this. The Price lock up with the ribbon might be made into a new component - there isn't anything in TDS to align this with (although I've just layered the ribbon on top of the large price lockup)

(Sorry for not having all the TDS-components in there - my file pre-date a lot of that work. Updated now!)

[Christina-Lo]

@twirlingsky thanks for updating them in DSM! They look great :)
I have a few more edits:

comparisonCard/tvPlan/term and _comparisonCard/tvPlan/noTerm

• still has h3 label attached

comparisonCard/internet/term and comparisonCard/internet/term

• displays 3 benefits, from the usage, it is stated that there should only be 2

comparisonCard/AddOns and comparisonCard/GiftWithPurchase

• allows designer change the button and chevron link colours, are we allowing the potential of a designer being able to use a purple button with a green chevron link? If yes we can leave as is, if no we need to look at the layers

All comparison cards

• Updating with TDS-Components didn't keep the override limitations you've set in the first iteration, so you'll need to go back and do those again

I brought the card default not having the 1px border up to CX and we are most likely going to update that. As well, I'll talk to the team about the price lock-up with the ribbon, in the meantime if you could start an issue on TDS-core so we can keep track of conversations there https://github.com/telus/tds-core/issues/new/choose

[varunj90]

The designs are available in DSM: https://telus.invisionapp.com/dsm/telus/tds-community/folder/components/5cd1add877b0f2e7d268a8e0

For code, this will be built as a recipe of multiple components