KDS — Layout Options Feature

KDS — Layout Options Feature

1. Background

  • Current KDS displays all orders in a single horizontal card flow.

  • Kitchens use different hardware setups (EPOS tablets, wall-mounted displays, countertop screens).

  • A fixed layout forces staff to adapt, increasing visual scanning time, cognitive load, and errors, especially during peak hours.

2. Objective

Introduce a Layout Options setting so each device can choose the most suitable layout.
The selected layout applies to both Open and Completed screens, and persists across reloads.

3. User Value

  • Faster and easier order recognition.

  • Layout that adapts to different screen sizes and mounting positions.

  • Reduced missed items and smoother workflow during rush hours.

4. Proposed Layouts (MVP)

1. Horizontal (Default)

  • Cards flow left-to-right, wrapping to next row.

  • Larger card area for details.

  • Ideal for wall displays or large EPOS devices.

2. Vertical List

  • Single-column, full-width stacked cards.

  • Best for narrow tablets or chefs who prefer list-style scanning.

3. Compact Grid

  • Smaller cards arranged in 2+ columns.

  • High-density view for very busy kitchens needing maximum visibility.

5. UX Specifications

Settings

  • Location: Settings modal (device-level).

  • Control Type: Radio buttons with small preview thumbnails.

  • Persistence: Save selection in local device storage.

  • Apply Behavior: Update layout immediately—no reload required.

Visual Feedback

  • Show a short toast message: “Layout updated — {Layout Name}”.

Accessibility

  • Layout change must not remove keyboard focus.

  • Maintain ARIA live regions for real-time movement of orders.

6. Acceptance Criteria

  • User can select one of the three layouts in Settings.

  • Selected layout updates both Open & Completed screens instantly.

  • Layout persists across reloads and device restarts.

  • All existing features work in every layout (item tap, recall, new-item highlight).

  • Preview icons/text available in Settings.

  • No data loss or disruption to queued actions during layout change.

7. Success Metrics

  • Reduced time to locate orders (measured in pilot sites).

  • Improved staff satisfaction on visibility and scanning speed.

  • No rise in missed items or sync errors after rollout.

8. Rollout Plan

  1. Internal QA across screen sizes (tablet, wall display, desktop).

  2. Pilot in 2–3 high-volume kitchens for 2 weeks.

  3. Refine based on feedback; explore advanced layouts (e.g., priority-based grouping).

  4. Roll out widely; optionally add store-level default in Admin Console.

9. Engineering Notes

  • Apply layout using a single parent CSS class:

    • .layout-horizontal

    • .layout-vertical

    • .layout-grid

  • Persist selection in localStorage or device configuration.

  • Track layout usage via telemetry.

  • Layout change should only affect presentation layer—avoid unnecessary re-rendering or server requests.

  • Test keyboard navigation and screen reader compatibility.

10. Open Questions

  • Should admin be able to set a default layout per store? (Recommended: Yes, future phase.)

  • Should layout be per-user or per-device? (Recommended: Per-device for kitchen shared hardware.)

 

Comments

Post a Comment

Popular posts from this blog

KDS Offline Mode

Image
KDS Offline Mode MockUp :  Click to view the mockup Summary Problem: KDS devices (tablets/EPOS) in kitchens often lose network connectivity. When offline, chefs must still mark items as done. If actions fail or are lost, orders get stuck, causing delays and operational errors. Goal: Introduce a robust Offline Mode allowing chefs to continue working without connectivity, while the device safely queues actions and automatically syncs when online. Ensure clarity, data safety, and a smooth workflow. Why This Matters High availability: Kitchens must operate even with intermittent network failures. Business impact: Prevents delays and missed items; reduces friction between chefs and runners. Operational safety: Maintains order integrity and customer experience during outages. Key Behaviors (User-Facing) Offline Indicator: Prominent, persistent “Offline” banner when the device loses connectivity. Local Queueing: Actions like item taps, mark-all, re...
Read more

Elevating Chef Efficiency Through Improved Tappable Item Indicators.

Image
Elevating Chef Efficiency Through Improved Tappable Item Indicators. Making Interactive Items Obvious for Faster Chef Workflow Mockup   Click to view the mockup Problem In the KDS Open Tab, chefs must tap each food item to mark it as cooked. Once all items are tapped, the order automatically moves to Completed. However, chefs do not tap items because they look like plain text. There is no icon, feedback, or hint indicating that the items are interactive. Result: Orders stay in Open even after cooking Runners repeatedly ask for order status Delayed dispatch & cold food Poor quality standard for completing a task. visibility and operational confusion Root Cause No visual affordance (checkbox, icon, hover/touch effect) UI resembles static receipt text No onboarding tip explaining item tapping Misleading reliance on the main “DONE” button User Pain Points “I didn’t know I have to tap items.” “It looks like plain text.” “Why didn’...
Read more

Edited Order Highlighting & Configurable New-Item Duration.

Image
Edited Order Highlighting & Configurable New-Item Duration. Mockup :   click to view mockup Summary Problem: Orders already in the Completed tab can be modified (new items added). Staff often miss these new additions because completed cards look final and controls are hidden. This leads to missed items, dispatch delays, and poor customer experience. Proposal: When a new item is appended to a Completed order, highlight it with a light-orange background + “NEW” label for a configurable duration . A new Settings control will allow users to set this duration (in seconds). This ensures discoverability without forcing orders back to Open. Why This Matters Completed orders visually appear “finished,” so newly injected items are ignored by the kitchen team. Highlighting new items increases visibility, reduces errors, speeds up response time, and improves overall throughput and customer satisfaction. Target Scenarios Standard Flow: Chef marks all items; car...
Read more