<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Roboto:wght@400;500;700;900&display=swap'><style> #case-standard-hero{display:none!important} .rhx-root{-webkit-font-smoothing:antialiased;text-align:left} .rhx-root h1,.rhx-root h2,.rhx-root h3,.rhx-root h4,.rhx-root p,.rhx-root ul,.rhx-root li,.rhx-root figure,.rhx-root table{margin:0;font-family:inherit;letter-spacing:normal;text-transform:none} .rhx-root ul{padding-left:18px} .rhx-root p,.rhx-root li{line-height:inherit} .rhx-root a{text-decoration:inherit} .rhx-root section{display:block;width:auto} .rhx-root button{font-family:inherit;margin:0} .rhx-root img{border:0;height:auto} .rhx-root .rhx-stage img,.rhx-root .rhx-shot img,.rhx-root .rhx-cover .rhx-ph img,.rhx-root .rhx-frame .rhx-hd img{height:100%} .rhx-root .rhx-content img,.rhx-root .rhx-layer>img,.rhx-root .rhx-sheet img,.rhx-root .rhx-hours img,.rhx-root .rhx-navbar,.rhx-root .rhx-sticky{height:auto} .rhx-root{color-scheme: light;--page:#f5f5f5; --ink:#131417; --ink-2:#5b5e66; --rule:#dcdcde; --panel:#ffffff;--f-site:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;--bot-800:#0D3337; --bot-900:#041e21; --bot-700:#1B4C51; --bot-50:#E2ECEE; --bot-100:#93ACAF;--bm-500:#EB4700; --bm-600:#D44000; --green-100:#C6F6D5; --gray-600:#4A5568; --white:#ffffff;--f-app:'Roboto', system-ui, sans-serif;--gentle:cubic-bezier(.33,1.2,.5,1);} .rhx-root,.rhx-root *{box-sizing:border-box} .rhx-root{background:var(--page);color:var(--ink);font-family:var(--f-site);font-size:16px;line-height:1.55;margin:0} .rhx-root .rhx-wrap{max-width:1240px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))} .rhx-root a{color:inherit} .rhx-root h1,.rhx-root h2,.rhx-root h3,.rhx-root h4{font-weight:400;text-wrap:balance;margin:0} .rhx-root p{margin:0} .rhx-root .rhx-small{font-size:12px;color:var(--ink-2)} .rhx-root img{display:block;max-width:100%} .rhx-root .rhx-panel{border-radius:28px;overflow:hidden;position:relative} .rhx-root .rhx-caption{font-size:13px;color:var(--ink-2);margin-top:12px} .rhx-root .rhx-cover{background:var(--bot-800);padding-block:clamp(28px,5vw,64px);padding-inline:clamp(16px,4vw,48px);display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,3vw,36px)} .rhx-root .rhx-cover .rhx-ph{width:clamp(110px,22vw,260px);border-radius:clamp(14px,2.4vw,30px);overflow:hidden;box-shadow:0 40px 60px -30px rgba(0,0,0,.6);background:var(--white);aspect-ratio:375/812} .rhx-root .rhx-cover .rhx-ph img{width:100%;height:100%;object-fit:cover;object-position:top} .rhx-root .rhx-cover .rhx-ph.rhx-mid{width:clamp(130px,26vw,300px)} .rhx-root .rhx-cover .rhx-ph.rhx-side{opacity:.92;transform:translateY(-18px)} .rhx-root .rhx-kicker-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px;font-size:16px} .rhx-root .rhx-kicker-row b{font-weight:500} .rhx-root .rhx-intro{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,6vw,96px);padding-block:56px 40px} .rhx-root .rhx-intro h1{font-size:clamp(32px,4.6vw,56px);line-height:1.05;letter-spacing:-0.02em} .rhx-root .rhx-meta-row{border-bottom:1px solid var(--rule);padding-block:14px 16px} .rhx-root .rhx-meta-row:first-child{padding-top:0} .rhx-root .rhx-meta-row p:last-child{font-size:20px;margin-top:6px} .rhx-root .rhx-lede{font-size:clamp(18px,2vw,22px);line-height:1.5;max-width:46ch} @media (max-width:820px){.rhx-root .rhx-intro{grid-template-columns:1fr}} .rhx-root section{padding-block:56px} .rhx-root .rhx-sec-head{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,6vw,96px);margin-bottom:36px} .rhx-root .rhx-sec-head h2{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-0.01em} .rhx-root .rhx-sec-head .rhx-body{display:grid;gap:14px;font-size:17px;max-width:62ch;min-width:0} .rhx-root .rhx-sec-label{font-size:12px;color:var(--ink-2);margin-bottom:10px;letter-spacing:.04em} @media (max-width:820px){.rhx-root .rhx-sec-head{grid-template-columns:1fr}} .rhx-root .rhx-card{background:var(--panel);border-radius:24px;padding:clamp(18px,3vw,32px);min-width:0} .rhx-root .rhx-ba{display:grid;grid-template-columns:1fr 1fr;gap:16px} .rhx-root .rhx-ba .rhx-card{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:24px;align-items:start} .rhx-root .rhx-shot{border-radius:22px;overflow:hidden;border:1px solid #e6e6e6;background:var(--white);aspect-ratio:375/812} .rhx-root .rhx-shot img{width:100%;height:100%;object-fit:cover;object-position:top} .rhx-root .rhx-ba h3{font-size:20px;margin-bottom:10px} .rhx-root .rhx-ba ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--ink-2);font-size:15px} .rhx-root .rhx-tag{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:#ececec;margin-bottom:12px} .rhx-root .rhx-tag.rhx-new{background:var(--bot-800);color:var(--white)} @media (max-width:1000px){.rhx-root .rhx-ba{grid-template-columns:1fr}} @media (max-width:520px){.rhx-root .rhx-ba .rhx-card{grid-template-columns:1fr} .rhx-root .rhx-ba .rhx-shot{max-width:240px}} .rhx-root .rhx-logic{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .rhx-root .rhx-logic .rhx-card{display:grid;gap:10px;align-content:start} .rhx-root .rhx-logic .rhx-n{font-size:12px;color:var(--ink-2)} .rhx-root .rhx-logic h3{font-size:20px} .rhx-root .rhx-logic p{color:var(--ink-2);font-size:15px} @media (max-width:860px){.rhx-root .rhx-logic{grid-template-columns:1fr}} .rhx-root .rhx-anatomy{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(24px,5vw,72px);align-items:start} .rhx-root .rhx-anat-img{position:relative;border-radius:26px;overflow:hidden;border:1px solid #e6e6e6;background:var(--white)} .rhx-root .rhx-pin{position:absolute;left:-2px;transform:translateY(-50%);width:26px;height:26px;border-radius:0 13px 13px 0;background:var(--bm-500);color:var(--white);font:700 12px/26px var(--f-app);text-align:center;padding-left:2px} .rhx-root .rhx-anat-list{display:grid;gap:0;counter-reset:a} .rhx-root .rhx-anat-item{display:grid;grid-template-columns:34px 1fr;gap:12px;padding-block:16px;border-top:1px solid var(--rule)} .rhx-root .rhx-anat-item:first-child{border-top:0;padding-top:0} .rhx-root .rhx-anat-item .rhx-num{width:26px;height:26px;border-radius:50%;background:var(--bm-500);color:var(--white);font:700 12px/26px var(--f-app);text-align:center} .rhx-root .rhx-anat-item h4{font-size:18px;margin-bottom:4px} .rhx-root .rhx-anat-item p{color:var(--ink-2);font-size:15px} @media (max-width:820px){.rhx-root .rhx-anatomy{grid-template-columns:1fr} .rhx-root .rhx-anat-img{max-width:340px}} .rhx-root .rhx-pair{background:var(--bot-50);padding:clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(2,minmax(0,280px)) 1fr;gap:clamp(16px,3vw,40px);align-items:center} .rhx-root .rhx-pair .rhx-shot{border:0;box-shadow:0 30px 50px -30px rgba(13,51,55,.45)} .rhx-root .rhx-pair .rhx-note{display:grid;gap:14px;font-size:16px;color:var(--bot-800);min-width:0} .rhx-root .rhx-pair .rhx-note b{font-weight:600} .rhx-root .rhx-diff{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px 14px;font-size:14px} .rhx-root .rhx-diff span{padding-block:6px;border-bottom:1px solid rgba(13,51,55,.15)} .rhx-root .rhx-diff .rhx-h{font-weight:600} @media (max-width:900px){.rhx-root .rhx-pair{grid-template-columns:1fr 1fr} .rhx-root .rhx-pair .rhx-note{grid-column:1/-1}} .rhx-root .rhx-states{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .rhx-root .rhx-state{background:var(--panel);border-radius:24px;padding:16px;display:grid;gap:14px;align-content:start} .rhx-root .rhx-state .rhx-shot{border-radius:18px} .rhx-root .rhx-state h3{font-size:18px} .rhx-root .rhx-state p{font-size:14px;color:var(--ink-2)} @media (max-width:980px){.rhx-root .rhx-states{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.rhx-root .rhx-states{grid-template-columns:1fr} .rhx-root .rhx-state .rhx-shot{max-width:260px}} .rhx-root .rhx-story{background:var(--bot-800);color:var(--white);padding:clamp(20px,4vw,48px)} .rhx-root .rhx-story-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start} .rhx-root .rhx-frame{display:grid;gap:10px;min-width:0} .rhx-root .rhx-frame .rhx-hd{border-radius:16px;overflow:hidden;aspect-ratio:375/300;background:var(--bot-900)} .rhx-root .rhx-frame .rhx-hd img{width:100%;height:100%;object-fit:cover} .rhx-root .rhx-frame b{font:700 13px/1.3 var(--f-app);display:block} .rhx-root .rhx-frame span{font-size:13px;color:var(--bot-100);display:block} .rhx-root .rhx-timing{display:inline-block;font:500 11px/1 var(--f-app);background:rgba(255,255,255,.12);padding:5px 8px;border-radius:999px;color:var(--white);margin-top:2px;width:max-content} .rhx-root .rhx-timing.rhx-tap{background:var(--bm-500)} @media (max-width:900px){.rhx-root .rhx-story-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:520px){.rhx-root .rhx-story-grid{grid-template-columns:repeat(2,1fr)}} .rhx-root .rhx-spec{width:100%;border-collapse:collapse;font-size:15px;min-width:640px} .rhx-root .rhx-spec th,.rhx-root .rhx-spec td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top} .rhx-root .rhx-spec th{font-weight:500;font-size:12px;color:var(--ink-2);letter-spacing:.04em} .rhx-root .rhx-spec td:nth-child(3),.rhx-root .rhx-spec td:nth-child(4){font-variant-numeric:tabular-nums;white-space:nowrap} .rhx-root .rhx-table-scroll{overflow-x:auto} .rhx-root .rhx-proto{background:var(--bot-50);padding:clamp(20px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,64px);align-items:start} .rhx-root .rhx-controls{display:grid;gap:22px;align-content:start;min-width:0;color:var(--bot-800)} .rhx-root .rhx-seg{display:inline-flex;background:var(--white);border-radius:999px;padding:4px;gap:4px;flex-wrap:wrap} .rhx-root .rhx-seg button,.rhx-root .rhx-chips button{font:500 14px/1 var(--f-site);border:0;cursor:pointer;color:var(--bot-800);background:transparent;padding:10px 16px;border-radius:999px} .rhx-root .rhx-seg button[aria-pressed='true']{background:var(--bot-800);color:var(--white)} .rhx-root .rhx-chips{display:flex;flex-wrap:wrap;gap:8px} .rhx-root .rhx-chips button{background:var(--white);border:1px solid rgba(13,51,55,.18);padding:9px 14px} .rhx-root .rhx-chips button[aria-pressed='true']{border-color:var(--bm-500);color:var(--bm-600);background:#fff4ee} .rhx-root .rhx-seg button:focus-visible,.rhx-root .rhx-chips button:focus-visible,.rhx-root .rhx-replay:focus-visible{outline:2px solid var(--bm-500);outline-offset:2px} .rhx-root .rhx-howto{background:var(--white);border-radius:18px;padding:18px 20px;display:grid;gap:8px} .rhx-root .rhx-howto h4{font:600 15px/1.3 var(--f-site)} .rhx-root .rhx-howto ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;color:var(--gray-600)} .rhx-root .rhx-status{font:500 14px/1.4 var(--f-site);color:var(--bot-800);min-height:2.8em;display:flex;align-items:center;gap:10px} .rhx-root .rhx-status i{width:8px;height:8px;border-radius:50%;background:var(--bm-500);flex:none} .rhx-root .rhx-replay{font:500 14px/1 var(--f-site);border:1px solid var(--bot-800);background:transparent;color:var(--bot-800);padding:10px 16px;border-radius:999px;cursor:pointer;width:max-content} .rhx-root .rhx-figma-link{font-size:14px} .rhx-root .rhx-hidden{display:none!important} .rhx-root .rhx-device{width:min(340px,82vw);padding:12px;background:#0b1a1c;border-radius:48px;box-shadow:0 40px 80px -40px rgba(4,30,33,.7)} .rhx-root .rhx-screen{position:relative;overflow:hidden;border-radius:36px;background:var(--white)} .rhx-root .rhx-stage{position:absolute;left:0;top:0;width:375px;height:812px;transform-origin:0 0;overflow:hidden;background:var(--white);font-family:var(--f-app)} .rhx-root .rhx-layer{position:absolute;inset:0;will-change:opacity,transform} .rhx-root .rhx-scroller{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain} .rhx-root .rhx-scroller::-webkit-scrollbar{display:none} .rhx-root .rhx-content{position:relative;padding-bottom:81px} .rhx-root .rhx-content img,.rhx-root .rhx-layer > img{width:375px;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none} .rhx-root .rhx-navbar{position:absolute;left:0;bottom:0;width:375px;pointer-events:none;z-index:5} .rhx-root .rhx-sticky{position:absolute;left:0;top:0;width:375px;z-index:6;opacity:0;transform:translateY(-12px);transition:opacity .25s ease,transform .25s ease;pointer-events:none} .rhx-root .rhx-sticky.rhx-on{opacity:1;transform:none} .rhx-root .rhx-hot{position:absolute;left:0;width:375px;cursor:pointer;z-index:4;background:transparent;border:0;padding:0;touch-action:pan-y} .rhx-root .rhx-hot:focus-visible{outline:3px solid var(--bm-500);outline-offset:-3px} .rhx-root .rhx-hours{position:absolute;left:0;top:318px;width:375px;padding-left:16px;z-index:3;clip-path:inset(0 0 100% 0);transition:clip-path .77s var(--gentle);pointer-events:none;background:var(--white)} .rhx-root .rhx-hours.rhx-open{clip-path:inset(0 0 0 0)} .rhx-root .rhx-hours img{width:343px;max-width:none} .rhx-root .rhx-sheet{position:absolute;inset:0;z-index:8;transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1);} .rhx-root .rhx-sheet.rhx-open{transform:none} .rhx-root .rhx-sheet img{width:375px;max-width:none} .rhx-root .rhx-pulse{position:absolute;width:86px;height:86px;left:144px;top:168px;border-radius:50%;border:3px solid #ffb37a;z-index:5;pointer-events:none;animation:rhx-pulse 1.4s ease-out infinite;opacity:0} .rhx-root .rhx-pulse.rhx-on{opacity:1} @keyframes rhx-hintout{to{opacity:0}} @keyframes rhx-pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.35);opacity:0}} .rhx-root .rhx-swipe-hint{position:absolute;left:300px;top:146px;transform:translateX(-50%);animation:rhx-hintout .4s ease 3s forwards;z-index:5;font:500 11px/1 var(--f-app);color:var(--white);background:rgba(4,30,33,.85);padding:6px 10px;border-radius:999px;pointer-events:none;transition:opacity .3s} @media (prefers-reduced-motion: reduce){.rhx-root .rhx-pulse{animation:none;opacity:.8} .rhx-root .rhx-hours,.rhx-root .rhx-sheet,.rhx-root .rhx-sticky{transition:none}} @media (max-width:860px){.rhx-root .rhx-proto{grid-template-columns:1fr;justify-items:center} .rhx-root .rhx-controls{justify-self:stretch}} .rhx-root a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px} .rhx-root .rhx-seg{justify-self:start} </style><div class='rhx-root'><div class='rhx-wrap'><div class='rhx-panel rhx-cover'><div class='rhx-ph rhx-side'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae102282e140887cfcb29e8_rh3-00.webp' alt='First-time diner home with the Tugo header'></div><div class='rhx-ph rhx-mid'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae102292240db24528c678c_rh3-01.webp' alt='Returning diner home showing Dragon Wok Chinese Halal, their most-ordered restaurant'></div><div class='rhx-ph rhx-side'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae102297b0cf52ad4fa96e0_rh3-02.webp' alt='Returning diner home after swiping to Hei Niu'></div></div><div class='rhx-kicker-row'><p><b>Client:</b> Beyond Menu</p><p>Mobile App UX | Personalization | Motion Design</p></div><div class='rhx-intro'><h1>A Home Page That Starts With Your Favorites</h1><div><div class='rhx-meta-row'><p class='rhx-small'>Client</p><p>Beyond Menu</p></div><div class='rhx-meta-row'><p class='rhx-small'>Year</p><p>2026</p></div><div class='rhx-meta-row'><p class='rhx-small'>Scope of Work</p><p>Mobile App UX | Personalization | Motion Design</p></div><div class='rhx-meta-row'><p class='rhx-small'>Platform</p><p>Beyond Menu marketplace mobile app</p></div></div></div><section style='padding-top:8px'><div class='rhx-sec-head'><div><p class='rhx-sec-label'>Overview</p><h2>Most people reorder from the same few places</h2></div><div class='rhx-body'><p class='rhx-lede'>The Beyond Menu marketplace app lets diners order pickup and delivery from local independent restaurants.</p><p>We redesigned the home page for signed-in, returning diners. Instead of a general page with search and cuisine filters at the top, the new home ranks the diner's restaurants by how often they order from them, and opens on the one they order from most.</p><p>The restaurant they are most likely to order from, its hours, its menu, their past orders and its coupons are all on the first screen. Ordering again takes one tap.</p></div></div></section><section><div class='rhx-sec-head'><div><p class='rhx-sec-label'>Before and after</p><h2>From a general home to a personal one</h2></div><div class='rhx-body'><p>The original home page treated every visit like a first visit. A returning diner saw the same search bar and cuisine chips as a new diner, and their restaurants sat further down as small cards.</p></div></div><div class='rhx-ba'><div class='rhx-card'><div class='rhx-shot'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae0f4df02aa8b50ed7f07b4_rh-03.webp' alt='Original home page with greeting, search, cuisine chips, My Restaurants cards and Order Again'></div><div><span class='rhx-tag'>Original</span><h3>Search first</h3><ul><li>Greeting, search bar and cuisine chips take the top of the screen.</li><li>“My Restaurants” shows saved restaurants as text cards with a name and rating.</li><li>“Order Again” lists past orders from any restaurant, below the fold on smaller phones.</li><li>To order from a usual restaurant, the diner scrolls or searches first.</li></ul></div></div><div class='rhx-card'><div class='rhx-shot'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae102292240db24528c678c_rh3-01.webp' alt='New home page for returning diners'></div><div><span class='rhx-tag rhx-new'>New</span><h3>Favorites first</h3><ul><li>The most-ordered restaurant opens in the center, with its logo, name and hours.</li><li>View Menu and Start New Order are on the first screen.</li><li>Order Again, Coupons and the review prompt all belong to the selected restaurant.</li><li>The diner's other restaurants sit beside it in a carousel. Tap or swipe to switch.</li></ul></div></div></div></section><section><div class='rhx-sec-head'><div><p class='rhx-sec-label'>How it picks</p><h2>Order frequency decides the order</h2></div><div class='rhx-body'><p>The ranking uses the diner's own order history, so the restaurant in the center is always one they already order from.</p></div></div><div class='rhx-logic'><div class='rhx-card'><span class='rhx-n'>Step 1</span><h3>Count orders per restaurant</h3><p>For a signed-in diner, the app looks at which restaurants they have ordered from and how often.</p></div><div class='rhx-card'><span class='rhx-n'>Step 2</span><h3>Rank the carousel</h3><p>The most-ordered restaurant is selected in the center. The others follow in the carousel. We designed it for two to five restaurants.</p></div><div class='rhx-card'><span class='rhx-n'>Step 3</span><h3>Fill the page for that restaurant</h3><p>Hours, actions, past orders and coupons all load for the selected restaurant, and change when the diner switches.</p></div></div></section><section><div class='rhx-sec-head'><div><p class='rhx-sec-label'>Anatomy</p><h2>One screen, built around one restaurant</h2></div><div class='rhx-body'><p>Every section below the carousel answers a question the diner has about the selected restaurant: is it open, what did I order last time, and is there a deal.</p></div></div><div class='rhx-anatomy'><div class='rhx-anat-img'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1c243e40c7e1bcc8818f0_rh4-01-full.webp' alt='Returning diner home page, full length, with numbered sections'><span class='rhx-pin' style='top:5.4%' aria-hidden='true'>1</span><span class='rhx-pin' style='top:13.6%' aria-hidden='true'>2</span><span class='rhx-pin' style='top:21.9%' aria-hidden='true'>3</span><span class='rhx-pin' style='top:29.3%' aria-hidden='true'>4</span><span class='rhx-pin' style='top:41.3%' aria-hidden='true'>5</span><span class='rhx-pin' style='top:54.2%' aria-hidden='true'>6</span><span class='rhx-pin' style='top:68.2%' aria-hidden='true'>7</span><span class='rhx-pin' style='top:84.6%' aria-hidden='true'>8</span></div><div class='rhx-anat-list'><div class='rhx-anat-item'><span class='rhx-num'>1</span><div><h4>Greeting</h4><p>“Hi Michael! Here are your latest favorites.” The header tells the diner this page is about them, and a hand icon above the logos shows that they can be swiped.</p></div></div><div class='rhx-anat-item'><span class='rhx-num'>2</span><div><h4>Restaurant carousel</h4><p>Restaurant logos on a curved dark band. The selected restaurant is large and centered, the next ones are smaller on each side. Tap a logo or swipe to switch.</p></div></div><div class='rhx-anat-item'><span class='rhx-num'>3</span><div><h4>Name and store hours</h4><p>The restaurant name, an Open Now or Closed Now badge, and today's closing or opening time. Tap to expand the weekly hours, including closed days and special hours.</p></div></div><div class='rhx-anat-item'><span class='rhx-num'>4</span><div><h4>Main actions</h4><p>View Menu and Start New Order. The orange button changes with the situation: Continue Order when a cart is open, Order Ahead when the restaurant is closed.</p></div></div><div class='rhx-anat-item'><span class='rhx-num'>5</span><div><h4>Order Again</h4><p>Past orders from this restaurant, named by when they happened (“Last Friday's Night Out”, “Tuesday's Lunch”) with the items and total. Add to Cart reorders in one tap.</p></div></div><div class='rhx-anat-item'><span class='rhx-num'>6</span><div><h4>Coupons</h4><p>Offers from the selected restaurant, in the coupon style used across the app.</p></div></div><div class='rhx-anat-item'><span class='rhx-num'>7</span><div><h4>Sweepstakes</h4><p>The app-wide promotion stays on the page, below the restaurant content.</p></div></div><div class='rhx-anat-item'><span class='rhx-num'>8</span><div><h4>Review prompt</h4><p>Asks regulars to leave a Google review for the restaurant. It sits on the home page of people who already order from that restaurant.</p></div></div></div></div></section></div><div class='rhx-wrap'><div class='rhx-panel rhx-pair'><div class='rhx-shot'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae102292240db24528c678c_rh3-01.webp' alt='Dragon Wok Chinese Halal selected'></div><div class='rhx-shot'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae102297b0cf52ad4fa96e0_rh3-02.webp' alt='Hei Niu selected after a swipe'></div><div class='rhx-note'><p class='rhx-sec-label' style='color:var(--bot-700);margin:0'>Switching restaurants</p><p><b>The whole page follows the carousel.</b> Swiping from Dragon Wok to Hei Niu moves the logos with a Smart Animate transition and swaps everything below for Hei Niu.</p><div class='rhx-diff'><span class='rhx-h'></span><span class='rhx-h'>Dragon Wok</span><span class='rhx-h'>Hei Niu</span><span>Last order</span><span>Last Friday's Night Out</span><span>Tuesday's Lunch</span><span>Items</span><span>5 dishes</span><span>2 dishes</span><span>Total</span><span>$24.78</span><span>$14.78</span></div></div></div></div><div class='rhx-wrap'><section><div class='rhx-sec-head'><div><p class='rhx-sec-label'>States</p><h2>The page changes with what the diner is doing</h2></div><div class='rhx-body'><p>A returning diner might open the app while a delivery is on the way, with a half-built cart, or when their usual place is closed. We designed a version of the home page for each of these, so the main button always matches the next step.</p></div></div><div class='rhx-states'><div class='rhx-state'><div class='rhx-shot'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022c1a02dee09aa7ba12_rh3-04.webp' alt='Restaurant closed, Order Ahead buttons'></div><h3>Restaurant closed</h3><p>The badge turns to Closed Now with the next opening time. Start New Order and Add to Cart become Order Ahead, so the diner can still schedule an order.</p></div><div class='rhx-state'><div class='rhx-shot'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022df72ef4f1cc9556d3_rh3-05.webp' alt='Cart in progress with View Cart bar'></div><h3>Cart in progress</h3><p>The main button becomes Continue Order. A View Cart bar above the navigation shows the restaurant and the number of items.</p></div><div class='rhx-state'><div class='rhx-shot'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022d43211424ae61788c_rh3-06.webp' alt='Delivery on the way with tracking bar'></div><h3>Delivery on the way</h3><p>One full-width Start New Order button, and a “Your delivery is on the way” bar that opens tracking.</p></div><div class='rhx-state'><div class='rhx-shot'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022d4aaf92318e68a483_rh3-07.webp' alt='Delivery tracking sheet'></div><h3>Tracking sheet</h3><p>The tracking sheet slides up over the home page with the order progress, map, arrival time, address and instructions.</p></div><div class='rhx-state'><div class='rhx-shot'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022daf61f7e475817d0b_rh3-08.webp' alt='Compact header after scrolling'></div><h3>Compact header on scroll</h3><p>When the diner scrolls past the carousel, a compact header keeps the restaurant logo and name at the top, with a button to switch restaurants.</p></div><div class='rhx-state'><div class='rhx-shot'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022dbc9d0a9b8fa53511_rh3-09.webp' alt='Single favorite with no past orders'></div><h3>One restaurant, no past orders</h3><p>With a single restaurant there is no carousel: “Your trusted favorite is ready to serve.” Order Again moves to the bottom and shows an empty state.</p></div></div></section><section><div class='rhx-sec-head'><div><p class='rhx-sec-label'>First-time diners</p><h2>No favorites yet, so Tugo cracks a fortune cookie</h2></div><div class='rhx-body'><p>A diner with no orders has no favorites to show. Instead of an empty carousel, their header plays a short animation with Tugo, the Beyond Menu takeout-box mascot.</p><p>A takeout box opens, a fortune cookie pops out, and the diner taps to crack it. The fortune reads “You don't have any favorites yet!” Then the header shrinks to a compact Tugo banner so search and the rest of the page move up.</p></div></div></div><div class='rhx-wrap'><div class='rhx-panel rhx-story'><div class='rhx-story-grid'><div class='rhx-frame'><div class='rhx-hd'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022d2240db24528c6889_rh3-10.webp' alt='Frame 1: closed takeout box, welcome message'></div><b>1 · Welcome</b><span>“Welcome to Beyond Menu! The place to-go for your go-to.”</span><span class='rhx-timing'>Holds 3s</span></div><div class='rhx-frame'><div class='rhx-hd'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022e5840a0f2351a0ef7_rh3-11.webp' alt='Frame 2: fortune cookie rises out of the box'></div><b>2 · Cookie pops out</b><span>“Help Tugo crack the fortune cookie”</span><span class='rhx-timing rhx-tap'>Waits for a tap</span></div><div class='rhx-frame'><div class='rhx-hd'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022eb638121439018484_rh3-12.webp' alt='Frame 3: cookie grows'></div><b>3 · Cookie grows</b><span>“Place your first order”</span><span class='rhx-timing'>0.77s after tap</span></div><div class='rhx-frame'><div class='rhx-hd'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022ee215c558e53a11dd_rh3-13.webp' alt='Frame 4: cookie cracks and shows the fortune'></div><b>4 · Fortune</b><span>“You don't have any favorites yet!”</span><span class='rhx-timing'>Holds 4s</span></div><div class='rhx-frame'><div class='rhx-hd'><img src='https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022e1d65624a68d5c5e1_rh3-14.webp' alt='Frame 5: compact header with Tugo'></div><b>5 · Compact header</b><span>“Place your first order to see your favorites here.”</span><span class='rhx-timing'>Rests here</span></div></div></div></div><div class='rhx-wrap'><section><div class='rhx-sec-head'><div><p class='rhx-sec-label'>Motion spec</p><h2>Transitions from the Figma prototype</h2></div><div class='rhx-body'><p>All transitions use Figma Smart Animate, so shared layers move between frames instead of cutting.</p></div></div><div class='rhx-card rhx-table-scroll'><table class='rhx-spec'><thead><tr><th>Interaction</th><th>Trigger</th><th>Duration</th><th>Easing</th></tr></thead><tbody><tr><td>Welcome to cookie</td><td>After 3s</td><td>1.02s</td><td>Gentle</td></tr><tr><td>Crack the cookie</td><td>Tap on header</td><td>0.77s</td><td>Gentle</td></tr><tr><td>Cookie to fortune</td><td>Right after</td><td>1.02s</td><td>Gentle</td></tr><tr><td>Fortune to compact header</td><td>After 4s</td><td>1.02s</td><td>Gentle</td></tr><tr><td>Switch restaurant</td><td>Tap a logo</td><td>0.77s</td><td>Gentle</td></tr><tr><td>Switch restaurant</td><td>Swipe the carousel</td><td>0.30s</td><td>Ease out</td></tr><tr><td>Expand store hours</td><td>Tap Store Hours</td><td>0.77s</td><td>Gentle</td></tr><tr><td>Button press</td><td>Press</td><td>0.25s</td><td>Quick</td></tr></tbody></table></div></section><section id='rhx-prototype'><div class='rhx-sec-head'><div><p class='rhx-sec-label'>Prototype</p><h2>Try it</h2></div><div class='rhx-body'><p>This prototype is rebuilt from the Figma frames, with the same triggers and timings. Switch between a returning diner and a first-time diner, and pick a situation for the returning diner.</p></div></div></section></div><div class='rhx-wrap'><div class='rhx-panel rhx-proto'><div class='rhx-controls'><div class='rhx-seg' role='group' aria-label='Diner type'><button type='button' id='rhx-m-ret' aria-pressed='true'>Returning diner</button><button type='button' id='rhx-m-new' aria-pressed='false'>First-time diner</button></div><div id='rhx-ret-controls' style='display:grid;gap:14px'><p class='rhx-small' style='color:var(--bot-700)'>Situation</p><div class='rhx-chips' role='group' aria-label='Situation'><button type='button' data-sc='open' aria-pressed='true'>Open now</button><button type='button' data-sc='closed'>Restaurant closed</button><button type='button' data-sc='cart'>Cart in progress</button><button type='button' data-sc='delivery'>Delivery on the way</button></div></div><p class='rhx-status' aria-live='polite'><i></i><span id='rhx-status'>Tap or swipe the logos to switch restaurants.</span></p><div class='rhx-howto' id='rhx-howto-ret'><h4>What you can do</h4><ul><li>Tap or swipe the restaurant logos to switch between Dragon Wok and Hei Niu.</li><li>Tap Store Hours to see the weekly hours.</li><li>Scroll down to see the compact header.</li><li>In “Delivery on the way”, tap the tracking bar.</li></ul></div><div class='rhx-howto rhx-hidden' id='rhx-howto-new'><h4>What you can do</h4><ul><li>Wait 3 seconds for the cookie to pop out of the box.</li><li>Tap the cookie to crack it.</li><li>Watch the header shrink after the fortune.</li></ul></div><button type='button' class='rhx-replay rhx-hidden' id='rhx-replay'>Replay animation</button><a class='rhx-figma-link' href='https://www.figma.com/proto/FRsUQqOHvKr4rqY0Ynkra5?node-id=20347-31684&amp;scaling=scale-down&amp;content-scaling=fixed&amp;starting-point-node-id=20347%3A31684&amp;page-id=4359%3A128923' target='_blank' rel='noopener'>Open the original Figma prototype &#8599;</a></div><div class='rhx-device'><div class='rhx-screen' id='rhx-screen'><div class='rhx-stage' id='rhx-stage' aria-label='Interactive phone prototype'></div></div></div></div></div><div class='rhx-wrap'><section><div class='rhx-sec-head'><div><p class='rhx-sec-label'>Outcome</p><h2>What changed for the diner</h2></div><div class='rhx-body'><p>A returning diner opens the app on the restaurant they order from most, and can reorder a past meal from the first screen.</p><p>The same layout covers closed restaurants, open carts, active deliveries and diners with only one restaurant. First-time diners get a playful empty state that points them to their first order instead of an empty list.</p></div></div></section></div></div><script> (function(){if(window.__rhxInit)return;window.__rhxInit=1; (function(){ var IMG = { rt_dragon:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1c3b30e3d540990183dc5_rh4-15-dragon-full.webp', rt_heiniu:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1c3b3936278ccb871d973_rh4-16-heiniu-full.webp', closed:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1c3b3936278ccb871d991_rh4-17-closed-full.webp', cart:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022df72ef4f1cc9556d3_rh3-05.webp', delivery:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022d43211424ae61788c_rh3-06.webp', tracker:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022d4aaf92318e68a483_rh3-07.webp', nav:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae102297b0cf52ad4fa96cd_rh3-18.webp', sticky:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022df0f1166b53ecbfb1_rh3-19.webp', hours:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022f514caf937c381021_rh3-20.webp', nd1:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022d7f314018461f2147_rh3-21.webp', nd2:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022e927b7923b5304e55_rh3-22.webp', nd3:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022eb63812143901849d_rh3-23.webp', nd4:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022ef72ef4f1cc955760_rh3-24.webp', nd5:'https://cdn.prod.website-files.com/668a67bfbbf1c06c6705a4d1/6ae1022f2240db24528c68d3_rh3-25.webp' }; var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; var stage = document.getElementById('rhx-stage'); var screenEl = document.getElementById('rhx-screen'); var statusEl = document.getElementById('rhx-status'); var state = {mode:'ret', sc:'open', idx:0, timers:[], step:0}; var SETS = { open: [{img:'rt_dragon', scroll:true, hours:true, sticky:true, name:'Dragon Wok Chinese Halal'}, {img:'rt_heiniu', scroll:true, hours:true, name:'Hei Niu'}], closed: [{img:'rt_dragon', scroll:true, hours:true, sticky:true, name:'Dragon Wok Chinese Halal'}, {img:'closed', scroll:true, name:'Hei Niu (closed)'}], cart: [{img:'cart', hours:true, name:'Dragon Wok Chinese Halal'}], delivery: [{img:'delivery', hours:true, track:true, name:'Dragon Wok Chinese Halal'}] }; function fit(){ var w = screenEl.clientWidth, s = w/375; screenEl.style.height = (812*s)+'px'; stage.style.transform = 'scale('+s+')'; } if (window.ResizeObserver) new ResizeObserver(fit).observe(screenEl); else window.addEventListener('resize', fit); fit(); function clearTimers(){ state.timers.forEach(clearTimeout); state.timers = []; } function later(fn, ms){ state.timers.push(setTimeout(fn, reduce ? Math.min(ms, 300) : ms)); } function say(t){ statusEl.textContent = t; } function el(tag, cls, html){ var e=document.createElement(tag); if(cls) e.className=cls; if(html) e.innerHTML=html; return e; } function show(layer, ms, dx, dy){ var old = Array.prototype.slice.call(stage.querySelectorAll('.rhx-layer')); var dur = reduce ? 0 : ms; layer.style.opacity = dur ? '0' : '1'; if (dur && dx) layer.style.transform = 'translateX('+dx+'px)'; if (dur && dy) layer.style.transform = 'translateY('+dy+'px)'; stage.appendChild(layer); if (dur){ layer.getBoundingClientRect(); var ease = ms <= 300 ? 'cubic-bezier(0,0,.2,1)' : 'cubic-bezier(.33,1,.5,1)'; var fade = dy ? Math.round(dur*0.35) : dur; layer.style.transition = 'opacity '+fade+'ms ease, transform '+dur+'ms '+ease; layer.style.opacity = '1'; layer.style.transform = 'none'; if (dy) old.forEach(function(o){ o.style.transition = 'opacity '+fade+'ms ease, transform '+dur+'ms '+ease; o.style.transform = 'translateY('+(-dy)+'px)'; o.style.opacity = '0'; }); } setTimeout(function(){ old.forEach(function(o){ o.remove(); }); }, dur + 20); } function buildReturning(dx, ms){ var set = SETS[state.sc], scr = set[state.idx % set.length]; var layer = el('div','rhx-layer'); var host; if (scr.scroll){ host = el('div','rhx-scroller'); var content = el('div','rhx-content'); var im = el('img'); im.src = IMG[scr.img]; im.alt = ''; content.appendChild(im); host.appendChild(content); layer.appendChild(host); var nav = el('img','rhx-navbar'); nav.src = IMG.nav; nav.alt=''; layer.appendChild(nav); if (scr.sticky){ var st = el('img','rhx-sticky'); st.src = IMG.sticky; st.alt=''; layer.appendChild(st); host.addEventListener('scroll', function(){ st.classList.toggle('rhx-on', host.scrollTop > 250); }, {passive:true}); } host = content; } else { var im2 = el('img'); im2.src = IMG[scr.img]; im2.alt=''; layer.appendChild(im2); host = layer; } if (set.length > 1){ var car = el('button','rhx-hot'); car.type='button'; car.style.top='120px'; car.style.height='130px'; car.setAttribute('aria-label','Restaurant carousel, '+scr.name+' selected. Activate to switch restaurant.'); var sx=null, moved=false; car.addEventListener('pointerdown', function(e){ sx=e.clientX; moved=false; }); car.addEventListener('pointerup', function(e){ if (sx===null) return; var d = e.clientX - sx; sx=null; if (Math.abs(d) > 30){ moved=true; go(d < 0 ? 1 : -1, 300); } }); car.addEventListener('click', function(){ if (!moved) go(1, 770); moved=false; }); host.appendChild(car); if (state.idx===0 && dx===undefined){ var hint = el('span','rhx-swipe-hint','Tap or swipe'); host.appendChild(hint); } } if (scr.hours){ var hrs = el('div','rhx-hours'); var hi = el('img'); hi.src = IMG.hours; hi.alt=''; hrs.appendChild(hi); var hb = el('button','rhx-hot'); hb.type='button'; hb.style.top='318px'; hb.style.height='62px'; hb.setAttribute('aria-label','Store hours. Activate to show weekly hours.'); hb.setAttribute('aria-expanded','false'); hb.addEventListener('click', function(){ var open = !hrs.classList.contains('rhx-open'); hrs.classList.toggle('rhx-open', open); hb.setAttribute('aria-expanded', String(open)); hb.style.height = open ? '272px' : '62px'; say(open ? 'Weekly hours, including closed days and special hours. Tap again to close.' : 'Hours closed.'); }); host.appendChild(hrs); host.appendChild(hb); } if (scr.track){ var sheet = el('div','rhx-sheet'); var si = el('img'); si.src = IMG.tracker; si.alt=''; sheet.appendChild(si); var close = el('button','rhx-hot'); close.type='button'; close.style.top='0'; close.style.height='812px'; close.setAttribute('aria-label','Close delivery tracking'); close.addEventListener('click', function(){ sheet.classList.remove('rhx-open'); say('Tracking closed.'); }); sheet.appendChild(close); var tb = el('button','rhx-hot'); tb.type='button'; tb.style.top='643px'; tb.style.height='72px'; tb.setAttribute('aria-label','View tracking info'); tb.addEventListener('click', function(){ sheet.classList.add('rhx-open'); say('Delivery tracking. Tap anywhere on the sheet to close it.'); }); layer.appendChild(tb); layer.appendChild(sheet); } show(layer, ms || 0, dx); } function go(dir, ms){ var set = SETS[state.sc]; state.idx = (state.idx + dir + set.length) % set.length; buildReturning(dir > 0 ? 40 : -40, ms); say('Now showing '+set[state.idx].name+'. '+(ms<=300?'Swipe: 0.30s ease out.':'Tap: 0.77s gentle.')); } var SC_MSG = { open:'Tap or swipe the logos to switch restaurants.', closed:'Swipe to Hei Niu to see the closed state with Order Ahead.', cart:'A cart is open, so the main button says Continue Order.', delivery:'Tap the “Your delivery is on the way” bar to open tracking.' }; function frame(key){ var l = el('div','rhx-layer'); var i = el('img'); i.src = IMG[key]; i.alt=''; l.appendChild(i); return l; } function runNew(){ clearTimers(); state.step = 1; show(frame('nd1'), 0); say('1 · Welcome. The cookie pops out after 3 seconds.'); later(function(){ state.step = 2; var l = frame('nd2'); var p = el('span','rhx-pulse rhx-on'); l.appendChild(p); var b = el('button','rhx-hot'); b.type='button'; b.style.top='0'; b.style.height='300px'; b.setAttribute('aria-label','Tap to crack the fortune cookie'); b.addEventListener('click', crack, {once:true}); l.appendChild(b); show(l, 1020); say('2 · Help Tugo crack the fortune cookie. Tap the cookie.'); }, 3000); } function crack(){ if (state.step !== 2) return; state.step = 3; show(frame('nd3'), 770); say('3 · Cookie grows: 0.77s gentle.'); later(function(){ state.step = 4; show(frame('nd4'), 1020); say('4 · “You don’t have any favorites yet!” Holds for 4 seconds.'); later(function(){ state.step = 5; show(frame('nd5'), 1020, 0, 115); say('5 · The header shrinks to the compact Tugo banner.'); }, 1020 + 4000); }, 770); } var mRet = document.getElementById('rhx-m-ret'), mNew = document.getElementById('rhx-m-new'); var retControls = document.getElementById('rhx-ret-controls'), replay = document.getElementById('rhx-replay'); var howRet = document.getElementById('rhx-howto-ret'), howNew = document.getElementById('rhx-howto-new'); function setMode(m){ state.mode = m; clearTimers(); mRet.setAttribute('aria-pressed', String(m==='ret')); mNew.setAttribute('aria-pressed', String(m==='new')); retControls.classList.toggle('rhx-hidden', m!=='ret'); howRet.classList.toggle('rhx-hidden', m!=='ret'); howNew.classList.toggle('rhx-hidden', m!=='new'); replay.classList.toggle('rhx-hidden', m!=='new'); if (m==='ret'){ state.idx=0; buildReturning(undefined, 300); say(SC_MSG[state.sc]); } else runNew(); } mRet.addEventListener('click', function(){ setMode('ret'); }); mNew.addEventListener('click', function(){ setMode('new'); }); replay.addEventListener('click', runNew); Array.prototype.forEach.call(document.querySelectorAll('.rhx-chips button'), function(b){ b.addEventListener('click', function(){ document.querySelectorAll('.rhx-chips button').forEach(function(x){ x.setAttribute('aria-pressed', String(x===b)); }); state.sc = b.getAttribute('data-sc'); state.idx = 0; buildReturning(undefined, 300); say(SC_MSG[state.sc]); }); }); buildReturning(); })(); })(); </script>

<style>.rhx-root .rhx-impact{background:var(--bot-800);color:var(--white);border-radius:28px;padding:clamp(24px,4vw,48px);margin-bottom:8px} .rhx-root .rhx-impact .rhx-sec-label{color:var(--bot-100)} .rhx-root .rhx-impact h2{font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-0.01em;max-width:24ch} .rhx-root .rhx-impact-sub{color:var(--bot-50);font-size:17px;margin-top:14px;max-width:62ch} .rhx-root .rhx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(24px,4vw,40px)} .rhx-root .rhx-stat{background:var(--bot-700);border-radius:20px;padding:clamp(16px,2.4vw,24px);display:grid;gap:8px;align-content:start;min-width:0} .rhx-root .rhx-stat-v{font-size:clamp(34px,4.4vw,52px);line-height:1;letter-spacing:-0.02em;font-weight:500;color:var(--white)} .rhx-root .rhx-stat-v small{font-size:.5em;font-weight:500;margin-left:2px} .rhx-root .rhx-stat-l{font-size:15px;line-height:1.4;color:var(--bot-50)} .rhx-root .rhx-impact-note{font-size:13px;color:var(--bot-100);margin-top:18px} @media (max-width:960px){.rhx-root .rhx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:340px){.rhx-root .rhx-stats{grid-template-columns:1fr}} .rhx-root .rhx-results{display:grid;grid-template-columns:1fr 1fr;gap:16px} .rhx-root .rhx-results .rhx-card{display:grid;gap:14px;align-content:start} .rhx-root .rhx-results h3{font-size:20px} .rhx-root .rhx-results p{color:var(--ink-2);font-size:15px} .rhx-root .rhx-bar-row{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;font-size:14px} .rhx-root .rhx-bar{height:14px;border-radius:999px;background:#ececec;overflow:hidden} .rhx-root .rhx-bar span{display:block;height:100%;border-radius:999px;background:var(--bot-100)} .rhx-root .rhx-bar.rhx-new span{background:var(--bot-800)} .rhx-root .rhx-bar-row b{font-weight:600;font-variant-numeric:tabular-nums} .rhx-root .rhx-results .rhx-big{font-size:clamp(36px,4vw,48px);line-height:1;letter-spacing:-0.02em;color:var(--ink)} @media (max-width:860px){.rhx-root .rhx-results{grid-template-columns:1fr}} </style><div class='rhx-root' id='rhx-impact-root'><div class='rhx-wrap'><section class='rhx-impact-sec' style='padding-block:8px 24px'><div class='rhx-impact' aria-labelledby='rhx-impact-h'><p class='rhx-sec-label'>Impact</p><h2 id='rhx-impact-h'>Returning diners placed 33% more orders on the new home</h2><p class='rhx-impact-sub'>We rolled it out in September and October 2025 and measured it against a comparison group of returning diners who still had the old home.</p><div class='rhx-stats'><div class='rhx-stat'><p class='rhx-stat-v'>+33<small>%</small></p><p class='rhx-stat-l'>more orders placed by returning diners</p></div><div class='rhx-stat'><p class='rhx-stat-v'>+23<small>%</small></p><p class='rhx-stat-l'>more spent per diner: $52.37 vs $42.43</p></div><div class='rhx-stat'><p class='rhx-stat-v'>$334<small>K</small></p><p class='rhx-stat-l'>extra order value in just 3 weeks (approx.)</p></div><div class='rhx-stat'><p class='rhx-stat-v'>175<small>K</small></p><p class='rhx-stat-l'>diners now reach it every month (approx.)</p></div></div><p class='rhx-impact-note'>Figures from the 3-week rollout window, new home vs comparison group.</p></div></section><section id='rhx-results'><div class='rhx-sec-head'><div><p class='rhx-sec-label'>Results</p><h2>More orders and bigger orders from returning diners</h2></div><div class='rhx-body'><p>During the rollout, a comparison group of returning diners kept the old home while the rest got the new one. That comparison is what lets us tie these numbers to the new home rather than to the season or other changes.</p></div></div><div class='rhx-results'><div class='rhx-card'><p class='rhx-small'>Spend per returning diner, 3-week rollout</p><div class='rhx-bar-row'><span>Old home</span><div class='rhx-bar' role='img' aria-label='Old home: $42.43 per diner'><span style='width:81%'></span></div><b>$42.43</b></div><div class='rhx-bar-row'><span>New home</span><div class='rhx-bar rhx-new' role='img' aria-label='New home: $52.37 per diner'><span style='width:100%'></span></div><b>$52.37</b></div><p>Diners on the new home spent 23% more and placed 33% more orders than the comparison group.</p></div><div class='rhx-card'><p class='rhx-small'>Extra order value in 3 weeks</p><p class='rhx-big'>≈ $334K</p><p>After the rollout, the new home now reaches about 175,000 diners a month.</p></div></div></section></div></div><script>(function(){var b=document.querySelector('#rhx-impact-root .rhx-impact-sec');var i=document.querySelector('.rhx-root .rhx-intro');if(b&&i&&i.parentNode){i.parentNode.insertBefore(b,i.nextSibling);}})();</script>