I'm currently working on creating UX for online food ordering service and I'm stuck at one point.

The service provides 2 kinds of order processing: the user can order food for delivery or for pickup (this depends on restaurants abilities).

The question is how to combine these two flows (delivery and pickup) or it would be better not to mix them at all and consider the processing type 'order-wide'?

The processing type is set on checkout page, and if there are some items, that are not available for the selected processing type, they will be either dropped from the order (with notification) of moved to the separate (new) order, which can be placed after the current one is finished.

Update: Here is what I came up with: enter image description here

So this is the case, the user adds two items with different fulfillment options selected. What do You think? Is clear enough?


You may want to look at this site again and perhaps make a minor change that could make all the difference. Instead of prompting them during the checkout for whether or not the want delivery or pick-up ask them at the beginning of the ordering process. When they navigate to start ordering have the site ask whether they would want it delivered or they pick-up. This would enable you to filter out the products that they could choose from due to availability rather than the user making a large grocery list only to find out that some of the products selected can't be delivered or picked-up which in turn makes them frustrated and they have to re-make their list or leave your site all together. Just an idea, hope it helps.

  • I got this, but the meal details page can be reached from different entry points with no pre-set fulfillment type, so I thought allowing to set this later, on checkout stage, but now, I consider to put it on a meal level. – Myro May 9 '14 at 13:11
  • @Myro looks like the site came out really well and overall clear. Goodjob – Nick_M May 13 '14 at 17:00

Technically this is more a type of fulfillment for the customer which entails specific system side processing. You'll get higher conversion by providing an item level choice of fulfillment rather than an order level method of fulfillment. With the requisite fulfillment options or specifications determined in the checkout flow. This means you will have varying levels of checkout steps depending on the order.

If that is not possible then you should message which items are available for what type of fulfillment, my assumption is there are delivery only, pickup only and mixed fulfillment options (delivery and pickup) available for some product. When the user makes a selection send the remainder to a saved for later area.

  • Yes! That make sense, I'll try to allow the user to choose the fulfillment option on the meal level, not the order one. – Myro May 9 '14 at 13:08
  • @myro: If you are going to allow fulfillment options at the meal level, you may also want to consider delivery addresses at the meal level to cater for large(r) organisations with multiple buildings or meeting rooms. For the latter you may not need a full delivery address, a note would suffice. Of course, before implementing, check whether there is a real need for it. I just thought of it because if you might want to pick up some and have others delivered, you are probably ordering for other people and destination might differ as well. – Marjan Venema May 10 '14 at 11:35
  • Thanks, Marjan! That's the way, I would consider after the main functionality will be great. – Myro May 12 '14 at 17:53

Having done a few of these the standard approach is to split the flow at the pick up / delivery point. You can use various techniques like progressive display if you're doing things on one page but essentially it's simpler to just show what the user wants.

If there are standard delivery options for all items its normal to dispatch all those items together to keep the checkout simple.

Having said that it is possible to have a screen that provides different options then the user steps through each of the different 'batches' - effectively doing the pickup then the delivery process. It's messy but unavoidable if you have multiple items in a basket that have different delivery options.

It does depend partly on your audience. If you're dealing with customers who have large complex orders of technical items then more options are useful. If it's a general audience simple is often best.


Here my two cents:

  • I think that the horizontal alignment of the elements on the page is good. The items summaries are registered and scannable
  • Vertical alignment and logical grouping of the information is ambiguous mostly because of proximity.
  • I think that the break line used to separate the elements on the page does not break down the page into the relative steps. Ex: The pickup step seems to contain the whole order summary

Suggestion: - reorder each step as a modules having the same wireframe structure. - gives enough space between steps so that they will be perceived sequential, separate objects.

Ex: Food delivery service wireframe

I hope you'll find this useful :)

  • Thanks for pointing out the issue with proximity, I agree adding more space will bring more structure to layout. Also flipping the 'summary' and 'form sections' is a good idea, because of LTR reading for target audience. Thanks again, appreciate this. – Myro May 13 '14 at 6:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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