Bluecode

Bluecode ist eine Mobile-Payment-App für girokontobasierte Zahlungen ohne Kreditkarte. Sie bietet Datenschutz, Sicherheit sowie Vorteile wie Rabatte und Cashback. Die App eignet sich für Nutzer:innen im Einzelhandel, an Tankstellen oder in Freizeiteinrichtungen sowie für Händler als kostengünstige Kartenzahlungs-Alternative.

Challenges

Rückbesinnung auf Nutzer:innen mit einer wachsenden Zahl von Funktionen

Bluecode hat sich über die Jahre stark weiterentwickelt und sein Funktionsspektrum kontinuierlich erweitert. Dies führte jedoch zu einem komplexen Produkt, welches an Benutzerfreundlichkeit eingebüßt hat.

Challenge I – Optimierung der Payment-Funktion​
Eine intuitive, nutzerfreundliche Integration neuer Payment-Optionen in ein bestehendes Ökosystem mit technischen Abhängigkeiten sowie die Herausforderung, den Mehrwert und die Funktionsweise der neuen Zahlungsmethoden verständlich an die Nutzer:innen zu vermitteln.​

Challenge II – Umsetzung eines Services Beyond Payment ​
Bluecode möchte seine Nutzer:innen nicht nur mit der Bezahlfunktion überzeugen, sondern auch mit zusätzlichen Services. Daher war es entscheidend, das beste „Service Beyond Payment“-Konzept zu identifizieren und dieses nahtlos in den bestehenden Bezahlprozess zu integrieren.

Kunde

Bluecode

Services

UX Audit, Customer Insights, Ideation, UX/UI Design, Product Design

Datum

2024

Projekt-Link

Challenge I・Optimierung der Payment-Funktion ​

Problemdefinition auf Basis explorativer Forschung​

Zu Beginn der Discovery-Phase werteten wir existierende Fokusgruppen und Nutzer:innen Interviews aus, um aktuelle Herausforderungen und Probleme mit der Bluecode-App zu identifizieren.

In einer darauffolgenden Co-Creation-Session definierten wir gemeinsam mit dem Produktteam von Bluecode Herausforderungen und Anforderungen. In Flow-Diagrammen skizzierten wir anschließend bestehende Prozesse und analysierten Optimierungspotenziale.

visual representation of working material being developed to conceptualize and define the app structure
the main function, the merchant search on a mobile screen as well as two other design alternatives , developed thorughout the course of the project

Challenge I・Optimierung der Payment-Funktion ​

Ideation & Wireframing auf Basis von Co-Creation

Basierend auf den Co-Working-Sessions entwickelten wir zunächst Wireframes, die in Co-Creation mit dem Bluecode-Design-Team verfeinert wurden.​ In den finalen Prototypen reduzierten wir durch die intuitive Integration verschiedener Zahlungsoptionen die Komplexität und kognitive Belastung. Zudem erstellten wir diverse Interaktionsmöglichkeiten, um die optimale Zahlungsoption zu identifizieren.

Four mobile screens displaying variants of the payment function: the firs-one describing a wheel-like payment selection, the second and third one describe two variants for horizontal swiping, the forth one describes a wallet like payment option
a photo displaying all the parties being involved in the testing process, from test person, to researcher, to the seller simulating the interaction as well as two people documenting the process and simulating the cashier-interaction in real time

Challenge I・Optimierung der Payment-Funktion ​

Feedback mittels kontextbasierter User-Research

Um Rückmeldungen auf Basis einer authentischen Interaktion zwischen Nutzer:innen und dem Prototypen zu erhalten, setzten wir auf realitätsnahe Tests: ​

Wizard-of-Oz-Testing: Wir testeten die neuen Zahlungsprozesse mit echten Bluecode-Kund:innen an einer simulierten Kasse, um das Checkout-Verhalten sowie verschiedene Flows realitätsnah zu analysieren.​

Undercover-Tests: Um die Verständlichkeit der neuen Funktionen für Kassierer:innen zu prüfen, testeten wir die Prototypen in echten Geschäften und deckten potenzielle Hürden und blinde Flecken auf.​

Das Test-Feedback wurde kontinuierlich in den Flow integriert und die Prototypen durch weitere User-Tests verfeinert. Die überarbeiteten Designs wurden anschließend in die Bluecode-App integriert.​

Challenge II・Umsetzung eines Services Beyond Payment ​

Definition & Priorisierung Services Beyond Payment ​

Für unsere zweite Challenge führten wir eine Wettbewerbsanalyse durch. Diese half uns zu verstehen, welche Services bereits im Umlauf sind um potentielle „Services Beyond Payment“ zu identifizieren und definieren.

​Unser User-Research-Team führte eine In-App-Umfrage unter 132 aktuellen Bluecode-Nutzer:innen durch, um die wichtigsten „Service Beyond Payment“-Funktionen zu priorisieren und das USP von Bluecode zu schärfen. Die Umfrage lieferte wertvolle Einblicke in Nutzungstreiber und -barrieren und half, eine Roadmap für die Weiterentwicklung zu erstellen. Das Ergebnis: Die digitale Loyalty-Karte zum Sammeln von Punkten und Boni war für die Nutzer:innen am attraktivsten.​

a screenshot of the suer research tool used to conduct the customer survey to get insights on customers loyalty expectations
a visual of three mobile screens of the designed loyalty flow, stacked on-top of each other

Challenge II・Umsetzung eines Services Beyond Payment ​

Nahtlose Integration digitaler Loyalty-Karten​

Nach der Definition des digitalen Loyalty-Kartenkonzepts als Favorit in der User-Survey führten wir eine Wettbewerbsanalyse und ein Audit zur Verwendung und Integration dieser Funktion durch. ​

Die Herausforderung war die nahtlose Integration der Loyalty-Karten und Checkout-Interaktionen in den Bezahlprozess, sodass Loyalty-Nutzer:innen ihre Punkte einfach sammeln können. Dafür erstellten wir Wireframes, die in interaktive Prototypen überführt wurden. ​

Wir testeten die neuen Funktionen mit aktuellen Nutzer:innen digitaler Loyalty-Karten, verglichen alternative Designs mittels A/B-Testing und passten den finalen Prototypen basierend auf dem Feedback an.​

a foru-screen-step-flow for the payment process of users owning a loyalty card: the first screen automatically selects the right loyalty card, the second one let's the users manually select the right merchant card, the third one let's the users manually select the right payment method, the fourth one is a payment success screen with further options for the user

Farben

#004899

#1d6de4

#112953

#e0f265

#fbfbfb

Schrift

Outfit

A Á B C D E É F G H I Í J K L M N O Ó Ö Ő P Q R S T U Ú Ü Ű V W X Y Z

a á b c d e é f g h i í j k l m n o ó ö ő p q r s t u ú ü ű v w x y z 1 2 3 4 5 6 7 8 9 0

Aa

Light

Aa

Regular

Aa

Bold

Der kleine Prinz ging zu den Rosen zurück: "Ihr seid meiner Rose überhaupt nicht ähnlich, ihr seid noch nichts", sagte er zu ihnen. Niemand hat euch gezähmt, und ihr habt niemanden gezähmt. Ihr seid, wie mein Fuchs war. Er war nur ein Fuchs wie hunderttausend andere. Aber ich habe ihn zu meinem Freund gemacht, und jetzt ist er einzigartig auf der Welt".

Erkenntnisse

Nutzerzentrierte UX/UI-Entwicklung als Erfolgsfaktor

Unsere Zusammenarbeit mit Bluecode basierte auf kontinuierlichen Nutzertests. Jede Design-Iteration wurde durch Nutzer:innen validiert – mithilfe verschiedener Methoden und oft mit mehreren Konzepten pro Testphase um die ideale Lösung zu verfolgen. ​Dank der frühen Tests und Umfragen stellten wir sicher, dass die entwickelten Lösungen stets den tatsächlichen Bedürfnissen der Nutzer:innen entsprachen. ​Zusammenfassend lässt sich sagen: Bluecodes Engagement für eine wirklich nutzerzentrierte Erfahrung prägte die Zusammenarbeit und legte die Grundlage für eine nutzervalidierte User Experience.​

an extract of two mobile screens from the app's payment user flow

Einige unserer Arbeiten

Checken Sie unser Portfolio

Einige der bemerkenswerten Erlebnisse, die wir bereits in Zusammenarbeit mit unseren Kund:innen geschaffen haben.

Coming Soon!

Im Moment können wir noch keine Informationen zu diesem Projekt bekannt geben. Wenn Sie sicher gehen wollen, dass Sie nicht verpassen, wenn wir es veröffentlichen, schicken Sie uns eine E-Mail