Mobile: Loyalty

Kontext

MENU Loyalty ist so konzipiert, deine Kunden langfristig zu binden, indem du sie durch ein ausgabenbasiertes Programm belohnst. Um ein attraktives Erlebnis zu kreieren, solltest du dein Loyalty-Programm konfigurieren und deine Belohnungen anhand unserer Richtlinien und deiner spezifischen Bedürfnisse individuell gestalten.

Loyalty-Währung

Die Loyalty-Währung bzw. Punkte werden von den Benutzern gesammelt und zum Kauf von Belohnungen verwendet. Wie jede andere Währung hat auch diese Währung ihr eigenes Symbol. Du solltest dieses Symbol in einem Container von 24x24px erstellen.

Die Figma-Vorlage dazu findest duhier.

Diese Bilder werden verwendet für:

• Loyalty-Karte
• Anzeige der Anzahl der Punkte am Startbildschirm
• Mini-Loyalty-Karte am Startbildschirm
• Anzeige der Anzahl der Punkte im Fenster Belohnungen / Angebote
• Anzeige der Anzahl der verwendeten Punkte im Fenster Zusammenfassung
• Die Anzahl der Punkte, die der Benutzer im Fenster Zusammenfassung erhält
• Anzeige der Anzahl der ausgegebenen oder verdienten Punkte im Belegsbildschirm

Anforderungen

• Größe des Bildcontainers: 24x24px
• Bildformat: SVG
• Name: coin.svg

Hintergrund der Loyalty-Karte

Die Loyalty-Karte dient dazu, grundlegende Informationen eines Benutzer anzuzeigen, z.B. die Anzahl seiner Punkte, die erreichte Stufe etc. Sie dient aber auch zum Sammeln von Punkten an der Kasse oder am Kiosk.
Die Figma-Vorlage dazu findest du hier.

Heller und dunkler Hintergrund

Wenn du einen dunklen Hintergrund wählst, verwendet die App weiße Schrift, und wenn du einen hellen Hintergrund wählst, verwendet die App schwarze Schrift. Deshalb ist es wichtig, den Hintergrund dunkel oder hell genug zu gestalten, damit der Text gut lesbar ist.

Verwendet für die

• Vorderseite der Loyalty-Karte
• Rückseite der Loyalty-Karte (beim Sammeln von Punkten)

Anforderungen

• Bildgröße: 1200x807px
• Bildformat: PNG
• Name: cardbg.png

Bitte beachte: Denk daran, dass du keine grafischen Elemente auf diesem Hintergrund platzieren darfst, da sie die Informationen auf der Karte beeinträchtigen würden. Wir empfehlen, einfache Farben und Farbverläufe zu verwenden.

Kompakter Hintergrund der Loyalty-Karte

Die kompakte Loyalty-Karte wird verwendet, um Informationen über die Anzahl der Punkte und die erreichte Stufe auf dem Startbildschirm anzuzeigen.

Die Figma-Vorlage dazu findest duhier.

Kompakter heller und dunkler Hintergrund

Noch einmal: Wenn du einen dunklen Hintergrund wählst, verwendet die App weiße Schrift, und wenn du einen hellen Hintergrund wählst, verwendet die App schwarze Schrift. Achte darauf, dass der Kontrast zwischen dem Hintergrund und dem Text, den du in der App einfügst, ausgeglichen ist, um ihn lesbar zu machen.

Verwendet für:

• Kompakte Loyalty-Karte am Startbildschirm

Anforderungen

• Bildgröße: 1200x433px
• Bildformat: PNG
• Name: compact_cardbg.png 

Logo der Loyalty-Karte

Falls deine App die Möglichkeit bietet, Loyalty-Punkte an der Kasse oder am Kiosk zu sammeln, ist in der App eine Rückansicht der Loyalty-Karte des Kunden mit dem entsprechenden QR- oder Barcode enthalten. Neben diesem Code wird das Logo deiner Marke angezeigt.

• Wenn du einen dunklen Hintergrund für deine Loyalty-Karte verwendest, verwende die negative Version deines Logos (hell/weiß).
• Wenn du einen hellen Hintergrund für dein Loyalty-Karteverwendest, benutze die normale Version deines Logo.

Die Figma-Vorlage dazu findest duhier.

Anforderungen

• Bildgröße: 
• Maximale Höhe: 36px
• Maximale Breite: 89px
• Bildformat: SVG
• Name: loyalty_card_logo.svg

Bilder zur Programmbeschreibung

Bilder zur Programmbeschreibung machen Informationen verständlicher und einprägsamer. Jedes Bild gehört zu einem Absatz, der eine Information über das Programm enthält. Die maximale Anzahl von Absätzen ist 3.

Die Figma-Vorlage dazu findest duhier.

Verwendet für die

• Infoseite zum Loyalty-Programm

Anforderungen

• Bildgröße: 224x224px
• Bildformat: PNG
• Namen: 
• loyalty_desc_heading1.png 
• loyalty_desc_heading2.png
• loyalty_desc_heading3.png

Symbole

Du solltest deine Loyalty-Symbole so gestalten, dass sie mit den anderen Symbolen in der App übereinstimmen, aber auch dem Stil deiner Marke entsprechen. Die Symbole sollten den Namen und die Funktion darstellen, die sie in der App haben.

Du findest diese Symbole in den beiden Sets Dünner und Fetter im Abschnitt Loyalty.

Anforderungen

• Symbolgröße: Unter jedem Symbol im Bild definiert
• Format: SVG
• Korrekte Namensgebung

Startbildschirmbilder mit Loyalty

Diese Bilder werden als Willkommensbild auf der Homepage deiner App verwendet. Du kannst zwischen einem normalen und einem kompakten Startbildschirmbild wählen.

Bitte beachte: Es ist sehr wichtig, dass du keinen Text oder ein Logo außerhalb des sicheren Bereichs platzierst, da es von der Schaltfläche, der  Statusleiste und der Loyalty-Punkte-Komponente verdeckt wird.

Achtung: Für Marken mit Loyalty ist der sichere Bereich anders. Bitte prüfe die Anforderungen an den Startbildschirm unter Startbildschirmbilder.

Startbildschirm normales Bild

Anforderungen

• Bildgröße: 1125x1665px
• Sicherer Bereich: 1125x1026 px
• Format: PNG, JPG
• Dateiname: hero_image.png

Startbildschirm kompaktes Bild

Anforderungen

• Bildgröße: 1125x996px
• Sicherer Bereich: 1125x357 px
• Format: PNG, JPG
• Dateiname: hero_image_compact.png

Hervorgehobene letzte Stufe der Belohnungen

Wenn deine Belohnungen in Stufen organisiert sind, kannst du die letzte Stufe optisch hervorheben (du markierst sie in der App). Wenn du diese Funktion nutzt, solltest du das Symbol für die letzte Stufe wie in der Abbildung unten verwenden.

Anforderungen

• Symbolgröße: 32x32px
• Format: SVG
• Dateiname: final_tier.svg