TB: Summary bar (Mobility: config, My TELUS: plan change, HS: new shopping experience)

mattsies commented 5 years ago

Problem Statement

As a customer buying or renewing a phone , I would like to see a tally of my device and plan price , so that I can understand how much I'm saving, spending , and what is due today #noMentalMath

Recommendation

Our sticky header shows customer their savings, as well as a breakdown of monthly and upfront cost.

Design intent

-A feature that is always visible to show savings, what's due monthly and today. Phones cost a lot at ~$1,400, so cost breakdowns that are visible are very important.

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

Designs

Screenshots: N/A
Sketch file: N/A
InVision links: Please request from team.

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: No
Willing to develop solution: No
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? (include url)
Which teams/applications do you think would use this improvement? Mobility, Home solutions (maybe), My TELUS (maybe RPC)
High impact: Yes

varunj90 commented 5 years ago

@Berjesty / Brian M can you bring this to DPA next Monday? I've added this as an agenda item. Given nature of tallboy (NDA), please consult with your team about how to bring this into a discussion with DPA.

marshjr commented 5 years ago

The "sticky" bar has not yet been designed or really thought out yet and will be the focus of the next sprint (starting tomorrow). Happy to contribute to this ticket once we have some concrete foundations set out.

varunj90 commented 5 years ago

any updates here @marshjr @Berjesty ?

Berjesty commented 5 years ago

I believe design for sticky bar is finalized. @marshjr or Stubrown can confirm.

marshjr commented 5 years ago

Quick update (finally). I think the "final" purple bar is complete! Attaching the most recent version here.

Prototype https://telus.invisionapp.com/d/main#/console/16248824/379670269/preview

theetrain commented 4 years ago

Stu will follow up with updated designs for the purple bar.

varunj90 commented 4 years ago

hey @stu-brown any updates on the purple bar designs?

Stu-Brown commented 4 years ago

Hey @varunj90 I've got the updated and finalized purple bar synced to the invision now. There are 6 screens total, two for each breakpoint. When the user scrolls down and the purple bar anchors to the top of the users screen the cart icon animates into the purple bar. If they scroll back to the top the icon will disappear, returning the purple bar to the default state.

The first screen for each breakpoint shows the purple bar in it's starting position at the top of the page, and the second screen shows it further down the flow with the cart icon present.

Here's the link: https://telus.invisionapp.com/d/main#/console/16248824/399760778/preview

The difference from the link that Brian had uploaded previously was the "discounts applied" dropdown beneath the purple bar. This was removed when Thiveya and Catherine reworked the summary section and changed the way we highlight discounts.

Stu-Brown commented 4 years ago

Hey @varunj90 I was incorrect about the discount dropdown being removed at this time so I've updated the invision to reflect that. There are now additional screens showing the dropdown expanded and collapsed in all three breakpoints.

Stu-Brown commented 4 years ago

DPA discussion: next steps for @Stu-Brown

Build out padding using TDS
[Gary] opportunity to play around shadowing on purple bar/ tabbing and how it fits with other elements
[Gary] small view, condense purple slightly
Opportunity to user test in future
Fabio can join bigger discussion

[To-do] @Stu-Brown to take these updates to CX office hours, and we can then proceed with story writing.

Christina-Lo commented 4 years ago

Summary Bar Being used throughout My TELUS, Mobility, Home Solutions

Align on 1 consistent colour for the bar + drawer tab
All to be situated at the bottom
Drawer container can have anything within as long as
- It’s not a complex interaction
- Re: expand collapse notes
Need to align + test whether or not the tabs with a description(hide/expand) is enough or do we need the close button as well
Determine if it auto-closes on scroll
On mobile with drawer, a close button or link should also appears before the sticky summary bar so users can easily close it without scrolling all the way up again
Price lock ups can be centered
- My TELUS example doesn’t need to align with billing items
- Copy needs to be aligned throughout

Additionally @Stu-Brown will take the lead on this while working with @twirlingsky to see how HS can utilize the same summary bar

Can't seem to tag @lynne in this ticket

related to this closed ticket https://github.com/telus/tds-community/issues/272

lynnepeacock commented 4 years ago

@Christina-Lo not sure how to tag myself here!

I can't tag a number of our designers in other tickets too, not sure why!

varunj90 commented 4 years ago

@Christina-Lo not sure how to tag myself here!

I can't tag a number of our designers in other tickets too, not sure why!

@lynnepeacock and other folks: Please use this document to add yourself into the TELUS Github Org: https://docs.google.com/document/d/1NWqesRnJ4H2MrWxj2hI3k8NIjQYLqkusT0hs4EAu-is/edit

telus / tds-community