NomNom

<div data-tn style="display:none">Umfrage: Lieferdienste</div><style> .nn-bar-wrap{width:100%;background:#150D0C;padding:24px 0;font-family:Trispace,sans-serif} .nn-bar-title{font-size:17px;font-weight:700;color:#F1EBC9;margin:0 0 16px;text-align:left} .nn-bar-sub{font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 24px;text-align:left} .nn-bar-body{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:100%;padding:0 24px} .nn-bar-item{display:flex;flex-direction:column;align-items:center;gap:8px} .nn-bar-item-bar{width:100%;height:80px;background:linear-gradient(180deg,#D4A574 0%,#8B5A2B 100%);border-radius:4px} .nn-bar-item-label{font-size:12px;color:#F1EBC9;text-align:center} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}}</style> <div class="nn-bar-wrap"><p class="nn-bar-title">Lieferdienste - Haufigkeit der Nutzung</p><p class="nn-bar-sub">Bekanntheit und Nutzung</p><div class="nn-bar-body"><div class="nn-bar-item"><div class="nn-bar-item-bar" style="height:40px"></div><p class="nn-bar-item-label">Immer</p></div><div class="nn-bar-item"><div class="nn-bar-item-bar" style="height:60px"></div><p class="nn-bar-item-label">Oft</p></div><div class="nn-bar-item"><div class="nn-bar-item-bar" style="height:55px"></div><p class="nn-bar-item-label">Manchmal</p></div><div class="nn-bar-item"><div class="nn-bar-item-bar" style="height:30px"></div><p class="nn-bar-item-label">Nie</p></div></div></div>

<div data-tn style="display:none">Umfrage: Kochverhalten</div><style> .nn-pie-wrap{width:100%;background:#150D0C;padding:24px 0;font-family:Trispace,sans-serif} .nn-pie-title{font-size:17px;font-weight:700;color:#F1EBC9;margin:0 0 16px;text-align:left} .nn-pie-sub{font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 24px;text-align:left} .nn-pie-body{display:flex;align-items:center;justify-content:center;gap:20px} .nn-pie{width:160px;height:160px} .nn-pie-legend{display:flex;flex-direction:column;gap:8px} .nn-pie-legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#F1EBC9} .nn-pie-legend-color{width:12px;height:12px;border-radius:2px} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}}</style> <div class="nn-pie-wrap"><p class="nn-pie-title">Kochverhalten</p><p class="nn-pie-sub">Haufigkeit Pro Woche</p><div class="nn-pie-body"><svg class="nn-pie" viewBox="0 0 36 36"><circle cx="18" cy="18" r="15.915" fill="none" stroke="#8B7355" stroke-width="3" stroke-dasharray="8.09 100" stroke-dashoffset="-1.28"></circle><circle cx="18" cy="18" r="15.915" fill="none" stroke="#C9A168" stroke-width="3" stroke-dasharray="14.77 100" stroke-dashoffset="-9.37"></circle><circle cx="18" cy="18" r="15.915" fill="none" stroke="#8B6F47" stroke-width="3" stroke-dasharray="40.91 100" stroke-dashoffset="-24.14"></circle><circle cx="18" cy="18" r="15.915" fill="none" stroke="#6B5A42" stroke-width="3" stroke-dasharray="36.23 100" stroke-dashoffset="-65.05"></circle></svg><div class="nn-pie-legend"><div class="nn-pie-legend-item"><div class="nn-pie-legend-color" style="background:#8B7355"></div>Taglich</div><div class="nn-pie-legend-item"><div class="nn-pie-legend-color" style="background:#C9A168"></div>4-5x/Woche</div><div class="nn-pie-legend-item"><div class="nn-pie-legend-color" style="background:#8B6F47"></div>2-3x/Woche</div><div class="nn-pie-legend-item"><div class="nn-pie-legend-color" style="background:#6B5A42"></div>1x/Woche</div></div></div></div>

<div data-tn style="display:none">User Flow</div><style> .nn-fl{width:100%;background:#150D0C;padding:32px 24px;font-family:Trispace,sans-serif} .nn-fl-title{font-size:17px;font-weight:700;color:#F1EBC9;margin:0 0 16px;text-align:left} .nn-fl-sub{font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 32px;text-align:left} .nn-fl-steps{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} .nn-fl-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px} .nn-fl-circle{width:48px;height:48px;border-radius:50%;background:#6B5A42;color:#F1EBC9;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px} .nn-fl-label{font-size:12px;color:#F1EBC9;text-align:center} .nn-fl-arrow{flex:0 0 24px;height:2px;background:linear-gradient(90deg,#C9A168,transparent);margin-top:24px} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}}</style> <div class="nn-fl"><p class="nn-fl-title">User Flow</p><p class="nn-fl-sub">Essen bestellen, von Konzept bis zur Lieferung</p><div class="nn-fl-steps"><div class="nn-fl-step"><div class="nn-fl-circle">1</div><p class="nn-fl-label">App offnen</p></div><div class="nn-fl-arrow"></div><div class="nn-fl-step"><div class="nn-fl-circle">2</div><p class="nn-fl-label">Restaurant suchen</p></div><div class="nn-fl-arrow"></div><div class="nn-fl-step"><div class="nn-fl-circle">3</div><p class="nn-fl-label">Speisen wahlen</p></div><div class="nn-fl-arrow"></div><div class="nn-fl-step"><div class="nn-fl-circle">4</div><p class="nn-fl-label">Bestellung bestatigen</p></div><div class="nn-fl-arrow"></div><div class="nn-fl-step"><div class="nn-fl-circle">5</div><p class="nn-fl-label">Lieferung empfangen</p></div></div></div>

<style>.nn-gal{columns:2;column-gap:16px;width:100%;background:#150D0C;padding:0;font-family:Trispace,sans-serif;margin:0}.nn-gal-item{break-inside:avoid;background:#1C1C1C;border:1px solid rgba(241,235,201,0.1);border-radius:4px;margin-bottom:16px;padding:16px;display:flex;align-items:center;justify-content:center;min-height:150px;color:rgba(241,235,201,0.5);font-size:12px;text-align:center}.nn-gal-title{font-size:17px;font-weight:700;color:#F1EBC9;margin:24px 0 0;padding:0 24px;background:#150D0C;grid-column:1/-1}.nn-gal-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:24px;background:#150D0C;width:100%}@media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}}</style><div class="nn-gal-wrap"><div class="nn-gal-title">Ergebnis - App Designs</div><div class="nn-gal-item">Login Screen</div><div class="nn-gal-item">Home Feed</div><div class="nn-gal-item">Recipe Detail</div><div class="nn-gal-item">Video Call Interface</div><div class="nn-gal-item">Chat Integration</div><div class="nn-gal-item">User Profile</div></div>

<style> .nn-ds{width:100%;background:#150D0C;padding:32px 0;font-family:Trispace,sans-serif} .nn-ds-title{font-size:17px;font-weight:700;color:#F1EBC9;margin:0 0 16px;text-align:left} .nn-ds-sub{font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 24px;text-align:left} .nn-ds-colors{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:0 24px} .nn-ds-color-item{display:flex;flex-direction:column;align-items:center;gap:8px} .nn-ds-color-swatch{width:80px;height:80px;border-radius:4px;border:1px solid rgba(241,235,201,0.2)} .nn-ds-color-label{font-size:11px;color:#F1EBC9;font-weight:600} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}}</style> <div class="nn-ds"> <p class="nn-ds-title">Design System</p> <p class="nn-ds-sub">Farben & Typografie</p> <div class="nn-ds-colors"> <div class="nn-ds-color-item"> <div class="nn-ds-color-swatch" style="background:#F1EBC9"></div> <p class="nn-ds-color-label">Primary</p> </div> <div class="nn-ds-color-item"> <div class="nn-ds-color-swatch" style="background:#150D0C"></div> <p class="nn-ds-color-label">Dark Base</p> </div> <div class="nn-ds-color-item"> <div class="nn-ds-color-swatch" style="background:#8B6F47"></div> <p class="nn-ds-color-label">Accent 1</p> </div> <div class="nn-ds-color-item"> <div class="nn-ds-color-swatch" style="background:#C9A168"></div> <p class="nn-ds-color-label">Accent 2</p> </div> </div> </div>

<div data-w-id="nn-fazit-banner" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); transform-style: preserve-3d; width: 100%; background-color: #150d0d; padding: 24px;"><style> .nn-fazit-text { font-family:Trispace,sans-serif; font-size: 13px; color: rgba(241, 235, 201, 0.7); line-height: 1.8; max-width: 600px; margin: auto; } .nn-fazit-title { font-family:Trispace,sans-serif; font-size: 17px; font-weight: 700; color: #F1EBC9; margin-bottom: 16px; text-align:center; } @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}}</style><p class="nn-fazit-title">Fazit</p><p class="nn-fazit-text">NomNom zeigt, wie Technologie Menschen in Zeiten der Isolation zusammenbringen kann. Die App kombiniert intuitive UX-Design mit emotionalen Touchpoints, um eine Plattform zu schaffen, die nicht nur funktional ist, sondern auch eine sinnvolle Verbindung zwischen Nutzern schafft. Der Erfolg des Projekts liegt in der Kombination aus Benutzerforschung, kreativem Design und einem klaren Verständnis für die Bedürfnisse der Zielgruppe.</p></div>