Email in Flex - Agent experience

[nicedisguise]

The specific questions I have are...

• The agent UI has been designed on the UDL and uses several Paste components. I would like the team to review the screens and point out anything that is potentially off.
• We would like the team's thoughts on the end-to end flow of email and to feed back of the UX and patters used.

Background: Email as a Flex channel is going to be released to private beta in August. It will be built on the new guidelines for the UI (UDL and Paste).
Stage of design: Exploration
Research: ongoing
Links to mockups or prototype:
Scenario 1 - Inbound Email
Scenario 2 - Outbound Email
Scenario 3 - Email threading

[TheSisb]

Hi @nicedisguise,

Thanks for sharing these mockups. We'll chat about it internally in preparation for the office hours. Do you have any areas in particular you would like us to focus on? We want to make sure we cover the most important bits in our 20minute slot.

Thanks

[nicedisguise]

Generally, I'd like to take the time to go over the Agent UI and gather your thoughts as to the application of the UDL theme into Flex. In addition, the focus is on the email flows that we are currently testing with users, would be great to get feedback on some of the components used and some of the Flex-specific variants

[TheSisb]

Hi @nicedisguise,

I had a chance to chat with the team some more about the accessibility of the outbound email customer directory screen. First, what you have now is totally fine; since the Select button is more of a visual cue, and you can click on the entire row, then there's no concern. However if a future designer were to add a second button to the row, then it wouldn't be fine for accessibility. We brainstormed some future-safe alternatives, taking into consideration Modals were not a path forward for you.

The first idea is to treat the directory list similar to items in the combobox in terms of keyboard nav and highlight color:

Then, we wondered if the whole experience could be made into a combobox, because there was already a question about if the Tab wrapper was necessary at all. You can already have the second combobox below it for selecting a channel, or you can show it upon selecting a user as progressive disclosure. This may allow you to simplify the flow into a single page.

We stopped there because we don't have more context on the product, but ultimately came away with the feeling that the directory seemed a lot like a combobox :)

Hope this helps.

[nkrantz]

Link to Office Hours recording can be found here: https://www.loom.com/share/5febc29a470541c1ab0e153257085262 (pw is in #help-design-system slack)