Changes to Color Page based on Research

[poofichu]

Proposed changes based on color exploration research:

1 - Remove the neutral white background recommendation. This is forcing designers to use the 60 color values due to accessibility reasons which makes the designs look "muddy" and not "playful", "innovative" or "fresh"

2 - Remove the Orange-50 primary color recommendation. The consensus is that the orange is too close to red which feels like an error.

[britanyponvelle]

I agree with removing the Neutral white background color. It has been difficult to incorporate the lighter colors since the Neutral throws off the accessibility scale.

I have been unable to truly make the Orange 50 my primary because of how strong of an visual impact it makes; so far I've been using the orange as a secondary. Based on your research, are you proposing to remove it from the recommended palette completely? Or move it to an accent?

[jeribowers]

I also agree with the previous comments:

• Remove the non-white background requirement because it forces designers to work with the color60 and higher. I think it’s useful to keep in the guidelines though regarding it’s benefits on reducing contrast, etc.
• Remove the orange50 from the primary palette. For enterprise software that deals with healthcare, finance, etc. it just doesn’t work.

Recommendations:

• Allow designers to use any of the grayscale palette or neutrals. Give guidelines that they should use the neutral gray with the neutral white, cool grays with cool whites, etc. I don’t think that’s been explicitly stated anywhere.
• I don’t think consumer products should be restricted to the “Watson Color Palette”. The audience and intent is very different.
• It might be useful to have alert color recommendations (color for error, alert, notification, etc.).
• Also, I think some people feel restricted with the color palette and that it limits them. I don't think it necessarily needs to. Maybe including more examples of variations would help and reinforce how it can be flexible.

[nquintero]

I agree with most of what has been stated. I think it is ultimately up to the product/visual designer to make certain calls. However, we could set certain guidelines. Such as:

• Avoid using both cool and warm grays
• Use color in a meaningful way, titles or labels don't need more emphasis besides their type treatment.
• Rely on more than color to communicate interactive elements (Ex: underline, bold, button frame, etc)

[poofichu]

@britanyponvelle Good point with the orange-50. Let's change the proposal to move it to the secondary palette.

@jeribowers @nquintero both great sets of recommendations. Going to keep those in the parking lot for future updates for sure.

[poofichu]

@joshkimmell @Snugug @bobbinrobyn thoughts?

[heatherco]

Teal 60 and Blue 60 are too similar when used together. There is not enough visual distinction between the two unless a lot of space is given between them.

Orange 50 has a strong visual impact. When used in conjunction with black/greys, it starts looking like Halloween. To alleviate the issue, you are forced to use Teal 40/60. The saturation for Teal 40 doesn’t quite complement the other colors.

Suggestions:
Including color suggestion for alert messages, which can also be used for Watson’s confidence rating.

Flexibility to use all grey values while staying within their proper tone.

State that if an alternative color is better for the UI, it can be used as long as it stays within the IBM Design color palette.

State weather tints or shades of a hue can be used or not (I’ve been told no, but it would be nice to see it written somewhere)

Separate color palettes for consumer and enterprise. Maybe they are slightly or vastly different. As Jeri mentioned, the audience and intent are different. Take Chef Watson for example where color and appetite for food matters. Blue is an appetite suppressant, while red/green/yellow entice you to eat.

[amswindell]

I agree with everything that has been mentioned. If the desired direction is to have two primary colors with accents (this is based off of the current guide instructions) the dark blue and green will never work together due to how close in tone they are. Are you still going to recommend the "pick two main, and one accent" recommendation? I had heard at the beginning that it was just a recommendation, but the language was written in a way that was more in line with a mandate. Only asking questions to the team did I understand the intention.

Bringing back in the additional warm and cool grey palettes from the IBM DL to have more neutral palette choices would be beneficial. But as Nick said, they shouldn't be mixed.

[Snugug]

I like moving Orange to a secondary color, and agree that we should have recommendations for warning/error/success/info colors would be good as it's something we've gotten a bunch of requests for. I think we should come up with a different primary color, but in the interest of making Watson products appear to be part of the same family, we shouldn't be allowing any colors. I agree dropping the greyscale requirements, and instead provide guidance on how to use greys/neutrals. I still believe we should keep the requirement not to use pure black, but dropping the white requirement.

We also need to remind everyone that tints/shades (mix with black/white) aren't how the IBM Design palette works and you need to walk up and down the color palette instead of tints and shades.

[bobbinrobyn]

Thanks everyone for all the feedback! In addition to moving forward with @poofichu's original points, what I'm hearing is that we can be clearer about our recommendations for:

• bringing in additional colors from the IBM Design Language as needed (but with discretion) – this includes all the grays and all of the other colors. All along, we've intended for those to be available for use! We're just recommending that Watson products heavily feature this one particular subset of primary and accent colors. This also negates the consumer/enterprise issue by making it clear that all of the colors can be used.
• using color AND additional visual elements or interactions to shape the look and feel of the product
• using teal and blue together (or not), given how visually similar they are