Ümameats

Diner landing design

Who this is for

Product, growth, and marketing partners shipping the diner-facing UmaMeats experience — especially the www.umameats.com homepage and social creatives that show the customer app on a phone.

This page captures the landing redesign (Curist-style phone-forward hero), the four full-page mockups, and the UX rules we locked so brand and conversion stay consistent.

Live site: www.umameats.com
Marketing home: umameats-marketing.vercel.app

1. What we shipped

SurfaceOutcome
Diner marketing homepagePhone-forward App Store landing (green hero + real app screens)
Primary CTAApp Store + Google Play badges (waitlist /join secondary only)
BrandMarketing green #6ea356 (brand-400) — do not invent a new palette
WordmarkÜmameats as hero-level brand signal
Codeumameats-landing-saas → DinerLandingPage.tsx

Page spine (shipped)

  1. Nav + Download
  2. Green hero + phone (home screen) + store badges
  3. Three feature beats (DineSafe · honest prices · membership)
  4. Benefits split (tracking phone + checklist)
  5. How it works
  6. Screenshot strip (restaurant / home / cart)
  7. Featured stores carousel
  8. FAQ
  9. Green download footer

2. Landing mockups (full canvas)

Four POV mockups generated from customer app screens + reference layouts. Primary direction shipped: mockup 01 (Curist hero). Use 02–04 for alternate creatives and mid-page inspiration.

01 — Curist-style hero (shipped spine)

Full brand-green hero, copy left, large phone right, App Store / Play badges.

Ümameats landing mockup 01 — Curist-style green hero with phone

02 — Kidslox-style split

Diagonal / split green field, tilted phone, stats row.

Ümameats landing mockup 02 — split green hero with tilted phone

03 — GOFU-style phone explosion

White canvas, centered phone + floating UI cards (home / restaurant / cart).

Ümameats landing mockup 03 — phone with floating UI cards

04 — Benefits split

Tracking map phone left, diner benefits checklist right.

Ümameats landing mockup 04 — tracking benefits section

Source files (repo): UmaMeats/docs/design-mockups/landing/
Phone art source of truth: UmaMeats/docs/design-mockups/customer/ — best hero set: home · restaurant · cart · tracking.

3. Design playbook (reuse this)

Process

  1. Generate 4 POV mockups first (hero / split / phone-explosion / benefits).
  2. Pick a spine (default: Curist-style).
  3. Implement on the diner homepage only — leave merchant /restaurants alone unless asked.
  4. Deploy production.

Composition rules that worked

  • Brand first — wordmark hero-level, not a nav-only label.
  • One job in the first viewport — brand, one headline, one short line, store badges, one dominant phone.
  • Real product phones in a CSS device frame (tilt + float) — not stock illustrations.
  • Download-first CTAs — wire NEXT_PUBLIC_IOS_APP_URL / NEXT_PUBLIC_ANDROID_APP_URL (fallback #download until live).
  • Motion budget — phone float + feature fade-in + reduced-motion respect. Stop there.

Differentiators to keep in copy

  • Toronto DineSafe filter
  • Same prices as in-store (no markup story)
  • Membership ~$2.99/mo for real free delivery
  • Restaurants and groceries
  • Live driver tracking

Inspiration refs (adapt angles; keep UmaMeats colors)

Curist (green hero + phone) · Kidslox (diagonal split + tilt) · GOFU (white canvas + floating cards) · clean CRM modular cards.

4. App UX companion notes (from the same sprint)

Mobile diner + driver apps also got navigation/keyboard hardening — useful when shooting app walkthroughs for social:

  • One header only — Expo native stack headers off; custom ScreenHeader / floating chevron only (no double bars).
  • Back on every pushed stack screen — tab roots stay without a chevron (correct mobile UX).
  • Keyboard = responsive — layout reflows with the pad; iOS Done on phone-pad / number-pad; tap/drag dismiss so users are never stuck.

Repos: umameats-customer-mobile / umameats-driver-mobile (FormKeyboardScreen, KeyboardDismissArea, KeyboardDoneAccessory).

5. Social creative tips from these mockups

AssetBest use
01 Curist heroFeed / LinkedIn / website screenshot · “Download UmaMeats”
02 Split + statsStories / Reels cover frame · Toronto launch
03 Phone explosionCarousel slide · feature depth
04 Tracking benefitsReels B-roll end card · “track to your door”

Always show real UI from the customer mockups folder when promising the product. Burn in: neighbourhood / Toronto + App Store CTA.

6. Checklist before the next landing tweak

  • Keep brand-400 / amber accents — no new palette experiments on production
  • Primary CTA remains store badges; waitlist only secondary
  • Phone art from docs/design-mockups/customer/ (home / restaurant / cart / tracking)
  • EN + FR strings for any new marketing copy on the landing SaaS
  • Set live iOS / Android URLs in Vercel when store listings are public
  • Export mockup frames for IG/TikTok before inventing new layouts

Related