Payments revamp 💳
Embedded Files
B2C business case study | Year 2022
Product designer: Ikshat
Platform: iOS, Android and Web (react)
Flink (a B2C company) is an on-demand online store to deliver groceries in minutes, which is possible from their hyper-local grocery warehouses.
As of 2021, Flink delivered to up to 10 million customers at over 140 locations in more than 60 cities in Europe.
Status Quo
Flink offers different payment options for different markets
Primarily Flink offers credit cards, wallets, and bank transfers payment options to place an order
With only one payment service provider (PSP) “Adyen”, Flink is accepting all order payments across all the markets
Understanding the problem 🤷🏻♂️
HOW FLINK DO IT
Poor consistency of the flow across different platforms which leads to negative experiences.
Lower user trust levels on the payment flow as the payments are completely run by a 3rd party platform.
Users are not able to manage & delete their saved cards.
Only 5% of the total orders are placed with cards because of the lack of trust in data security.
Overview / Why do we need to improve 🤨
HOW COMPETITORS DO IT
To improve user trust levels by bringing Flink’s brand guidelines into the payment flow.
To bring higher transactions rate by supporting multiple payment service provider successes.
Providing discounts based on select payment options brings more users' interest to order.
Easy management of the saved payment options.
Before diving deep into the case studies,
I would like to share my design thinking process 🧠
used for these case studies
Top analysis of competitors review 👀
COMPETITORS
All the brands are having their brand stylised UI which brings higher user trust
Payment methods based attractive promotions to increase the usage of low performing payment options
Payment management section to edit and delete the saved payment options anytime
Strong UX copy along every payment option to provide additional context & transparency
MVP / Primary Objective ⛳️
To gain users' trust with an On The Go payment management solution where they can add, edit, remove payment options, avail special discounts based on specific payment usage and securely use saved cards for future orders.
Brainstorming design ideas 💡
Created some possible user flows to identify different possible ideas and initiate some early discussions with developers
Low-fidelity designs sketches ✍🏼
Created multiple concepts and low-fidelity wireframes to visualise how On The Go payment could work and what is feasible for an MVP
Comparative design testing ⚖️
Devs performed a POC on both Android and iOS platforms and based on their feedback, I finalized two prominent ideas of the “Add a credit card & save it” flow for comparative testing on UsabilityHub with 2 groups of a total of 60 users in Germany.
RESEARCH OBJECTIVE
RESEARCH HYPOTHESIS
The objective of this research is to compare & find out which flow will make users feel more secure when selecting payment options, saving their credit card details, and paying for the order
On top of that understand any pitfalls we might have with the current implementation
We hypothesize that by providing information about payment security during the payment process, users will feel secure saving their credit card details
We hypothesize that by having a Flink-designed payment flow, users’ trust in the payment process will increase
What we will know after this research ⁉️
Do users able to trust the new payment flow to use?
Do users feel secure enough to save their card details?
Would users use their stored credit cards for their next orders?
Some interesting test results 📄
How trustworthy did you find the new payment flow to use?
How secure did you feel paying through the card and saving it on this app?
How likely are you to save and use a card when shopping with this app?
The final solution 🤩
Based on the test results and additional feedback received from the users, we chose “Idea 2: Add a Card” iterated the designs, and prepared the final solution.
FINAL FEATURES
Renewed payments flow with Flink style guide to improve consistency & user trust
Promoting discounts based on select payment options
Direct access to payment-based vouchers and able to apply On The Go
Less cognitive load by filtering payment options based on the applied voucher
Method of “Add a card” to safely store card details and pay at the same time
Page updated
Google Sites
Report abuse