TB: Circular promotion callout / summary

[Stu-Brown]

Problem Statement

In order to give a quick summary of an offer, sale or promotion we want to create a new circular lockup

Recommendation

Circle container to give a top level summary of an offer with room for additional details

Design intent

Initially designed as a companion to a slider component to illustrate the value of the family discount. The circular lockup could be used as a static standalone container or as a companion that dynamically updates.

As a customer
I want to quickly and easily understand the offer
So that I can make my shopping decisions quickly and easily

Designs

Desktop: https://telus.invisionapp.com/share/G9U516ZZJMN#/386143722_XL_-_Add_A_Line_-_Telus_Family_Discount_-ROC-

Mobile: https://telus.invisionapp.com/share/G9U516ZZJMN#/386143723_XS_-_Add_A_Line_-_Telus_Family_Discount

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
• 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? No
• Which teams/applications do you think would use this improvement? Outcome teams, Mobility, Home Solutions, Business
• High impact: No

[theetrain]

DPA Discussion:

• Try usability testing to see if people try to click on the Circle
• Intended to contain static copy without interactive elements, but it may potentially contain Interactive elements (needs more design)
• Some identified use cases in Mobility + Home Solutions
• Try to find a good pairing for the Circle

[varunj90]

hey @Stu-Brown any updates on this ticket?