Orders Screen UX Redesign — Master/Detail Layout Proposals

[khaira777]

The current Orders screen works, but it starts to feel crowded when several orders are visible at once.

Each order card shows a lot of information and actions, so active orders, completed orders, totals, customer details, print history, and controls all compete for attention.

I explored a different direction based on a master/detail layout.

Core idea

• Left side: compact order list for fast scanning
• Right side: full details for the selected order
• Keep key information visible in the list:
  • Order number
  • Customer or table
  • Order type
  • Age
  • Payment/status
  • Total
• Move detailed information into the selected order panel:
  • Items
  • Modifiers
  • Notes
  • Customer details
  • Print history
  • Totals
  • Order actions
• Keep one clear primary action for the selected order
• Reduce the visual weight of completed orders compared with orders that still need attention

Design variations

I made four visual variations based on the current FloCafe design.

They all use the same master/detail concept, but differ in layout and density.

1. Balanced List + Detail Panel

A simple split layout with a compact order list on the left and a large detail panel on the right.

Focus:

• Clean hierarchy
• Easy scanning
• Familiar layout
• Good balance between density and readability

2. Dense Operations-Focused Layout

A more compact version where the order list works closer to a table.

Focus:

• Fast scanning
• More orders visible at once
• Strong alignment between order details
• Better suited for busy locations

3. Touch-Friendly Layout

Larger order rows, larger controls, and more spacing.

Focus:

• Touchscreen use
• Larger targets
• Less chance of hitting the wrong action
• Easier use from a counter or mounted POS screen

4. Grouped Workflow Layout

Orders are grouped by state, such as:

• Active Orders
• Needs Payment
• Recent Completed

Focus:

• Show what needs attention first
• Reduce the importance of completed orders
• Make the screen feel more like an operational queue

Mockups

I will attach all four mockups below for comparison.

Feedback / decisions

Before implementation, I think we should agree on a few things:

• Do we want to move away from the current multi-card grid?
• Which of these four directions fits FloCafe best?
• Should completed orders remain on the same screen or move into a separate history view?
• Should the left pane use:
  • Simple rows
  • Grouped rows
  • Table-style rows
• Which actions should always remain visible?
• Which actions should move under a More menu?
• Should we optimize the screen more for:
  • Touch
  • Mouse/keyboard
  • Both
• Is there any current Orders screen behavior we need to preserve?

Scope

This issue is for design discussion only.

I do not plan to start changing the Orders screen until we agree on the general UX direction.

[khaira777]

@itsbkm @carvalab thoughts?

[kamit13]

I am looking for this update as soon as possible and there is one more thing needs to be take care is that everyday order screen shoud be reset to 0 order and it shouold start with new order everyday and it should show that day order only. Because currentlly it shows all the order and that is not good impact by the manager or cashier

[itsbkm]

There are multiple ways we could handle this:

• Add a Day Close feature, after which everything resets.
• Show only live orders from the last 6 hours, which would flush out orders from the previous day.
• Once orders are marked as delivered on the KDS, automatically remove them from here after 30 minutes.

We should discuss which approach everyone thinks is best and proceed with that option.