Treatment for list items, specifically call queues

[robyn-bautista]

Background

MVP solution for disaster recovery and business continuity for customers relying on Twilio Flex. Need a lightweight solution for agents to continue to accepting support calls and service customers when Flex is down.

Feedback

Visual design - what is the best component to use for list? There are technical constraints we're working with for MVP in how the experience was designed which I can speak to (example, a limit of 9 queues, we need to show all queues, CTAs on each queue item), but hoping for general UI feedback - specifically on what component to use for the list of queues.

Stage of design

Prototyping - scheduling customers in a week or so for feedback

Research

No response

Relevant links

Prototype we will use for testing: https://www.figma.com/proto/VxO8p4st0KuIS0OZtxUZ8r/BCM-Designs?page-id=11%3A23855&type=design&node-id=276-259265&viewport=757%2C696%2C0.2&t=rBMt8AtGWUWa7p28-1&scaling=min-zoom&starting-point-node-id=276%3A259265&mode=design

Agent designs: https://www.figma.com/file/VxO8p4st0KuIS0OZtxUZ8r/BCM-Designs?type=design&node-id=276%3A279490&mode=design&t=8xVoWmEOyHri3qnB-1

List explorations: https://www.figma.com/file/VxO8p4st0KuIS0OZtxUZ8r/BCM-Designs?type=design&node-id=303%3A306091&mode=design&t=8xVoWmEOyHri3qnB-1

Are you looking for visual design support?

• Yes

Additional Information

No response

[SiTaggart]

Hi @robyn-bautista

Two questions to think about before your Office Hours visit later today:

1. How many actions are there potentially going to be per row? Right now, it's just one. The number of actions per row will inform the type of component used because of user interaction and accessibility.

2. Why wouldn't you reflect or reuse the same visual treatment as the existing task list? It seems like it performs the same interaction, just for a different list / object type.

[serifluous]

Thanks for coming to office hours! Here's the link to the recording https://twilio.zoom.us/rec/share/3teOI_Le1bUKBVDuBnyXhXGEg06pCJ1TCd05SYTqUktOsHRcrvFdjpxsk9tcvF-c.h-Y-1EHjWO_aJtU3

You can find the password in our slack channel.

[robyn-bautista]

Thank you both! One thing I forgot to ask about was the actual card component - it seems like it is customizable as far as padding, etc. Ryan initially built out the prototype using that component is why I ask if we could leverage it to style smaller (it's a bit too chunky for our use case as is)

[serifluous]

Yep, Card takes any spacing token for padding: https://paste.twilio.design/components/card#card-with-title-body-and-button