Loyalty Programm

Shoppen und Loyalty-Punkte sammeln, vor Ort und unterwegs.

Mit Schnittstellen zum Mehrwert

Analog und digital Punkte sammeln

Metro Boutique kam mit dem Auftrag zu uns eine zweisprachige Loyalty App für iOS und Android zu konzipieren. Mit Emarsys Loyalty hatten sie sich dazu bereits ein fertiges Loyalty-Program lizenziert, welches es zu implementieren galt. Es ermöglicht Nutzerinnen Punkte zu sammeln und diese gegen eine Belohnung, z.B. einen Rabatt, einzulösen. Zur Darstellung der gesammelten Punkte und Aktivitäten wird ein Widget verwendet, welches über die API von Emarsys auf mobile integriert wurde.

Damit Kunden Loyalty-Punkte auch im Laden beziehen und einlösen können, wurde die Schnittstelle des ERP-Systems von Metro Boutique angepasst. Durch das Abschiessen eines QR-Codes in der App kann jedes Kassensystem in den Metro Boutiquen eine Kundin identifizieren und die Loyalty Benefits entsprechend anzeigen. Mit derselben Schnittstelle haben wir kurzerhand auch die Auflistung aller Kassenzettel im Kundenkonto integriert. Nebst dem Loyalty System und den Kassenzetteln, wurde in Workshops diskutiert, wie mit der App noch mehr Mehrwert geboten werden kann. Mit der zeitgleichen Lancierung des neuen Webshops fiel der Entscheid auf die Möglichkeit Bestellungen direkt im Webshop vornehmen zu können.

Produkte direkt in der App favorisieren und bestellen

Kunden können in der App Produkte favorisieren, im Warenkorb speichern oder direkt im Webshop bestellen. Damit alle drei Schnittstellen (ERP, Webshop und Loyalty) immer vom gleichen Nutzer sprechen, haben wir einen «unique identifier» definiert, welcher beim erstmaligen Registrieren direkt erstellt und an alle notwendigen Systeme kommuniziert wird. Dadurch muss sich die Nutzerin nur einmal registrieren und kann danach «seamless» zwischen den verschiedenen Funktionalitäten wechseln.

Dank den diversen Schnittstellen hat Metro Boutique die Möglichkeit direkt im CMS Produkte aus dem Webshop auszuwählen und auf der Home der App darzustellen. Als Framework wurde Wagtail Headless integriert. Über die Schnittstelle zum ERP-System werden die Metadaten ins Backend gezogen und entsprechend auf der Home der App angezeigt. Das Layout für die App haben wir in mehreren Schritten konzipiert.

Wireframes, Prototypen und das fertige Design

Nachdem wir mit dem Kunden die nötigen Darstellungselemente ermittelt haben, hat unser Interaction Designer Wireframe-Elemente gezeichnet und ausgedruckt. Die ausgedruckten Elemente wurden auf verschiedene Arten arrangiert um herauszufinden, ob alle nötigen Kombinationen abgebildet werden können. Damit konnten allfällige Duplikate erkannt und möglichst stringente Elemente für die Programmierer designed werden. Basierend auf den finalen Wireframes wurde mit Figma ein Prototyp erstellt und dem Kunden zur Abnahme vorgelegt.

Basierend auf dem abgenommene Prototypen wurde danach die finale App von unseren Entwicklern inhouse programmiert. Das Resultat ist eine beliebte Loyalty-App, die Metro Boutique viele Möglichkeiten für die Vermarktung ihrer Produkte bietet.

Jetzt für Android oder iOS herunterladen: