I have group of products that a user would want to batch checkout to different addresses.

Step 1: User selects the products they want from a tabular list and clicks on checkout enter image description here

Step 2: Next, a modal loads up from where the user selects the addresses that they want the product to be delivered to from a tabular list.

enter image description here

My question is, how do I now represent the final checkout screen where they can view all their products and destination choices and finalize the checkout? Representing all this data on a modal using the following solution to me looks very congested. The usual use case is that multiple products will be delivered to 2-3 addresses. Can this flow be made more simpler? I feel like I'm overthinking a simple workflow.Thanks!

enter image description here

  • Why don't you make an array with the products as rows, addresses as columns and this "- 1 +" widget? Make sure that "0" is a valid number of items (instead of "remove"). For improved visibility you can grey-out the widget if it is "0" and increase the colour intensity as the number of items increases.
    – Mike
    May 3, 2019 at 8:24
  • why does it have to be in a modal?
    – Mike M
    May 3, 2019 at 17:17
  • what would you allow them to do in this screen? Besides removing and adding quantity, would they be able to swap an item in one address batch to another?
    – Mike M
    May 3, 2019 at 17:24

2 Answers 2


If possible, use a full page for the final summary review. Allow them to correct destinations.

I'm probably leaving out some details, but since you have multiple items across multiple shipments, give them a full, scrollable page, with an order summary, and if need be, allow them to swap items or change destinations.

Since this is such a high stakes decision page, make sure everything is clear. Your boxes for the items and addresses seems logical, but you can allow them to correct at this point, like you are already doing by allowing removal and quantity changes.

enter image description here

Changing destinations at the item level

If they realize they need to send elsewhere, one option is to allow them to change all items in a shipment, or move items to a different address:

enter image description here


My answer is assuming all you want is an overview and a button for yes/no. You should add inline editing options similar to what you have in your mockups, but the core of your question is about layout of a page of data, not about small scale items.

Do all adresses get the same amount of each item? If so, just say "an order of 1X 1Y 2Z will be sent to address A address B ... address E". That saves a lot of repetetive info.

Do all addresses get mostly the same items but one or two changes? You might opt for listing the default and the exceptions. "an order of 1X and 1Y will be sent to address A B C D and E, but address B and E will also receive 2Z". If implemented well, a default order combined with modifications can save a lot of time when entering the order, too.

Do you have a limited amount of item variations? Make 3~5 columns, have an address on each row and amounts in each column. Optionally leave 0's blank and highlight non-standard numbers.

Adress     potato     carrot     onion
Place A     1          1          1
Place B     1                    *3*
Place C     1          1          1
Place D    *2*         1          1
Place E    *5*        *6*         1

This way you can have a lot of adresses in little space. If you have a lot of items but few adresses, flip the axes around.

You can of course combine the strategies above. E.g. ABCEFGHK get 1,1,1, D and I get 2,2,3. J gets 4,2,6.

If you have many items AND many amounts AND locations, the best way is to have a scrollable table where the first column and the first row are fixed so you can always see the product name and the adress for each cell coordinate.

And of course it's a decent idea to have an even simpler recap before the table. "You're ordering 15X, 15Y, 26Z over 15 adresses". Woops no I need 2 for adress F, not 20.

First give them the shortest amount of info. If that's not obviously wrong give them more details. If it still checks out, they can move on.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.