Badge color options

[jweintraub]

Hi Design Systems Team!
Priyanka and I are working on updates to the account switcher (Home) page and account switcher menu in masthead. We are using badges to signify if the item is a Main account, Subaccount, or Org (Orgs tags will be rare). We will also have a badge for the count of new invitations.

What is most important is to differentiate between Main accounts and subaccounts. The current subaccount color is yellow in the masthead so it would make sense to use a yellow badge for subaccounts to match the current masthead subaccount color. Any thoughts on adding more custom colors to the component or creating a custom badge for this purpose?

See "Badge Colors"
https://www.figma.com/file/loFzjH0QGGEpVuZsWIah8S/2021-Q2-Console-IAM-Experience-Explorations?node-id=4387%3A108990

cc: @pgupta@twilio.com

[SiTaggart]

Hi @jweintraub

I have some clarifying questions:

1. When the account badges are used in lists (Switcher Menu, Accounts overview and Invitations) are the words 'Acct', 'Sub' and 'Org' always used / present? i.e. if I removed the color, is the word the way I can tell each type of item apart?

If so, great. We're not using color alone to indicate the different between a type of "thing"

2. Further to that color alone point, when the account badge is used in the masthead, is that badge only ever a sub account? Is it ever an Account or Org (blue or red)?

3. For Accounts, Sub Accounts and Orgs is it feasible to say these are constant representations of those types of entities? i.e. would it be reasonable to say that as a rule (or pattern, we're taking contributions 😉) folks should always associate those colors with those types of entities across Twilio products? Similar in the way we treat "new" as being purple, from a design token perspective. If that is the case it's much easier to introduce new semantically name design tokens for these situations, even if they use the same color palette as something else in the system, it allows us to have a hook to be able to change how "an account" or "an org" is represented through out the system. As an extra point I'm a little cautious about using warning and error badge colors for org and sub account only for the potential of causing confusing recognition when using other parts of the product. What if there is a situation where you legitimately have a warning state badge to display and are in a sub account?

4. For the count badge we are treating that as a separate variant of Badge which is on the roadmap, unimaginative called the "counter variant". Again, super open to a Stage 1 contribution of that variant too. ("stage 1" is slightly less involved, than a full component)

[jweintraub]

Hi Simon,
Thanks for the quick response and great questions:

1. Yes, the words "Acct", "Sub", and "Org" describe the type of entity. The Color helps with add'l scanability. We will likely use these badges in any place that combines different entity types so that users can easily see which is which. We may conditionally hide the badges for more simple use cases. For example, a user who doesn't use subaccounts at all doesn't necessarily need to see "Acct" next to each account name in the list.

2. We currently only use the yellow bg on the subaccount name in the masthead. This was based on the need of users to aware that they're viewing a subaccount and understand which subaccount they're in. >1% of all main accounts have subaccounts, but those that do use 1000's of them to represent their end customers. We don't use any color bg on the main account name in the masthead bc a main account is the default account type that most users see. And we don't show the org badge here as of yet. I am still working on if/how to indicate the org that your account belongs to. Since 99% of users will only have main accounts that are part of 1 org or no org at all, the indicator shouldn't take up too much real estate. Whatever changes we make in context of the masthead, we will not use color alone as an indicator. To your point about color as an indicator, I wouldn't necessarily be opposed to using "Sub: subaccount name" in the masthead badge rather than just "subaccount name", although I'm not sure there is really any confusion about what it is representing today.

3. As mentioned above, the badges are likely to be used in the 3 contexts shown bc those are places where we have a mixture of accounts and subaccounts in a list. Regarding the pattern, I'm happy to consider contributing it. I'm not aware of anywhere else outside of Twilio Home, Masthead, and Admin Center that would utilize it, but I like the idea of using tokens for this in the badge.

4. Got it - do you have a color in mind yet for the counter badge? Or are you looking for that decision as a contribution?

[kate-porter]

Hey @jweintraub! I'm taking over for Simon on helper duty this week. Thanks for the super thoughtful dialog that's happened around this already.

1. That's great! If the text will always be paired with the color, then this is a perfectly accessible approach. Love it.
2. That makes sense to me, thanks for the additional context here. I do agree with Simon that using red for the Org should probably be avoided if possible, especially if that might appear in the Masthead at some point in the future, because it does look a little error-y and might give users the impression that there's an account-level error if they see a red badge in the Masthead.
3. I would love to see this as a pattern, and I think it makes sense to represent these colors as new tokens, too (especially since we already have tokens for the Subaccount "badge" in the masthead). I've shared this with the team to get their thoughts on adding the new tokens, but I like the idea. I believe we'd also then need to add new variants to the Badge component to support this, which would be a blocker for you all in using Badge. What type of timeline are you working on here?
4. It feels to me like the color of the counter badge is something that could benefit from some light user testing (as part of a larger research project, probably) to ensure it has the right hierarchy to draw attention but doesn't cause the user any undue stress (which I would worry about with the red color in particular—I like how much it helps the count jump out in the UI, but it may be interpreted as an error). No strong recommendations from us at this point, I just worry about using red without some user testing first.

[jweintraub]

Thanks Katie! Really appreciate the responses. Priyanka did some initial testing on the red but it was slightly less prominent looking bc it was prior to these badges existing. I will look at doing some more in my next round since this could become a pattern. As far as timeline goes, we are looking at starting front end development late Q4.

[kate-porter]

Hey Jo, just wanted to let you know we did not forget about this, I just need to get an open question out to the team about how we want to approach allowing the Badge component to support this use case. I will circle back soon!

[jweintraub]

Sounds great! Thanks for keeping me updated.

[kate-porter]

Hey @jweintraub! Thanks for your patience on this one. This discussion opened up quite a can of worms on our team about the Badge component in general 😂 I won't bore you with those details, but we did ultimately decide that these three badges are worth adding as distinct variants to the Badge component, since they are used for such an overarching use case across Console where we will want to drive consistency.

So, to make that happen, we'll need to finalize the text and background color tokens for the following:

• color-background-org
• color-text-org
• color-background-account
• color-text-account
• color-text-subaccount (we already have a background color token for subaccount)

If you and Priyanka could propose what aliases you'd like to use for those new tokens, we can then get them added to Paste. What you've got for Account and Subaccount look great, but we'd recommend something other than red (or orange) for Org, so we can avoid using error or warning colors.

Once we get those new tokens added to Paste, we will add org, account, and subaccount variants to the Badge component.

How's this all sound to you?

[kelseycavitt]

Hi @jweintraub, taking over for helper duty this week, but wanted to follow back up with you here on this topic. How did @katieporter's answer land with you? Would you and Priyanka be able to help select the alias colors to be used for these new tokens? Let us know if you need any help! Thanks!

[johannaweintraub]

Yes, that sounds great! Thanks so much for your help on this.

[kelseycavitt]

Awesome @johannaweintraub! Just let me know if you need help and if you can, please post those colors here so we know what to use!

[gloriliale]

Hi @jweintraub! Wanted to check in and see if there were any updates on selecting the aliases for the new proposed tokens. Let us know if there's anywhere we could assist as well!

[jweintraub]

Hi! I'm planning my usability testing for the week after TG - hope to have final colors in mid-dec. Johanna Weintraub Staff, Product Designer [image: twilio] <http://www.twilio.com/?utm_source=email_signature>

…

On Mon, Nov 15, 2021 at 11:45 AM gloriliale ***@***.***> wrote: Hi @jweintraub <https://urldefense.com/v3/__https://github.com/jweintraub__;!!NCc8flgU!J98emxgbZd29x3AE_LzMr2JlfqxrLVg6hTY1UV8slWJvxgds14AlF6boiWu_417NCg$>! Wanted to check in and see if there were any updates on selecting the aliases for the new proposed tokens. Let us know if there's anywhere we could assist as well! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/1934*discussioncomment-1646835__;Iw!!NCc8flgU!J98emxgbZd29x3AE_LzMr2JlfqxrLVg6hTY1UV8slWJvxgds14AlF6boiWv8yZYLpQ$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ADJ7OE7HZF2J52YVQBU3KODUMFPMVANCNFSM5FYTTSBA__;!!NCc8flgU!J98emxgbZd29x3AE_LzMr2JlfqxrLVg6hTY1UV8slWJvxgds14AlF6boiWuSCAKE7w$> . Triage notifications on the go with GitHub Mobile for iOS <https://urldefense.com/v3/__https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675__;!!NCc8flgU!J98emxgbZd29x3AE_LzMr2JlfqxrLVg6hTY1UV8slWJvxgds14AlF6boiWuPksQSug$> or Android <https://urldefense.com/v3/__https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign*3Dnotification-email*26utm_medium*3Demail*26utm_source*3Dgithub__;JSUlJSU!!NCc8flgU!J98emxgbZd29x3AE_LzMr2JlfqxrLVg6hTY1UV8slWJvxgds14AlF6boiWtsqBeMgA$>.

[serifluous]

These badges can use the decorative variants in Paste for now: https://paste.twilio.design/components/badge#decorative

Closing due to lack of activity.