Bluecode

Bluecode is a mobile payment app for current account-based payments that do not use a credit card. It offers data protection, security and benefits, such as discounts and cashback. The app is a cost-effective card payment alternative; suitable for retail, petrol station and leisure facility payments, as well as for merchants.

Challenges

Refocusing on Users after Expanded Number of Functions

Bluecode has developed considerably over the years and continuously expanded its range of functions. However, this has resulted in a complex product that had lost some of its user-friendliness.

Challenge I – Optimizing the Payment Function:
Carrying out an intuitive, user-friendly integration of new payment options into an existing ecosystem with technical dependencies, and overcoming the hurdle of communicating the added value and functionality of the new payment methods to users in an understandable way.

Challenge II – Implementing “Beyond Payment” Service:
Bluecode wants to attract its users, not only with the payment function, but with additional services too. It was crucial, therefore, to identify the best “Beyond Payment” service concept and integrate it seamlessly into the existing payment process.

Client

Bluecode

Services

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

Date

2024

Project link

Challenge I・Optimization of the Payment Function

Problem Definition Based on Explorative Research

At the beginning of the discovery phase, we analyzed existing focus groups and user interviews to identify current challenges and problems with the Bluecode app.

In a subsequent co-creation session, we defined challenges and requirements in conjunction with the Bluecode product team. We then outlined existing processes in flow diagrams and analyzed potential for optimization.

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・Optimization of the Payment Function

Ideation & Wireframing on the Basis of Co-creation

We initially developed wireframes – based on the co-working sessions – that were refined in co-creation with the Bluecode design team. In the final prototypes, we reduced complexity and cognitive load by intuitively integrating various payment options. We also created various interactive options to identify the optimal payment method.

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・Optimization of the Payment Function

Feedback Through Context-based User Research

We relied on realistic tests for obtaining feedback based on authentic interaction between users and the prototype,

Wizard-of-Oz Testing: We tested the new payment processes with actual Bluecode customers at a simulated checkout, creating an authentic environment from which to analyze checkout behavior and various flows.

Undercover Testing: We placed the prototypes in real shops to test the comprehensibility of the new functions for cashiers, and to uncover potential hurdles and blind spots.

The test feedback was continuously integrated into the flow, and the prototypes were refined through further user tests. The revised designs were then integrated into the Bluecode app.

Challenge II・Implementation of "Beyond Payment" Service

Definition & Prioritization of "Beyond Payment" Service

For Challenge II, we conducted a competitive analysis to identify and define potential “Beyond Payment” service features already in use.

Our user research team conducted an in-app survey of 132 current Bluecode users to prioritize the most important “Beyond Payment” service features, and to sharpen Bluecode’s USP. The survey provided valuable insights into usage drivers and barriers, and also helped create a roadmap for further development. The result: the digital loyalty card for collecting points and bonuses proved the most attractive to users.

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・Implementation of "Beyond Payment" Service

Seamless Integration of Digital Loyalty Cards

Digital Loyalty Cards UX Audit: After defining the digital loyalty card concept as a favorite in the user survey, we carried out a competitive analysis and an audit with regard to the use and integration of the loyalty function. 

The challenge was to seamlessly integrate the loyalty cards and checkout interactions into the payment process, so that loyalty users can easily collect their points. To do this, we created wireframes that were transformed into interactive prototypes. 

Usability Testing & Iteration: We tested the new features with actual digital loyalty card users, compared alternative designs using A/B testing and adapted the final prototype based on the feedback.

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

Colors

#004899

#1d6de4

#112953

#e0f265

#fbfbfb

Font

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

The little prince went to see the roses again: "You are not at all like my rose, you are nothing yet", he said to them. No one has tamed you and you have tamed no one. You are like my fox was. It was only a fox like a hundred thousand others. But I have made him my friend, and he is now unique in the world."

Learnings

User-Centered UX/UI Development as a Success Factor

Our collaboration with Bluecode was based on continuous user testing. Each design iteration was validated by users – using different methods and often with multiple concepts per test phase – to track the ideal solution. Thanks to early testing and surveys, we ensured that the developed solutions always met the actual needs of users. To summarize: Bluecode’s commitment to a truly user-centric experience shaped the collaboration and laid the foundations for a validated user experience.

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

Some of our work

Check out our portfolio.

Some of the memorable experiences that we already created together with our clients.

Coming Soon!

We can’t disclose any information regarding this project for now. If you want to be sure not to miss it when we publish it, drop us an email