Add new avatar colours

[QiiFeng]

EIP needs to add the background color of the avatar to differentiate between customer and agent and keep colour consistent on the same page even across the whole product.

As is:

We have been using two colours to indicate agent and customer in the transcript. In the call detail, we use the avatar with the purple background color to show customer and agent.

In the new design, we'd like to keep the color consistent and reduce confusion for users. It seems currently the background color of the avatar in Paste is not modifiable.

[gloriliale]

Hi @QiiFeng, thanks for the question! The team is discussing possible solutions, we'll get back to you soon!

[kelseycavitt]

Hi @QiiFeng,

First, we recommend a color change to the Agent and Customer conversation labels to use our existing Twilio background-color tokens: $color-background-strong (agent) and $color-background-brand (customer). The color can be as light suggested here as there is always a label next to it (for a11y). Also, these colors are currently what is used in Flex to differentiate between an agent and a customer. We would like to create alignment with their labeling across features/experiences if we can.


With this color change, there would not be a need for adding new color tokens that would be used with the Avatar component. We recommend not using the Avatar component for your needs, as we think a circular color label could suffice to represent the agent and customer in the UI.

As we discussed in a call, we also recommend outlining the different states of the Agent and Customer, whether their names or images appear. Is the intention to better personalize and differentiate between agents and agents and customers and customers?

Thanks Qi!

[QiiFeng]

Hi @kelseycavitt, thanks for letting us know the way Flex is using to differentiate between an agent and a customer.

For EIP, consider when the image of the participant is provided by customers, we'll show the image on the avatar, otherwise we have the name of the participants to display. In this case, there is no big meaning for us to use different colors for agents and customers. Also, consider there is always a label next to the color bar in the transcript.

So we'd like to use the same way as Flex to differentiate agents and customers, but we'd like to keep using avatars but without changing the defaulted color at this stage.

Thanks ^^

[kelseycavitt]

Hi @QiiFeng,
This sounds like a plan! If you have more questions, please reach out to us.