Comments (30)
The design for comparison cards has been added to DSM / _TDS_Community / Components (not coded) / Compare Cards / Card
https://telus.invisionapp.com/share/FRNH1OF853K
from tds-community.
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:
- 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?
from tds-community.
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.
from tds-community.
Developer team has taken a look, there is more design work to be finalised before development work can begin.
from tds-community.
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
from tds-community.
from tds-community.
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.
from tds-community.
before going into development, we will want to test this. next testing session is sept 11/13.
from tds-community.
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
from tds-community.
hey @twirlingsky / @gkychow can you add the updated designs for the comparison card.
thanks!
from tds-community.
Here are the Optik TV cards (includes spacing):
https://telus.invisionapp.com/d/main#/console/15376081/329593121/preview
from tds-community.
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
from tds-community.
Yes, the cards have been updated based on various input. My squad has coded them, but can't contribute them back because we need to do some tech stack updates. I can query my devs to see when that can happen.
from tds-community.
hey @twirlingsky can you post the updated designs here and the PO for the group that has developed this.
thanks!
from tds-community.
Here are the final comparison / plan cards we are using in HSC:
https://telus.invisionapp.com/share/UYPX48137CE#/335303431_XL_-_1200px_--_R3_OTV_-_Visual_Documentation_Page_2
Shaan Narang is our PO on the HS configuration / catalogue squad
Our devs (@nathanmarshall @LancePTB) mentioned that the TDS team asked that the cards not be contributed as a full component, but rather as the individual components that make up the card.
They also mentioned that to be compliant to TDS coding standards might take a little work to setup for our team (not sure what that entails)
from tds-community.
This is blocked by discussion around a possibility of creating a <Badge.Ribbon>
component as part of the community component. Design review is needed for this new component.
from tds-community.
Design is available or to be discussed #48
from tds-community.
This issue will ultimately be a recipe and will also require the development of <Badge.Ribbon>
. Documenting Recipe will be covered here #168
from tds-community.
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.
from tds-community.
hey @twirlingsky can you look into the design and add screenshots and links here, thank you!
from tds-community.
from tds-community.
DPA discussion
- can we use price lockup in card addon/hardware - 9.54/ month to be consistent
- Card plan - corner colour feature needs to be looked at a little more and won't be added into DSM for now
- 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!
from tds-community.
*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.
from tds-community.
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?
from tds-community.
Added to DSM with guidelines. I omitted the Pure Fibre corner since it is an edge case to resolve an ask from marketing
from tds-community.
@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
from tds-community.
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.
from tds-community.
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!)
from tds-community.
@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
from tds-community.
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
from tds-community.
Related Issues (20)
- DatePicker date format HOT 1
- sticky side-scrolling sub-nav component
- Modal heading text overlap with close button in mobile view
- Mini expand collapse: improvements, path to v1
- Update Callout Paragraph
- Update Skeleton Provider to support rounded corners on Image skeleton
- Modal bottom cta wrong padding top HOT 1
- New OptimizeImage component
- Add icon support to Callout Paragraph
- Enhance (community-input-group): change input group min-width
- Featured Stories component request
- Cannot listen to onClick events for MiniExpandCollapse component
- DatePicker.isDayDisabled as no effect
- Image attribution component
- a vulnerability CVE-2020-15168 is introduced in @tds/community-skeleton-provider
- Dependency Dashboard
- New Telus Contractor HOT 1
- Mini Expand Collapse only works on node > 14.0.0
- Difficult to re-open the DatePicker Overlay
- Critical Vulnerability in community-skeleton-provider - recompose
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tds-community.