TB: New config plan selection card

marshjr commented 5 years ago

Problem Statement

As a customer, I would like to easily understand my plan options, so that I can make an informed choice

Recommendation

This is a TB component

Design intent

(This space is intentionally left blank. The motivation and design intent go here.)

Designs

Acceptance criteria

This section is intentionally left blank. See story writing process.

User stories

(This section is intentionally left blank. User stories and acceptance criteria go here.)

Example:

Scenario: Displaying the component

Given text is provided Then the text is displayed as a child And the text size matches core-text medium

Out of scope

(This section is intentionally left blank. Features or items that were deliberately left out of scope during design intent or may be mistaken as within scope are noted here. Link to related issues if possible.)

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

catherinetelus commented 5 years ago

That copy in tile feels very light weight for 14. Think we might need to bump it up for accessibility?

marshjr commented 5 years ago

@catherinetelus agree. We've been talking about this for a while now. It is the TDS body copy style from the previous PDP page, but we should indeed bump it!

Christina-Lo commented 5 years ago

@marshjr @catherinetelus that must be an extremely old TDS body copy style as I've never seen it since I've been here 😂

Meeting notes:

Can this be built without the divider and just have the check box plan? Consider making the shell only (will require use case to justify general use)
Built semantically as checkbox, radio with the ability to select only one or multiple
with plans is a pattern + price lock is a recipe/pattern
may have complex layout; enable ability to show price
may have expanding content; more details
Read order: Title, details, offer, price, wraparound ribbon

Action items:

change light grey text styles to address accessibility concerns (@stu-brown)
need more discussions to see what needs to be included for this component (DPA review)
need usage criteria on copy length (someone from content)
purple text "highlight/deal" text that appears for certain plans needs further exploration as a customer can potentially miss it entirely (@stu-brown)
Mobility and My TELUS needs to completely align on the items (@stu-brown and @lynnepeacock)

varunj90 commented 5 years ago

hey @Stu-Brown and @lynnepeacock, do you have any updates on this ticket?

lynnepeacock commented 5 years ago

Feedback

Use TDS price lock-ups
Try remove the vertical dividing line from the large cards
Look at the alignment of expanded content inside the small cards Currently, the user must scan back to the left
Make sure the colours of the breakdowns are consistent with TDS (Reference the cart breakdown styling)
Increase descriptions to 16px
Should we have the link inside the card? Investigate alternative layouts to avoid this

Interaction questions

What is the maximum number of components/content that can be affected by a selection?

lynnepeacock commented 5 years ago

Example of progress Looking at alignment in lists

lynnepeacock commented 5 years ago

Hi all, here is my progress with the cards for all scenarios. Once these have been reviewed by the CX team I will work with the DPA team to write the interaction and visual rules. Stu is happy with these changes from a mobility perspective :)

Price breakdown exploration

lynnepeacock commented 4 years ago

Preview of alternative price lock-ups

Intention:

To swap the hierarchy and importance of the "was" price vs. the current price
Reduce spacing

Left example: Original pricing Center and right examples: New lock-ups

varunj90 commented 4 years ago

hey @lynnepeacock whats the latest on this ticket?

lynnepeacock commented 4 years ago

Hi @varunj90, we last discussed the layout of the price format (which will be included on Christina's ticket). I believe the main container and expand collapse functionality / design is signed off

Christina and I will meet next week to work on this.

Updating from slack conversations

edilege commented 4 years ago

Problem statement: Proposed design for cards in configure doesn't work well for prepaid. Prepaid has more plans than postpaid and every plan has either talk & text or talk, text & data. Each value changes in every card and the current design don't have a way to show the details of the plan. Here is the proposed enhancement for the card to be able to use it for prepaid.

telus / tds-community