Need help with restaurant menu customization ui and ux
for the app that I'm working on, a restaurant owner/manager has the option to customize their menu. The flow is that:
- The system suggests a list of items that can be served by a restaurant. This list will be large (say ~1000), so will be searchable. The manager can only pick as many items from this list.
- Each item of this list has: Name, Category, Tags and Image.
- When the manager clicks on one of these items, they need to enter some additional info about the item - like, Price, Discounts, and ServingHours(one or many); before the item gets added to their menu.
- Ideally the manager should be able to view their current menu as they update (add/remove items) it.
My Current Approach:
The UI that I've in mind is: having two sections side-by-side - the left one, for restaurant's current menu; and the left one to show list of available items. The right section has a saerch bar on top, and the items are shown as cards. On clicking an item from the right section, the manager is presented with a popup with a form to enter additional fields, after which they can click on a SAVE button to close the popup and add this item to their menu.
Problem:
The user has to scroll quite a bit on the right side, and the flow does not seem very fluent which in turn makes the experience feel tedious and unpleasant, especially when it needs to be repeated for more than a few times.
Any suggestions in UI/UX to make this experience smoother and pleasant ?
PS: This ui is for a web app to be used on a desktop and large screens, which means a typical desktop sized screen space is available.
Thanks.
Edit: Added a hand-drawn mockup for reference of current approach.