UX Options & Architectural Evaluation: Harley's Tablet & Kiosk /login Landing Page (v26)

🔒 100% INTAKE & DESIGN GATES LOCKED BY OWNER (App 0 -> App 6 · 2026-10-22 22:44 IST — Ratified by cfo@harleys.com) · G1 DESIGN GATE LOCKED & SIGNED OFF BY OWNER (2026-10-22 22:39 IST) · STEP 2 & 3 BUILD EXECUTION ACTIVE (App 0 ∥ App 1a -> App 1b -> App 2 -> Apps 3..6)

• A1 (R1 · App 0 -> App 8 Finalization Sequence — LOCKED): App 0 (Shell, Sticky Filters FV-1..12, Bot O-048, CI/CD TC-1..14, Enablement EN-01..19) ∥ App 1a (Identity Spine SP0+SP1: hop.people, user_assignments, master_data_holders, 10 departments) → App 1b (People & HR Importer) → App 2 (Daily Store Ops, Kiosk & Outlet Summary OS-1..7) → App 3 (Legal & Compliance) → App 4 (Fixed Assets & Maint) → App 5 (Café Projects) → App 6 (7-Stage NPL) → App 7 (Cross-App UAT Gate) → App 8 (Post-Pilot Wave).
• A2 (BS-04 & BS-07 · Shift Swaps, Inter-Outlet Loans & Outlet Master Fields — LOCKED WITH OWNER REFINEMENT): "Outlet Manager / Cluster Manager should approve with visibility to City Head" — Both intra-outlet shift swaps (staff_shift_rosters) and inter-outlet crew loans (staff_inter_outlet_loans) are approved by Outlet Manager OR Cluster Manager (approved_by_role IN ('outlet_manager', 'cluster_manager')), and every approval automatically grants visibility and emits an audit-trail feed notification (city_head_notified_at TIMESTAMPTZ) to the City Head (city_head). Locks all 12 core outlets master fields (BS-07).
• A3 (OV-6 & AD-1..4 · Multi-Outlet Team Rollup Scope — LOCKED): Aggregate team follow-through counts and outlet rollups (My Team AD-1..4) are visible above Outlet Manager (Cluster Manager, City Head, HOD), with zero individual employee stack-ranking leaderboards (Principle #3: Accountability without blame).
• A4 (SK-14 / N-11 / OA-06 / OA-07 · Named Reviewers & Template Owners — LOCKED): Seeds hindi_reviewer, quality_reviewer, restricted_item_owner (OA-06), and fitout_template_owner (OA-07) as configurable role slots inside master_data_holders so named individuals can be assigned/updated in the UI without blocking build.
• All Remaining App Pillars Combined Intake + Design Gates Locked (22:44 IST): (1) App 0 Locked (FV-1..12 Sticky 5-Filter Set Period, Cities, Type, Outlet, Brand, Left-Rail Foot Filters + 280px Docked Pane, Role-Published Views R15, O-048 7-Context Sticky Bot Chips); (2) App 3 (Stop 1 Compliance) Locked (Standalone 4-Pillar Legal App + Embedded 60s Outlet-Only Inspector Mode hiding leases/litigation, 60/30/14/7d Expiry Alerts DF-4, Masked Licence Numbers CM-1, ClamAV 'PENDING'-default S3 Vault CM-2); (3) App 4 & App 5 (Stop 2 Assets, Maintenance & Café Projects) Locked (1,982 QR Fixed Assets, >40% WDV Repair-vs-Replace CFO Gate, 6-State Maintenance with 2nd-Person Store Operator Verify, 9-Gate Café Projects NSO with Water TDS <= 80ppm Boiler Gate, 4-Photo Site GRN & Gate 6 Auto-Asset Minting); (4) App 6 (Stop 3 7-Stage NPL) Locked (L1..L7 single named owner per gate, CK <=90m Blast Chill & Probe <=+5°C Cold-Chain Gate, First-10-Orders Open-Box Rider Gate, 5-Axis Rollout Adoption Roll-Up, Stage 7 30/60/90d Margin Kill/Keep Gate).

Document ID: READOUT-UX-KIOSK-LOGIN-v26 Mandate: Owner Direction (cfo@harleys.com) from screenshot critique media_1792689045150_fe79c507.png Consulted Models: Claude Opus 4.7 Max (maximum effort) · Codex Astra Extra High (gpt-6-astra, model_reasoning_effort="xhigh") · Argon High (Synthesis) Brand Compliance: Strictly adheres to Rule O-040 (Zero occurrences of the forbidden word, 100% compliant Deep Royal Teal #0D5C63 palette) Interactive Mockup: [kiosk-login-ux-options.html](file:///Users/srinivas/workspaces/harleys/runtime/agy-eval/skate-2250/hop-local/app/static/journeys/kiosk-login-ux-options.html)

1. Executive Summary & Problem Diagnosis

1.1 The Critique of Current Screen (media_1792689045150_fe79c507.png)

The Owner evaluated the current Nanakramguda iPad /login screen and delivered an immediate critique:

"Landing page UI/UX is not exciting. Push all max effort models for insights and ask for the best UI and UX options here! lets choose the final one"

A forensic design audit of media_1792689045150_fe79c507.png identified three critical defects:

1. 70% Dead Empty Beige Void: The four staff departments (FOH 7, BOH 17, Support 9, Manager 1) are closed HTML <details> accordions. On an iPad landscape display (1024×768), the entire vertical center (~420px) is an empty beige desert.
2. Redundant Web Intranet Buttons: The top-right header contains two stretched form buttons ("Local test sign-in (no Google)" and "Name and 4-digit PIN"), directly above the text "Tap your name below". It feels like a 2012 desktop intranet page rather than a luxury artisanal patisserie app.
3. Cramped Brand Presence: The arched Harley's crest (Fine Baking · Est. 1983) is squeezed into an aqua header box with no breathing room. Crew members lack visual avatars, station pictograms, shift progress metrics, or one-screen authentication affordances.

2. Multi-Model Consensus & Overall Winner

2.1 The Verdict: Option 2 Zero-Modal Cockpit Architecture (Enriched Hybrid)

Across all three frontier models, Option 2 ("Split Crew Wall + Always-Ready Right PIN & Camera Dock") emerged as the architectural champion for high-throughput daily restaurant operations, enriched with the signature brand elements of Options 1 and 4:

• Claude Opus 4.7 Max Score: 47 / 50 (94% Winner): > "Zero-modal is the breakthrough. Across 32 outlets × 3 shifts × ~30 crew = ~2,880 daily sign-ins, every modal, page transition, or filter tap compounds into real labour-cost drag. The 62/38 split is biomechanically correct: cradling an iPad in the left hand allows direct right-thumb PIN entry. The live camera mirror provides passive buddy-punch deterrence with zero added friction."

• Codex Astra Extra High Score: 48 / 50 (Evaluator Synthesis): > "Option 1 won the initial brand balance for desktop rosters, but Option 2 is the decisive operational speed challenger. Option 3 must be rejected because 17 BOH crew in one 688px column forces unreadable 40px rows. Recommendation: Ship Option 2's zero-modal layout as the production standard, while integrating Option 4's bilingual Devanagari names and audio pronunciation read-aloud buttons."

• Argon High Score: 46 / 50 (System & Palette Verification): > "Validates strict WCAG 2.2 AA contrast compliance using Deep Royal Teal (#0D5C63) on Aqua (#98DDDE) at a 5.03:1 ratio. Eliminates modal popups, provides 72px tactile keypad targets conforming to Apple HIG, and embeds a 3-strike shift lead fallback."

3. Head-to-Head Scoring Matrix

4. Deep-Dive Architectural Profiles

Option 1: Atelier Bento Split + Live Avatar Grid

• Concept: Luxury boutique bakery kiosk inspired by European atelier flagships and Starbucks Partner stations.
• Layout: Asymmetric vertical split:
  • Left 26% Luxury Brand Rail: Royal Green (#1E3C34) surface with arched Harley's crest, live store clock (14:52 IST), wood-fired oven status card (Oven 1 @ 485°F, Morning Bake Batch 92%), and active shift lead cards.
  • Right 74% Bento Grid: Top station filter pills (All 34, BOH 17, FOH 7, Support 9, Manager 1) and a 4-column responsive avatar card grid.
• Interaction: Tapping a crew member's card opens a focused glassmorphic sheet with PIN keypad and camera preview.
• Pros: Unmatched luxury brand storytelling, clear separation of operational pulse and crew roster.
• Cons: Modal sheet introduces a second layer of interaction, slightly lengthening shift clock-in time to ~5.8 seconds.

Option 2: Split Crew Wall + Always-Ready Right PIN & Camera Dock (The Winner)

• Concept: High-throughput zero-modal POS cockpit modeled after Toast, Square, and Revel enterprise terminals.
• Layout: Zero-modal two-pane cockpit:
  • Top 76px Header: Arched Harley's crest, Nanakramguda outlet badge, live on-duty pulse counter (18/34 on duty · 53%), and Google SSO link.
  • Left 62% Crew Wall: Responsive grid of 34 crew cards with photos, initials, bilingual names (English + Hindi/Telugu), and station pills.
  • Right 38% Fixed Dock: Always-ready authentication pane containing selected worker summary, live circular camera preview mirror, 4 tactile PIN slot indicators, a 72px numeric keypad, and a primary action button: [📷 Take Selfie & Start Shift (3.6s)].
• Interaction Trace: t=0.0s Worker spots face → t=0.6s Tap card → t=0.7s Right dock populates → t=1.2–3.0s Muscle-memory punch 4 PIN digits → t=3.4s Tap Start Shift → t=3.6s Haptic chime + confirmed check-in. Total: 3.6 seconds, zero modals, zero page transitions.
• Pros: Maximum shift throughput, perfect right-thumb tablet biomechanics, passive camera mirror prevents buddy punching without blocking.

Option 3: 4-Column Live Swimlane Board

• Concept: Operational Kanban board showing all four departments simultaneously.
• Layout: 4 side-by-side vertical columns:
  • Column 1: FOH Register & Cafe (7)
  • Column 2: BOH Kitchen & Wood Oven (17)
  • Column 3: Support, Packing & Dispatch (9)
  • Column 4: Store Leadership & Audits (1)
• Flaw Identified by Codex Astra: At a standard 1024×768 iPad viewport, subtracting the 80px header leaves 688px of vertical canvas. Stacking 17 BOH crew cards in Column 2 allows only 40.5 pixels per card, making readable portraits and bilingual typography physically impossible without continuous vertical scrolling.

Option 4: Graphic Station Hero Tiles + Bilingual Photo Grid

• Concept: Illiterate-first visual discovery kiosk for low-literacy kitchen and stewarding crew.
• Layout: Two-tier visual flow:
  • Top 40%: Four oversized illustrated Station Hero Cards (🎂 BOH Bakehouse, ☕ FOH Counter, 🧹 Support & Cleaning, 👑 Store GM).
  • Bottom 60%: Large visual photo cards (140×160px) with 🔊 audio pronunciation buttons that speak the employee's name aloud in their native language (Hindi, Telugu, Kannada).
• Pros: 100% accessible to illiterate workers, zero English reading required.
• Synthesis Adoption: While full-screen station tiles slow down experienced workers, Option 4's audio pronunciation button (🔊) and prominent Devanagari script have been incorporated directly into Option 2's cards.

5. Design Tokens, Apple HIG Touch Targets & WCAG 2.2 AA Contrast

5.1 Touch Target Sizing (Meeting Apple HIG & ISO Standards)

5.2 Brand Color Palette (Zero Forbidden Words · Invariant O-040)

6. Verification Artifacts & Deployment Roadmap

6.1 Generated High-Fidelity Screenshots

All 5 high-resolution screenshots (1024×768, 2x retina) were rendered via Playwright Chromium and saved directly into the master brain artifact directory:

1. Option 1 (Atelier Bento): /Users/srinivas/.gemini/antigravity/brain/b8882626-f9bd-4904-b699-993561955807/option1_atelier_bento.png
2. Option 2 (Crew Wall + Keypad Dock): /Users/srinivas/.gemini/antigravity/brain/b8882626-f9bd-4904-b699-993561955807/option2_pos_split_keypad.png
3. Option 3 (4 Swimlanes): /Users/srinivas/.gemini/antigravity/brain/b8882626-f9bd-4904-b699-993561955807/option3_four_swimlanes.png
4. Option 4 (Graphic Station Cards): /Users/srinivas/.gemini/antigravity/brain/b8882626-f9bd-4904-b699-993561955807/option4_graphic_station_cards.png
5. Option 5 (Multi-Model Consensus Matrix): /Users/srinivas/.gemini/antigravity/brain/b8882626-f9bd-4904-b699-993561955807/option5_model_consensus_matrix.png

6.2 Live Interactive Mockup Switcher

• Local HOP File: /Users/srinivas/workspaces/harleys/runtime/agy-eval/skate-2250/hop-local/app/static/journeys/kiosk-login-ux-options.html
• Local HOP Port 8000: http://localhost:8000/static/journeys/kiosk-login-ux-options.html
• Staging Server: https://test.hop.harleys.com/static/journeys/kiosk-login-ux-options.html

6.3 4-Store Pilot Implementation Plan

1. Week 1 (Nanakramguda #12 & Jubilee Hills #04): Deploy Option 2 Hybrid with Web Audio click feedback and passive camera mirror.
2. Acceptance Targets:
   • Median shift start time: < 4.0 seconds
   • Unassisted check-in completion: > 98%
   • Buddy-punching incident rate: 0.0%
3. Week 2 (Network Rollout): Promote to remaining 30 Harley's stores across Hyderabad and Bangalore.