1 2 3 4 5<!DOCTYPE html> 6<html lang="en" class="job-layout" > 7 <head> 8 <!-- Google tag (gtag.js) -->
vendor: 72 bytes, lines 8-9
8 9 <script async src="https://www.googletagmanager.com/gtag/js?id=
9G-DFPV6HDPDF
vendor: 20 bytes, lines 9-10
9"></script> 10
10<!-- Google tag (gtag.js) -->
vendor: 72 bytes, lines 10-11
10 11 <script async src="https://www.googletagmanager.com/gtag/js?id=
11G-SRQQ8E43DX
vendor: 20 bytes, lines 11-12
11"></script> 12
12<script> 13
vendor: 152 bytes, lines 13-17
13window.dataLayer = window.dataLayer || []; 14 function gtag(){dataLayer.push(arguments);} 15 gtag('js', new Date()); 16 17 gtag('config', '
17G-SRQQ8E43DX
vendor: 12 bytes, lines 17-18
17'); 18
18</script>
18 19 <meta charset="UTF-8"> 20 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 21 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 22 <meta name="description" content="Shahed Syed | Design Director"/> 23 <title>LettuceEats Redesign</title> 24 <link rel="icon" href="/favicon.png" sizes="any"> 25 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 26<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 27<link rel="preconnect" href="https://fonts.googleapis.com"> 28<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,[email protected],100;9..40,400;9..40,700&display=swap" rel="stylesheet"> 29 30 31
31<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
31 32 33
33<script src="https://cdn.jsdelivr.net/npm/@observablehq/[email protected]"></script>
33 34 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> 35 36 37 38 39 <!-- Template Main CSS File --> 40 <link rel="stylesheet" href="/css/style.css"> 41 </head> 42 <body class="job-layout"> 43 44 45 46 47 48 49 50 51 52<div class="nav-overlay" aria-hidden="true"> 53 <nav class="nav-overlay__menu"> 54 <ul class="header__links"> 55 56 57 <li> 58 <a class="header__link" href="/">Home</a> 59 </li> 60 61 62 63 64 65 66 67</ul> 68 69 </nav> 70</div> 71 72 73<header class="navbar navbar-light custom-navbar custom-navbar-sticky-always"> 74 <div class="container"> 75 <a class="navbar-brand" href="/"> 76 <img src="/images/shahed-syed-sqaurelogo.png" width="50" alt="Shahed Syed"> 77 </a> 78 <button class="nav-hamburger" type="button" aria-label="Toggle menu" aria-expanded="false"> 79 <span class="nav-hamburger__bar"></span> 80 <span class="nav-hamburger__bar"></span> 81 <span class="nav-hamburger__bar"></span> 82</button> 83<nav class="nav-menu"> 84 <ul class="header__links"> 85 86 87 <li> 88 <a class="header__link" href="/">Home</a> 89 </li> 90 91 92 93 94 95 96 97</ul> 98 99</nav> 100 101 </div> 102</header> 103 104 <div class="job-page-scroll"> 105 <div class="content"> 106 <main class="main container"> 107 108<div class="case-study pt-4"> 109 <!-- Hero Section --> 110 <section class="case-study__hero"> 111 <div class="case-study__text-container"> 112 <h1 class="case-study__title"> 113 LettuceEats Redesign 114 </h1> 115 116 117 <div class="case-study__intro prose"> 118 <p>I led the redesign of the LettuceEats mobile app into a unified experience for loyalty, reservations, gift cards, and online ordering. 119</p> 120 </div> 121 122 123 <div class="case-study__details"> 124 125 <div class="case-study__detail-item"> 126 <span class="case-study__detail-label">Role</span> 127 <span class="case-study__detail-value">Lead Designer</span> 128 </div> 129 130 131 <div class="case-study__detail-item"> 132 <span class="case-study__detail-label">Client</span> 133 <span class="case-study__detail-value">Lettuce Entertain You</span> 134 </div> 135 136 137 138 <div class="case-study__detail-item"> 139 <span class="case-study__detail-label">Duration</span> 140 <span class="case-study__detail-value">24 weeks</span> 141 </div> 142 143 144 145 <div class="case-study__detail-item"> 146 <span class="case-study__detail-label">Process</span> 147 <span class="case-study__detail-value">App Design</span> 148 </div> 149 150 </div> 151 </div> 152 153 154 <div class="case-study__image-outer"> 155 <div class="case-study__hero-image mb-4"> 156 <picture><source type="image/webp" srcset="/images/mrZOiB9v1X-300.webp 300w, /images/mrZOiB9v1X-800.webp 800w, /images/mrZOiB9v1X-1200.webp 1200w, /images/mrZOiB9v1X-1600.webp 1600w, /images/mrZOiB9v1X-1920.webp 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><source type="image/png" srcset="/images/mrZOiB9v1X-300.png 300w, /images/mrZOiB9v1X-800.png 800w, /images/mrZOiB9v1X-1200.png 1200w, /images/mrZOiB9v1X-1600.png 1600w, /images/mrZOiB9v1X-1920.png 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><img alt="Lettuce Entertain You - Missing Points Self Service" loading="lazy" decoding="async" src="/images/mrZOiB9v1X-1920.webp" width="1920" height="1080"></picture> 157 </div> 158 </div> 159 160 161 </section> 162 163 <!-- Process Steps --> 164 165 166 <section class="case-study__step"> 167 <div class="case-study__text-container"> 168 <h2 class="case-study__step-title">Problem: a disjointed dining experience</h2> 169 170 171 <div class="case-study__step-content prose"> 172 173 174 <p>Lettuce Entertain Youâs previous app had missing functionality and spread loyalty, reservations, and ordering across clunky, inconsistent flows. Managing separate native iOS and Android apps also slowed design and development.</p> 175 176 </div> 177 178 179 180 181 182 </div> 183 184 185 </section> 186 187 <section class="case-study__step"> 188 <div class="case-study__text-container"> 189 <h2 class="case-study__step-title">Unify</h2> 190 191 192 <div class="case-study__step-content prose"> 193 194 195 <p>I redesigned the LettuceEats mobile app into a simple, unified experience where members can earn, see, and use their points while booking and ordering from one place. We rebuilt the app in React Native, integrating multiple thirdâparty vendors (like DoorDash for online ordering) to deliver a oneâstop, bestâinâclass customer experience.</p> 196 197 </div> 198 199 200 201 202 203 </div> 204 205 206 207 208 <div class="case-study__image-outer"> 209 <div class="case-study__step-image"> 210 <picture><source type="image/webp" srcset="/images/Q9H0LP_jeu-300.webp 300w, /images/Q9H0LP_jeu-800.webp 800w, /images/Q9H0LP_jeu-1200.webp 1200w, /images/Q9H0LP_jeu-1600.webp 1600w, /images/Q9H0LP_jeu-1920.webp 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><source type="image/png" srcset="/images/Q9H0LP_jeu-300.png 300w, /images/Q9H0LP_jeu-800.png 800w, /images/Q9H0LP_jeu-1200.png 1200w, /images/Q9H0LP_jeu-1600.png 1600w, /images/Q9H0LP_jeu-1920.png 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><img alt="LEYE Screens" loading="lazy" decoding="async" src="/images/Q9H0LP_jeu-1920.webp" width="1920" height="1080"></picture> 211 212 <p class="case-study__image-caption">We touched every part of the app: reservations, online ordering, check-in, loyalty, gift cards, and special events like Summer ScratchOff</p> 213 214 </div> 215 </div> 216 217 <div class="case-study__image-outer"> 218 <div class="case-study__step-image"> 219 <picture><source type="image/webp" srcset="/images/Ppy1ZzgDp2-300.webp 300w, /images/Ppy1ZzgDp2-800.webp 800w, /images/Ppy1ZzgDp2-1200.webp 1200w, /images/Ppy1ZzgDp2-1600.webp 1600w, /images/Ppy1ZzgDp2-1920.webp 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><source type="image/png" srcset="/images/Ppy1ZzgDp2-300.png 300w, /images/Ppy1ZzgDp2-800.png 800w, /images/Ppy1ZzgDp2-1200.png 1200w, /images/Ppy1ZzgDp2-1600.png 1600w, /images/Ppy1ZzgDp2-1920.png 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><img alt="LEYE Design System" loading="lazy" decoding="async" src="/images/Ppy1ZzgDp2-1920.webp" width="1920" height="1080"></picture> 220 221 <p class="case-study__image-caption">Lettuce Design System</p> 222 223 </div> 224 </div> 225 226 <div class="case-study__image-outer"> 227 <div class="case-study__step-image"> 228 <picture><source type="image/webp" srcset="/images/8WccReepPu-300.webp 300w, /images/8WccReepPu-800.webp 800w, /images/8WccReepPu-1200.webp 1200w, /images/8WccReepPu-1600.webp 1600w, /images/8WccReepPu-1920.webp 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><source type="image/png" srcset="/images/8WccReepPu-300.png 300w, /images/8WccReepPu-800.png 800w, /images/8WccReepPu-1200.png 1200w, /images/8WccReepPu-1600.png 1600w, /images/8WccReepPu-1920.png 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><img alt="LEYE Summer Scratch Off" loading="lazy" decoding="async" src="/images/8WccReepPu-1920.webp" width="1920" height="1080"></picture> 229 230 <p class="case-study__image-caption">End of Summer Scratch Off plays back your fun dining and rewards stats from the previous year.</p> 231 232 </div> 233 </div> 234 235 <div class="case-study__image-outer"> 236 <div class="case-study__step-image"> 237 <picture><source type="image/webp" srcset="/images/ahkj1s6How-300.webp 300w, /images/ahkj1s6How-800.webp 800w, /images/ahkj1s6How-1200.webp 1200w, /images/ahkj1s6How-1600.webp 1600w, /images/ahkj1s6How-1920.webp 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><source type="image/png" srcset="/images/ahkj1s6How-300.png 300w, /images/ahkj1s6How-800.png 800w, /images/ahkj1s6How-1200.png 1200w, /images/ahkj1s6How-1600.png 1600w, /images/ahkj1s6How-1920.png 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><img alt="LEYE Splash Icon" loading="lazy" decoding="async" src="/images/ahkj1s6How-1920.webp" width="1920" height="1080"></picture> 238 239 </div> 240 </div> 241 242 <div class="case-study__image-outer"> 243 <div class="case-study__step-image"> 244 <picture><source type="image/webp" srcset="/images/O3F4VlWn7Z-300.webp 300w, /images/O3F4VlWn7Z-800.webp 800w, /images/O3F4VlWn7Z-1200.webp 1200w, /images/O3F4VlWn7Z-1600.webp 1600w, /images/O3F4VlWn7Z-1920.webp 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><source type="image/png" srcset="/images/O3F4VlWn7Z-300.png 300w, /images/O3F4VlWn7Z-800.png 800w, /images/O3F4VlWn7Z-1200.png 1200w, /images/O3F4VlWn7Z-1600.png 1600w, /images/O3F4VlWn7Z-1920.png 1920w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><img alt="LEYE Check-In" loading="lazy" decoding="async" src="/images/O3F4VlWn7Z-1920.webp" width="1920" height="1080"></picture> 245 246 </div> 247 </div> 248 249 <div class="case-study__image-outer"> 250 <div class="case-study__step-image"> 251 <picture><source type="image/webp" srcset="/images/Y_lG6kRomy-300.webp 300w, /images/Y_lG6kRomy-800.webp 800w, /images/Y_lG6kRomy-1200.webp 1200w, /images/Y_lG6kRomy-1600.webp 1600w, /images/Y_lG6kRomy-1920.webp 1920w, /images/Y_lG6kRomy-2560.webp 2560w, /images/Y_lG6kRomy-3840.webp 3840w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><source type="image/png" srcset="/images/Y_lG6kRomy-300.png 300w, /images/Y_lG6kRomy-800.png 800w, /images/Y_lG6kRomy-1200.png 1200w, /images/Y_lG6kRomy-1600.png 1600w, /images/Y_lG6kRomy-1920.png 1920w, /images/Y_lG6kRomy-2560.png 2560w, /images/Y_lG6kRomy-3840.png 3840w" sizes="(min-width: 64rem) calc(100vw - 80px), 100vw"><img alt="LEYE Research" loading="lazy" decoding="async" src="/images/Y_lG6kRomy-3840.webp" width="3840" height="2160"></picture> 252 253 <p class="case-study__image-caption">One of the many qualitative research reports we generated through the course of the engagement. Keeping in touch with customers was critical to the success of the redesign.</p> 254 255 </div> 256 </div> 257 258 259 </section> 260 261 262 263 <!-- Conclusion --> 264 265
266 <!-- Navigation: Next Case Study (Circular Loop) --> 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293<section class="case-study__next-section"> 294 <div class="case-study__next-marquee-wrap" aria-hidden="true"> 295 <div class="case-study__next-marquee-track"> 296 <span class="case-study__next-marquee-set"> 297 <span class="case-study__next-marquee-text">Next case study</span> 298 <span class="case-study__next-marquee-sep">â¢</span> 299 <span class="case-study__next-marquee-text">Next case study</span> 300 <span class="case-study__next-marquee-sep">â¢</span> 301 <span class="case-study__next-marquee-text">Next case study</span> 302 <span class="case-study__next-marquee-sep">â¢</span> 303 <span class="case-study__next-marquee-text">Next case study</span> 304 <span class="case-study__next-marquee-sep">â¢</span> 305 <span class="case-study__next-marquee-text">Next case study</span> 306 <span class="case-study__next-marquee-sep">â¢</span> 307 </span> 308 <span class="case-study__next-marquee-set"> 309 <span class="case-study__next-marquee-text">Next case study</span> 310 <span class="case-study__next-marquee-sep">â¢</span> 311 <span class="case-study__next-marquee-text">Next case study</span> 312 <span class="case-study__next-marquee-sep">â¢</span> 313 <span class="case-study__next-marquee-text">Next case study</span> 314 <span class="case-study__next-marquee-sep">â¢</span> 315 <span class="case-study__next-marquee-text">Next case study</span> 316 <span class="case-study__next-marquee-sep">â¢</span> 317 <span class="case-study__next-marquee-text">Next case study</span> 318 <span class="case-study__next-marquee-sep">â¢</span> 319 </span> 320 </div> 321 </div> 322 <div class="case-study__next-image-wrap"> 323 324 <a href="/projects/case-study-etrade/" class="case-study__next-link"> 325 <div class="case-study__next-image"> 326 <picture><source type="image/webp" srcset="/images/UaO-zpumAc-300.webp 300w, /images/UaO-zpumAc-800.webp 800w, /images/UaO-zpumAc-1200.webp 1200w, /images/UaO-zpumAc-1600.webp 1600w, /images/UaO-zpumAc-1920.webp 1920w" sizes="(min-width: 64rem) 800px, 100vw"><source type="image/png" srcset="/images/UaO-zpumAc-300.png 300w, /images/UaO-zpumAc-800.png 800w, /images/UaO-zpumAc-1200.png 1200w, /images/UaO-zpumAc-1600.png 1600w, /images/UaO-zpumAc-1920.png 1920w" sizes="(min-width: 64rem) 800px, 100vw"><img alt="Stock Plan Preview page" loading="lazy" decoding="async" src="/images/UaO-zpumAc-1920.webp" width="1920" height="1080"></picture> 327 </div> 328 </a> 329 330 <div class="case-study__next-content"> 331 <p class="case-study__next-title">I led the redesign of E*TRADE's Stock Plan experience, driving record asset retention.</p> 332 </div> 333 </div> 334</section> 335 336 337 338 339</div> 340 341 342 </main> 343 </div> 344 345<footer class="footer footer--job"> 346 <div class="footer__job-grid"> 347 <div class="footer__job-image"> 348 <span class="footer__job-image-img" role="img" aria-label="Shahed Ahmed Syed"></span> 349 </div> 350 <div class="footer__job-links"> 351 <p class="footer__contact-row"> 352 <button type="button" class="email-link email-link--copy" data-email="ZGVzaWduQHNoYWhlZHN5ZWQuY29t" aria-label="Copy email address"> 353 <span class="email-link__text">[email protected]</span> 354 <span class="email-link__copied" aria-live="polite">Copied!</span> 355 </button> 356 </p> 357 <span class="footer__social-inline"> 358 <a href="https://www.linkedin.com/in/shahedasyed/" target="_blank" rel="noopener noreferrer">LinkedIn</a> ⢠<a href="https://twitter.com/dehahs" target="_blank" rel="noopener noreferrer">X</a> 359 </span> 360 </div> 361 </div> 362</footer>
363<script> 364(function() { 365 function decodeEmail(base64) { 366 try { return atob(base64); } catch (e) { return ''; } 367 } 368 async function copyToClipboard(text) { 369 try { 370 await navigator.clipboard.writeText(text); 371 return true; 372 } catch (err) { 373 const textArea = document.createElement('textarea'); 374 textArea.value = text; 375 textArea.style.position = 'fixed'; 376 textArea.style.left = '-999999px'; 377 document.body.appendChild(textArea); 378 textArea.focus(); 379 textArea.select(); 380 try { 381 document.execCommand('copy'); 382 document.body.removeChild(textArea); 383 return true; 384 } catch (err) { 385 document.body.removeChild(textArea); 386 return false; 387 } 388 } 389 } 390 function initEmailCopyButtons() { 391 document.querySelectorAll('.email-link--copy[data-email]').forEach(function(button) { 392 const encodedEmail = button.getAttribute('data-email'); 393 const decodedEmail = decodeEmail(encodedEmail); 394 const textSpan = button.querySelector('.email-link__text'); 395 const copiedSpan = button.querySelector('.email-link__copied'); 396 if (!decodedEmail || !textSpan || !copiedSpan) return; 397 let timeoutId = null; 398 button.addEventListener('click', async function(e) { 399 e.preventDefault(); 400 if (timeoutId) clearTimeout(timeoutId); 401 const success = await copyToClipboard(decodedEmail); 402 if (success) { 403 button.classList.add('email-link--copied-active'); 404 copiedSpan.textContent = 'Copied!'; 405 timeoutId = setTimeout(function() { 406 button.classList.remove('email-link--copied-active'); 407 }, 2000); 408 } 409 }); 410 button.addEventListener('keydown', function(e) { 411 if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); button.click(); } 412 }); 413 }); 414 } 415 if (document.readyState === 'loading') { 416 document.addEventListener('DOMContentLoaded', initEmailCopyButtons); 417 } else { 418 initEmailCopyButtons(); 419 } 420})(); 421</script>
421 422 423 424 </div> 425
425<script src="/js/navigation.js"></script>
425 426
426<script src="/js/job-anchor-scroll.js"></script>
426 427 428 </body> 429</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.