Mobile App (iOS & Android) — 375px viewport
The app diners download and use when dining out. 508 compliant throughout.
Flows 1 – 4
5 screens — First-time user registration, identity verification, and payment setup
PeyePeye branding, animated pulsing rings, "GET STARTED" CTA
Specs: Animated logo with pulsing ring effect, gradient navy-to-dark background, full-screen splash.
Enter phone number, receive SMS code, verify
Specs: Phone input with country code, 6-digit code input with auto-advance, resend timer, progress indicator.
Carrier-based identity check (name, phone contract)
Specs: Animated checklist showing verification steps, progress bar, shield icon, three checks: Phone number verified, Carrier records checked, Identity confirmed.
Add credit/debit card (Stripe or Finix tokenization)
Specs: Visual card preview with real-time formatting, card number/expiry/CVC inputs, Stripe + Finix processor logos, secure badge.
"PeyePeye Verified" badge, ready to dine
Specs: Green checkmark animation, "PEYEPEYE VERIFIED" badge, user info summary, card on file display, "START DINING" CTA.
5 screens — Finding restaurants, viewing details, and checking in via QR code
Map + list of PeyePeye-enabled restaurants nearby
Specs: Search bar, restaurant cards with photos/ratings/cuisine/distance, bottom tab bar (Explore/Orders/Profile).
Restaurant info, menu preview, hours, photos
Specs: Hero image, star rating, cuisine tags, hours, menu preview items, "CHECK IN WITH QR" primary CTA.
Scan table QR code to link to table
Specs: Camera viewfinder with pink corner brackets, animated scanning line, torch toggle, instruction text, manual entry fallback.
Confirm temporary hold amount, card on file
Specs: Hold amount display ($150), Visa card on file, 3 explanation bullets (temporary hold, only charged for actual tab, auto-refund), Confirm button.
Dashboard showing venue, table, who's at your table
Specs: Restaurant name + table number header, avatars for table guests (YOU, Mike, Sarah, +), session timer, quick action buttons (View Menu, Voice Order, View Tab).
3 screens — Full menu exploration with allergen and dietary preference filtering
Full menu with categories, search, photos, prices
Specs: Category tabs (Popular, Starters, Mains, Desserts, Drinks), persistent filter bar, item cards with photo/name/price/allergen badges (GF, VG, V, DF), search functionality.
Toggle filters for allergens and dietary preferences
Specs: Allergen toggles (red): Gluten-Free, Dairy-Free, Nut-Free, Shellfish-Free, Soy-Free, Egg-Free. Diet toggles (green): Vegetarian, Vegan, Pescatarian, Keto, Halal, Kosher. Clear all button, apply button with count.
Menu with active filters applied
Specs: Active filter chips at top, "Showing X of Y items" indicator, matching items with green diet badges, non-matching items grayed out, clear filters option.
5 screens — Item details, customization, cart review, and order tracking
Item photo, description, price, allergen tags, modifiers
Specs: Item photo, description, price, allergen/diet badges, modifier groups (radio for size, checkbox for add-ons, toggles for removal), allergy warnings in red, quantity selector, "ADD TO CART" CTA.
Step-by-step builder for complex items
Specs: Progress dots (Base → Protein → Toppings → Sauce), selectable cards for each option, step navigation, special instructions free-text field.
Review all items with customizations
Specs: Itemized cart with customizations visible, edit/remove per item, special instructions textarea, subtotal display, "SEND TO KITCHEN" CTA.
Sent to kitchen confirmation
Specs: Green checkmark, order number (#1247), estimated time (15-20 min), item summary, "VIEW STATUS" and "ORDER MORE" buttons.
Live status tracking
Specs: Vertical timeline: Received (checked) → Preparing (checked) → Ready Soon (pulsing) → Served, estimated time remaining, item list.
4 screens — Complete hands-free ordering flow for accessibility
Technology Note: Speech recognition via Google Cloud Speech-to-Text (85+ languages) or Web Speech API (browser-native, zero cost for MVP). Text-to-speech reads menu descriptions aloud. Full screen-reader compatibility (ARIA labels, focus management, semantic HTML).
Floating accessibility mic button
Specs: 56x56px floating button in bottom-right, mic icon, navy overlay when active, ARIA labels.
Full-screen voice interface
Specs: Full-screen navy overlay, pulsing ring animation, 5-bar sound wave visualization, live transcription with cursor, "Tap to stop" instruction.
Voice question with spoken response
Specs: User speech bubble with question, PeyePeye TTS response with menu items listed, "Add" buttons next to each item, speaker icon for TTS, ARIA labels throughout.
Parsed voice order confirmation
Specs: Parsed order displayed as cards, TTS speaking indicator, "CONFIRM & SEND" button, edit individual items, ARIA roles (role="status", aria-live="polite").
7 screens — Active tab management, bill splitting, tipping, payment, and receipts
Running total of everything ordered
Specs: Itemized list with quantities and prices, subtotal, tax (8%), running total, "PAY TAB" CTA.
Choose split method
Specs: Three option cards with radio selection: Split Evenly (equal portions), Split by Item (assign items), Custom Amounts (manual). Each with icon and description. aria-pressed state.
Assign items to people
Specs: Color-coded person badges, drag/tap to assign items, shared item split indicator, per-person running totals, "CONTINUE" button.
Per-person amount display
Specs: SVG pie chart showing equal divisions, per-person amount in center ("$21.60 each"), list of people with their share, tip-inclusive calculation.
Choose tip percentage
Specs: 4-column grid: 15%, 18%, 20%, 25% with dollar amounts, custom input option, computed final total, pre-selected 20% default.
Final confirmation before charging
Specs: Lock icon for security, summary card (subtotal, tip, tax, total), card to charge (Visa ending 4242), Stripe/Finix processor badge, "CONFIRM PAYMENT" button.
Itemized receipt with rating prompt
Specs: Green checkmark header, receipt card with dashed borders, itemized breakdown (items, tax, tip, total), 5-star rating prompt, share/download buttons, "DONE" CTA.
WCAG 2.1 AA compliance requirements applied throughout the Diner App
Full ARIA labeling, semantic HTML, logical focus order. All interactive elements announce state changes.
Complete hands-free ordering flow (Section 5). Speech-to-text and text-to-speech for full menu interaction.
Adjustable contrast settings, minimum 4.5:1 color contrast ratio for all text and interactive elements.
Minimum 44x44px tap areas for all interactive elements. Adequate spacing between adjacent targets.
Dynamic type support up to 200% zoom. Layouts remain usable and content accessible at all zoom levels.
prefers-reduced-motion support. All animations disabled when user has reduced motion enabled in system settings.
Full tab-order for external keyboards. Visible focus indicators on all interactive elements.
All images and icons have descriptive alt text. Decorative images marked with aria-hidden="true".
What is included and excluded from the Diner App MVP
29 screens across 7 flows. Mobile iOS & Android.
You are hereRestaurant-side tablet and management app.
View scope →Admin dashboard, APIs, and infrastructure.
View scope →