Phase 2 · Consumer · Wireframes v1

Mia's Flow

U-3 Start · U-5 Wallet · U-6 QR-Einlösung · U-2 Lockscreen-Push. Vier Screens, gleiche Karten-Sprache wie U-4, gleiche 3-Sekunden-Disziplin.

Phase 2 · for review
app.citywallet.de/wallet
City Wallet — Consumer
+
⇄
U-3Start · ContextState + Live-Angebot
14:30
City Wallet · Stuttgart

Hi Mia

Dienstag, 14. Oktober · 14:30

Jetzt für dich

in Echtzeit
Wetter
8 °C, Regenleichter Schauer
Ort
KönigstraßeAltstadt
Intent
Du bummelstlangsam
In der Nähe
12 Partner< 200 m

Live-Angebot

noch 14 Min.
340×200
Draußen kalt · 8 °C

Cappuccino

Café Müller· 80 m· −20 %
U-5Wallet · Cashback + aktive Angebote + Verlauf
14:30
City Wallet · Wallet
Oktober
Dein Cashback
12,40 €
diesen Monat gesammelt

Verlauf

letzte 30 Tage
Apotheke am Markt 12. Okt · 09:14
+ 0,50 €
Café Müller 10. Okt · 14:42
+ 0,80 €
Bäckerei Klein 07. Okt · 08:03
+ 0,60 €
U-6QR-Einlösung · Vollbild + Countdown
14:30
Live · 1 Code
Café Müller

−20 % Cappuccino

Gültig noch
00:14:32
Zeig diesen Code an der Kasse.
Nach dem Scan geht es automatisch zurück zum Wallet.
U-2Lockscreen · Push-Banner (statisch)
14:30
Dienstag, 14. Oktober
14:30
CW
City Wallet jetzt

Draußen kalt? Dein Cappuccino wartet schon.

Händler Café Müller
Distanz 80 m
Rabatt −20 %
Nach oben wischen zum Öffnen
Judgment calls · please review
Stellen, an denen ich frei entschieden habe
  • U-2 Banner-IconSpec sagte "kleines rotes Quadrat mit weißem S" — das ist der geschützte Sparkassen-S-Logo. Ich habe stattdessen ein rotes App-Icon mit "CW"-Wortmarke (City Wallet) gerendert. Tausch sofort möglich, sobald die Markenfreigabe vorliegt.
  • U-3 Tile-IconsSpec nennt cloud / pin / walking / shop. Walking ist als Person-mit-Schritt stilisiert (2-px-Stroke, geometrisch). Wenn du eine andere Lesart von "Intent" willst (z. B. Augen-Icon für Browsing), Bescheid sagen.
  • U-3 Datum-ZeileHabe unter "Hi Mia" eine Mono-Datumszeile "Dienstag, 14. Oktober · 14:30" gesetzt. Steht nicht in der Spec, gibt aber Mia einen Anker. Kann raus.
  • U-5 Balance-KarteHabe einen schwarzen Balance-Container gewählt (nicht rot) — das Geld ist nicht das Brand-Signal, sondern Mia's Asset. Roter Fortschrittsbalken markiert den Cashback-Anteil ohne Brand-Inflation.
  • U-5 Validity-StringsSpec gab "Heute gültig" und "Gültig bis 18:00". Ich habe bei Café Müller "Heute gültig · noch 14 Min." gewählt, weil der Card-Kontext sonst dem Live-Angebot aus U-3 widerspricht. Tausch trivial.
  • U-5 QR-ThumbnailAuf den Wallet-Karten ein 40×40 QR-Thumbnail rechts — macht "tap-zum-öffnen" lesbar, ohne extra Button. Steht nicht in der Spec.
  • U-6 "Live · 1 Code"-PillOben rechts auf dem QR-Screen, weil sonst der QR ohne Status auftaucht. Sag Bescheid wenn raus.
  • U-6 Hint-TextSpec: "Zeig diesen Code an der Kasse". Ich habe einen zweiten Satz "Nach dem Scan geht es automatisch zurück zum Wallet." ergänzt. Falls zu viel, kürze ich auf einen Satz.
  • U-2 WallpaperGenerischer dunkler Verlauf + angedeutete Stuttgart-Skyline-Streifenmaske im unteren Drittel — als Platzhalter. Kein echtes Stadtbild.
  • U-2 Banner-LayoutVariante 04 "Poster" gewählt — Headline groß, drei Mini-Spalten (Händler / Distanz / Rabatt) unter Trennlinie. Bauhaus-Plakat-Logik. "Noch X Min." entfernt.
Tokens · Pattern-Konsistenz
Was alle vier Screens teilen
  • HeaderIdentisch zu U-4: rotes Quadrat + Wortmarke + Stadt-Sublabel · Icons in --text-secondary, 1.75 Stroke
  • Section heading13 px Semibold uppercase + Letterspacing 0.06em + Mono-Meta rechts
  • Compact-Card (U-3)Halbiert die Höhe der U-4-Hero-Card, behält Strip + Pill + Headline + Meta. Tap → U-4-Vollversion.
  • Tabbar3-Slot-Grid, aktiv = --brand-red + 4-px-Dot, inaktiv = --text-tertiary
  • Tabular numerals--font-feature-numeric überall wo Zahlen (Cashback, Countdown, Distanzen)
  • Countdown-Farbe--warning (#FF8A3D) — nur hier, nicht für andere Akzente. Konsistent zu U-4.
  • Lockscreen-BannerGlass über dunklem Wallpaper — einzige Stelle, wo Glas erlaubt ist (System-Convention von iOS, kein Branding-Glas).
Markennutzung — fortgeführt: Wie schon in U-4 verwende ich das rote Quadrat als App-Mark statt des geschützten Sparkassen-S-Logos. Im U-2 Banner heißt das Icon "CW" — sobald die offizielle Marke freigegeben ist, lässt sich das App-Icon ohne Layout-Änderung tauschen. Alle anderen Tokens (Rot, Inter, 8-pt-Grid, Radii, Schatten) entsprechen 1:1 dem Design-System.