PASTE migration Trust Hub: Modals, Combox Primitive and Command Bar

[ConsuelodeIruarrizaga]

Hi everyone! How are you?
I am doing a Heuristic analysis of some screens for the Trust Hub team that is migrating everything to PASTE. So, I want to be aligned with you in whatever I suggest to them. The problem is that they are using some "interactions," which I wouldn't recommend. But for this effort, I can't redesign flows or interactions; I am just doing a Heuristic Analysis and suggesting changes based on PASTE, organization of the page, hierarchy, etc. So, I need to figure out the best worse options to recommend to them.

Questions with controversy - Modals: I know we shouldn't use modals when we have a lot of information, interaction, scroll, etc. But in this design, we have them, so I need to figure out how to make them work the best way possible and follow similar interactions we currently have in Console. I spent some time reviewing different projects, and I saw two interactions for modals with tables: pagination and scroll so:

• Should we establish a minimum of rows before having pagination (even if that means having a scroll). In my humble opinion, it looks so weird/unusable when we have two or 1 one row and then pagination

• Could we change a table for a Combox primitive (see image below) if the team is migrating everything to PASTE (Zen Console)?. This could work for phone numbers and address tables and would solve our pagination problem.

Questions without controversy:

• Command bar: In some screens, I have a command bar, but I am not sure if I should use the one from Console or create one with PASTE - since my team is migrating everything to PASTE (That is the end goal). See the image below.

Links to Figma
Stage of design: Final review with the PASTE team before I deliver

Thank you!!!

[serifluous]

I spent some time reviewing different projects, and I saw two interactions for modals with tables: pagination and scroll so...Should we establish a minimum of rows before having pagination (even if that means having a scroll). In my humble opinion, it looks so weird/unusable when we have two or 1 one row and then pagination

I agree—if there's a possibility the Table might have many row items, it would feel pretty cumbersome for a customer to have to page through one row at a time to look through the data.

One thing that could at least help with the height of the modal is reducing the content that shows up at the top of the modal. Is there opportunity to:

1. Reduce the number of alerts to make it clearer what the most important information is? The alert that says "You can select and assign up to 50 numbers at a time..." feels like it could work as well as a paragraph, or paired with just an icon instead of an entire alert. The alerts on the "Physical Business Address" modal feel like they can be limited to 1 alert, with the information in the other one staying as a paragraph.
2. Move the "3rd party EIN..." information to another part of this flow? It seems like this information is relevant mainly when you're adding a new address. Is it possible to have it show up only when a customer is in an "Add a new address" flow?

Since you're limited to the existing layout in a Modal, you'll have to account for the Modal having to scroll regardless since there's the possibility that a customer uses a short browser window, has their text enlarged, etc. With that in mind, you can follow the guidance given here about how many rows to show: https://paste.twilio.design/components/pagination#determining-how-many-items-to-show-per-page which ultimately recommends using research & customer insight to help you determine what's needed.

Could we change a table for a Combox primitive (see image below) if the team is migrating everything to PASTE (Zen Console)?. This could work for phone numbers and address tables and would solve our pagination problem.

Yes! I think this is a great solution if your team can put in the effort to make the change.

If you need to put in every piece of information that currently shows up in some of those Tables, that might be a bit challenging to fit in. But if there's opportunity to reduce some of that info, I think that Combobox is a great alternative.

We currently have a Multi-select combobox under development. Here's the spec if you want a preview of how you might use the component: https://docs.google.com/document/d/14BaGDkfoYddL8vFOQ-fH06AXicR7wu3PZNblW1U8ITs/edit#heading=h.gwj72pv8f47o

Command bar: In some screens, I have a command bar, but I am not sure if I should use the one from Console or create one with PASTE - since my team is migrating everything to PASTE (That is the end goal). See the image below.

You can take a look at some of these past discussions for issues in using the command bar and possible alternatives: #691 and #2266.

For the CNAM screens, it's not quite clear what the primary action customers are being encouraged to do since there are 2 primary actions on the page. Also, what does the "Assign phone numbers" button do vs. checking one of the row items? Does a customer check the row items, and then click the "Assign phone numbers" button—if so, how do they know which phone numbers have been assigned? How do customers know what information they're saving or submitting for review?

For the business profile page, is there a risk in putting the "Submit" button at the bottom of the page? Does it need to be sticky?

^ Happy to discuss these questions during office hours to help give you a few more options for what to do with the actions in the command bar!

[loreina]

Hi @ConsuelodeIruarrizaga,

Thanks for coming to office hours! You can find the recording link posted in #help-design-system on Slack. Let us know if you have any other questions. Have a nice weekend!