UX for allowing different details for each item on an order page

Question

I’m designing a food ordering application to be used within my company wherein co-workers can order food from our in-house catering service for meetings and what not. Today, this is done via paper forms that get filled out and sent to the food service manager. You need to fill out one form per order, so if you want some snacks for your 3:00, you fill out a form. If you want breakfast, lunch and afternoon coffee for an all day meeting, you’d need to fill out 3 forms (or just pick up the phone and call, which is what a lot of people end up doing).

As an online application, they want people to be able to peruse the menu for all categories (breakfast, lunch, beverages, and snacks), select the options they want, fill out a form with pertinent details (user info + event information) and submit.

I’m approaching this as a quasi shopping cart experience wherein users choose a quantity and “Add to Cart” for an item, then go to the Cart screen where they see their order and fill in the details form.

My question lies in how to design a system that allows the user to order for multiple days and/or times from one Cart screen. Today, these would be 3 separate forms. But if I have one Cart screen that lists the items ordered, followed by user and event information, the assumption is that all items should be delivered on the same day/time.

But how could I make it obvious to the user and to the food service manager that one item in the order might be, for example, for 10:00am in room 330, while another item is for 2:30pm in room 440?

Or, is this not a good user experience? Perhaps the user should only be able to complete one “order” for their 10:00 meeting, then has to create a separate order for their 2:30. Perhaps with some sort of history/profile section where they can see all they’ve ordered?

Thanks!

Answer 1

I think the best design solution to this is thinking of the use cases. A typical 'shopping cart' involves 'one order' with everything centering around the one order.

In your use case, it doesn't make sense to have one overall shopping cart, so you need to group things in some manner. It sounds like the best way to group things would be based on location and time.

Therefore, an idea would be at the start for the user to create new order, and then specify a date/time/location for that order and attach their items to it. If they want to request items for a different day/time, you could provide them the option to add a new order within the same cart experience.

Basically it just changes the way you present the cart. Rather than 'Add to Cart' you'd be adding to an order.

It seems you've started exploring this idea in your mockup, my suggestion would be that you create the 'Order' before adding items. That way you can attach relevant info (date/time/location) before the user starts adding items and forgets which is which.

Also, in that second screen you've got, it looks complicated as all the options are exposed. Where it says 'Selection One' you could name the date and location here (or let the user choose a custom order name) with a link to easily change the details - that way you don't have to expose so many options, and it removes a lot of clutter from the screen.

Regarding your last question, I think creating multiple orders in one cart is fine, but it should be very clear. In the summary of the order screen, I'd present the two orders (or more) as distinct from each other, and really highlight the date and time at the top for each order, with a clear option to change.

This is clearly only one suggestion. I think your idea works, just need to clear up the interface a bit and think about what the priority is - which I imagine (but needs tested!) is that they want to make absolutely sure the time and location is correct for their order ie. they order 20 coffees for the meeting with 20 people, rather than the meeting with 2!