Anwalt.de – SnackEase App Konzept

Anwalt.de – SnackEase App Konzept

2023
UX Designer (Assessment)
Anwalt.de
UX DesignUser Research
Im Figma ansehen

Challenge

Bewerbungs-Assessment bei Anwalt.de: Konzeption einer mobilen App für einen Mitarbeiter-Snack-Kiosk an den Standorten Nürnberg und Berlin. Mitarbeiter erhalten 25 € monatliches Guthaben und können Snacks (Obst, Proteinriegel, Shakes, Schokoriegel, Nüsse) auf Vertrauensbasis selbst buchen – mit nur einer Berührung. Zusätzlich soll ein Leaderboard Gesundheitsbewusstsein und Wir-Gefühl fördern.

Stakeholder

  • Mitarbeiter von Anwalt.de (Primärnutzer: Nürnberg & Berlin)
  • App-Administratoren und Finanzabteilung (Guthabenverwaltung)
  • Management von Anwalt.de (Motivation, Mitarbeiterbindung)
  • Lieferanten von Snacks und Getränken

Ziele

  • Snack-Buchung mit einer einzigen Berührung (1-Touch-Prinzip)
  • Persönliche Statistiken: Guthaben, Ausgaben, Kaufhistorie, Nährwerte auf einen Blick
  • Leaderboard mit Bonuspunkten für gesunde Produkte zur spielerischen Motivation
  • Gesunde Ernährung fördern und Anreize für regelmäßige Büropräsenz schaffen
  • Hi-Fi-Wireframes für alle Kernflows liefern

Process

Methoden

Stakeholder-Analyse: 9 Nutzergruppen identifiziert (Mitarbeiter, Admins, Ernährungsberater, Entwickler, Finanzabteilung, Kundensupport, Management, Lieferanten, Selbstbedienungsnutzer)Nutzergruppen-Segmentierung: Hauptgruppe in 9 Untergruppen (Neue Mitarbeiter, Belegschaft, Gesundheitsbewusste, Gelegenheitsnutzer, Botschafter, Entdecker, Zeitsensible, Technikaffine, Gruppenbesteller)Persona-Entwicklung: 3 repräsentative Personas (Lucas Gesundheitsfan, Maxine Snackliebhaber, Nina Neuanfang)Aufgabenmodell: 11 Kernaufgaben der App definiertScreenflow / Informationsarchitektur: 14 Screens strukturiert und verknüpftHi-Fi Wireframe-Konzept: "SnackEase – Dein Weg zu Gesundheit und Genuss"

Tools

FigmaKeynote

Team

Solo-Projekt (Bewerbungs-Assessment bei Anwalt.de)

Dauer

2023 – im Rahmen eines Bewerbungsgesprächs

Solution

Vollständiger Hi-Fi-Prototyp "Snack Ease" in Figma mit 19 verknüpften Screens und klickbarem User Flow – von Splashscreen und Login über Produktübersicht, Suche, Kauf-Flow mit Scan & Bezahlen bis zu Bestenliste, Profil, Statistiken und Kaufhistorie. Design-System auf Basis von Mulish-Typografie und einem blauen Primary-System (#2F80ED), Tab-Navigation mit 5 Tabs: Snacks, Suche, Kaufen, Best, Profil.

Key Features

  • Splashscreen & Onboarding: "Willkommen bei Snack Ease" mit illustriertem Food-Character, Login & Registrierung
  • Produktübersicht: Guthaben-Anzeige (18,50 €) mit Progress Bar, horizontale Produkt-Cards (Angebote), Empfehlungen/Favoriten-Filter
  • Produktkarte: Produktbild, Name, Punkte, Preis, 1-Touch-Kauf-Button direkt in der Card
  • Kauf-Flow: Produktdetail → Scan → Bezahlen → Kaufbeleg – komplett in 3 Schritten
  • Bestenliste (Leaderboard): Top-3-Podium mit Gold/Silber/Bronze-Medals + komplette Rangliste ab Platz 4
  • Profil & Statistiken: Persönliches Dashboard mit Kaufhistorie, Nährwert-Zusammenfassung, Account-Verwaltung
  • 19 Screens: vollständig verlinkt als klickbarer Figma-Prototyp

Design-Entscheidungen

1-Touch-Prinzip: Kauf-Button direkt in der Produktkarte – kein Umweg über Detailseite nötig

Tab-Bar mit 5 Tabs (Snacks/Suche/Kaufen/Best/Profil): klare Trennung der Hauptfunktionen, immer sichtbar

Leaderboard "Bestenliste" mit Podium-Visualisierung: sozialer Vergleich macht Gesundheitspunkte sichtbar und motivierend

Progress Bar für Guthaben: schnelle visuelle Rückmeldung über verbleibendes Budget ohne Rechnen

Screens

Informationsarchitektur / Screenflow: 19 Screens von Splashscreen und Anmeldung über Produktkatalog, Kauf-Flow und Bestenliste bis zu Profil, Statistiken und Kaufhistorie
Informationsarchitektur / Screenflow: 19 Screens von Splashscreen und Anmeldung über Produktkatalog, Kauf-Flow und Bestenliste bis zu Profil, Statistiken und Kaufhistorie

Wireframes

22 Screens

Start: Snacks-Übersicht mit Guthaben-Anzeige und Produktempfehlungen
Start: Snacks-Übersicht mit Guthaben-Anzeige und Produktempfehlungen
Auswahl: Produktkatalog mit Kategorie-Filter und 1-Touch-Kauf-Button
Auswahl: Produktkatalog mit Kategorie-Filter und 1-Touch-Kauf-Button
Suche: Volltextsuche mit gefilterter Produktliste
Suche: Volltextsuche mit gefilterter Produktliste
Kaufen: Kauf-Flow – Scan & Bezahlen in 3 Schritten
Kaufen: Kauf-Flow – Scan & Bezahlen in 3 Schritten
Bestenliste: Leaderboard mit Gesundheitspunkten und Rangliste
Bestenliste: Leaderboard mit Gesundheitspunkten und Rangliste
Profil: Persönliche Statistiken, Nährwerte und Kaufhistorie
Profil: Persönliche Statistiken, Nährwerte und Kaufhistorie
Wireframe Frame 1
Wireframe Frame 1
Wireframe Frame 2
Wireframe Frame 2
Wireframe Frame 3
Wireframe Frame 3
Wireframe Frame 4
Wireframe Frame 4
Wireframe Frame 5
Wireframe Frame 5
Wireframe Frame 6
Wireframe Frame 6
Wireframe Frame 7
Wireframe Frame 7
Wireframe Frame 8
Wireframe Frame 8
Wireframe Frame 9
Wireframe Frame 9
Wireframe Frame 10
Wireframe Frame 10
Wireframe Frame 11
Wireframe Frame 11
Wireframe Frame 12
Wireframe Frame 12
Wireframe Frame 13
Wireframe Frame 13
Wireframe Frame 14
Wireframe Frame 14
Wireframe Frame 15
Wireframe Frame 15
Wireframe Frame 16
Wireframe Frame 16

High-Fidelity Designs

14 finale Screens

Splashscreen: "Willkommen bei Snack Ease" mit illustriertem Food-Character
Splashscreen: "Willkommen bei Snack Ease" mit illustriertem Food-Character
Login: Anmeldebildschirm mit E-Mail und Passwort
Login: Anmeldebildschirm mit E-Mail und Passwort
Login (Variante): Onboarding-Flow für neue Mitarbeiter
Login (Variante): Onboarding-Flow für neue Mitarbeiter
Produktübersicht: Guthaben-Progress-Bar, Angebote und Empfehlungen
Produktübersicht: Guthaben-Progress-Bar, Angebote und Empfehlungen
Produktdetail: Produktbild, Nährwerte, Punkte und 1-Touch-Kauf-Button
Produktdetail: Produktbild, Nährwerte, Punkte und 1-Touch-Kauf-Button
Suche: Produktsuche mit Echtzeit-Ergebnissen und Filter
Suche: Produktsuche mit Echtzeit-Ergebnissen und Filter
Kaufen: Übersicht ausgewählter Produkte vor dem Bezahlen
Kaufen: Übersicht ausgewählter Produkte vor dem Bezahlen
Produktbestellung: Scan-Screen für den Kiosk-Barcode
Produktbestellung: Scan-Screen für den Kiosk-Barcode
Zahlung: Zahlungsbestätigung mit Guthabenabzug
Zahlung: Zahlungsbestätigung mit Guthabenabzug
Guthaben: Monatliches Budget-Übersicht (25 €) mit Verbrauchsanzeige
Guthaben: Monatliches Budget-Übersicht (25 €) mit Verbrauchsanzeige
Kaufbeleg: Detaillierter Beleg nach erfolgreichem Kauf
Kaufbeleg: Detaillierter Beleg nach erfolgreichem Kauf
Bestenliste: Top-3-Podium mit Gold/Silber/Bronze + Rangliste ab Platz 4
Bestenliste: Top-3-Podium mit Gold/Silber/Bronze + Rangliste ab Platz 4
Profil: Dashboard mit Statistiken, Nährwert-Zusammenfassung und Einstellungen
Profil: Dashboard mit Statistiken, Nährwert-Zusammenfassung und Einstellungen
Benutzerprofil: Account-Verwaltung und persönliche Daten
Benutzerprofil: Account-Verwaltung und persönliche Daten

Impact

Vollständige UX-Dokumentation: Stakeholder-Analyse, 3 Personas, Aufgabenmodell, Nutzungskontext

Screenflow mit 14 verknüpften App-Screens

Hi-Fi Wireframe-Konzept "SnackEase" abgeliefert

Assessment erfolgreich absolviert

Business Impact

Das SnackEase-Konzept zeigt einen vollständigen User-Centered-Design-Prozess für eine Consumer-App im B2E-Kontext (Business-to-Employee): von der Zielgruppenanalyse über Personas und Aufgabenmodell bis zum konkreten Screenflow und Hi-Fi-Wireframe. Besondere Stärke: das Leaderboard verknüpft Mitarbeitermotivation, Gesundheitsförderung und Wir-Gefühl in einer einzigen Funktion.

Lessons Learned

  • 1-Touch ist ein Design-Prinzip, kein Feature: die gesamte Informationsarchitektur muss darauf ausgerichtet sein
  • Vertrauenssysteme schaffen Motivation – externe Überprüfungen erzeugen Reibung und signalisieren Misstrauen
  • Gamification im B2E-Kontext: Leaderboards funktionieren nur, wenn das Grundangebot (Produkte, Preise, UX) stimmt
  • Personas müssen Nutzungskontext widerspiegeln: zeitsensible Nutzer brauchen andere Flows als gesundheitsbewusste