Buy now pay later is a service that allows consumers to shop online and place and receive orders while paying for them later.
The BNPL space is experiencing accelerated growth. BNPL has burst onto the scene. And is set to continue to grow in the coming years, potentially rivalling credit cards and digital wallets.
But the appearance of BNPL products is messy and unclear. We want to arrange and simplify the user experience of all BNPL market around the globe.
it’s a Fintech product, be ready for many numbers 🙂
BNPL has been the fastest growing online “payment method” globally for a second year running. Research shows that merchants can increase their conversion rates by 20% to 30% with a BNPL. Lending is predicted to hit a value of $114bn by 2024.
Of consumers in the US used a form of BNPL in 2021.
Growth in user base in 15 months.
Of BNPL users say BNPL will replace credit cards.
The average number of items users currently pay in instalments.
How do we know that customers need multiple BNPL solutions? As a merchant, if you are not offering various solutions you are simply missing out on millions of consumers:
Of Consumers Prefer Multiple BNPL Options
Of Consumers Said They Would Only Transact If Multiple Options
Consumer Crossover Between BNPL Solutions
Increase in Revenue For Merchants Offering Multiple Solutions
Maintain all aspects of product design. Create a prototypes for different concepts. Support the MVP development. Work with analytics for checking functionality of ideas.
Here are the top pain points from our top B2B customers (Merchants) about the BNPLs integrations:
BNPL, as the industry changes very frequently, new markets, new products and keeping up with the change requires a lot of technical uplifts.
Integrations to most BNPLs come with complications like multiple endpoints, other data collection to cards, varied responses with no standardisation etc.
Today, no single BNPL offers accurate market coverage covering all the major e-commerce markets.
BNPLs are still relatively new for many customers. To explain how the payments are scheduled or background checks, merchants need a clear solution.
We have asked more than 10 top merchants in the UK why they are interested in the multiple BNPLs. Let’s look at their answers:
These days, significant consumer demand forces merchants to offer competing BNPL products.
Some BNPLs specialise in specific verticals, ensuring more payment options for consumers and better conversion rates for merchants.
Some BNPLs specialise in specific verticals, ensuring more payment options for consumers better conversion rates for merchants.
Each provider offers multiple products under the BNPL umbrella, including DBTs, DDs, financing etc.
A/B Testing: Merchants adopt multiple BNPLs for cost & performance comparison.
A 2021 survey of 2,000 respondents found that 55.8% used a BNPL service. This penetration rate had increased by around 50% since a July 2020 survey.
Broken down, 62.8% of males surveyed had used a BNPL service. At the same time, 51.36% of females claimed to have used a BNPL service at some stage.
The 18-34 years age group are 3x more likely to use BNPL regularly than 55+ years. A 2021 survey revealed that 16% of 18 to 34-year-olds use BNPL.
We need a clean, modern, and simple design solution for our BNPL aggregator based on the data above. The nearest reference will be the solutions from the top BNPL players themselves. They have invested significant effort to adapt their design to the right audience.
Figma for UI, Prototypes and the design system.
Miro for product work flows, user flows, user stories, etc.
Webflow for web-based concepts and prototypes.
Cinema 4D with Octane render the 3D Illustrations.
Adobe After Effects to animate prototypes.
Hotjar & Google Analytics to collect the data for future analytics.
Figma Jam helps us discuss and adjust many things during the wireframe process with the internal team. We play with the layout and change the steps’ order and core logic. It’s still a life process:
BNPL aggregation platform designed from the ground up as a single access point to the World’s largest BNPLs. So the fundamental logic is to combine the offers for the final user properly.
Here is the introductory offer construction:
All cards are transferred to the design system with parameters for fast prototyping:
We can quickly combine hundreds of different variations of offers for other countries right in the Figma prototype.
Approval probability is an integral part of our concept, but we do not interrupt the user from the main flow; we offer a probability check as a parallel flow.
The next important part of the flow is an overview of the future payments schedule. During our tests and research, we combined different versions of it. We are still A/B testing variants for it, but these two are the most attractive and simple for users:
The final part of the flow will be a success screen and transaction cascading in case of approval failure. So it’s pretty straightforward to redirect back to the store if the the the marketing has been successful. But in case of failure, we have an excellent solution for users to apply for other providers.
It’s an intelligent cascading because we already had this provider on the previous steps, and we can quickly adjust the probability for the next try.
We were able to use only the Figma prototype for the beta testing because of the minimal amount of dev. Resources. This motivates me to prepare a Figma prototype on the top level for user testing. The main idea was to add a sense of full realism to end-user during video call interviews.
In addition to the Figma testing and prototypes, I’ve added a Webflow fast raw web page with its widget. It was broadly used by the sales and product team to collect feedback from merchants and final users.
He has a wonderful merchant portal in APEXX for all settings and analytics that you can only imagine. You can read about it in this product case. We planned a dedicated section for the BNPLs. It would cover the basic analytics, like Acceptance Rate, Total Sales, Sales Geography, etc.
This real-time data helps our clients with P1 (Speed of Change). They can easily monitor all trends connected with BNPL.
One of the core features of analytics is splitting the data by providers:
And portal helps with the P2 (Complicated Integrations) as well. At the moment, all the merchants who want to connect a new provider for their store need a tone of action done. The APIs are different as well as documentation from provider to provider, dedicate a dev team to connect all of them is a nightmare. We offer a unique way to connect new providers with just one switch.
We add an auto-adoption of your existing connected APIs (Klarna, for example) to the new provider effortless. It’s done with a simple UI switch from the settings that will start an onboarding process:
Provider’s setting also offers you many centralised tunings, like API Monitoring, Currencies Settings, Webhooks Control, Documents Approvals, etc.
Instead of going to 5-6 different administrative panels, you can change settings quickly from one place.
The BNPL currently is represented in the online space. But big offline retailers still take the most significant part of sales globally. We started to develop a concept of how we can bring the BNPLs to the big offline shops.
Lovely simple app that gives access to the BNPL Connect in-store product for merchants via consumer presented QR code.
Here are prototyped versions of the apps:
We are still in the market research stage with these flows and getting great feedback using the prototypes for big U.S. store chains.
The In-Store app has, at the moment, more than 10+ variations that we are actively testing with the product and implementation team.
And I created a swift prototype with accurate QR scanning for the demos. SwiftUI was one of my favourite code tools for native iOS prototypes. Simplicity and amount of ready to use libraries simplify prototyping significant:
One of the main goals of animating UI is to simplify the number of elements that the user sees. Here is an example of how 4 to 5 BNPL options can be combined with one small animation:
It’s a pretty simple but attractive animation, done with vanilla CSS.
The BNPL are part of the extensive atomic APEXX system. Designed for enterprise merchants to fully optimise their payments stack by integrating them to all of the most beneficial components of their payment ecosystem. The world’s first aggregation platform, providing a single access point to the rapidly expanding global APM ecosystem.
All the front-end did with React. Because this is only a growing product, I’m working with the dev team to reach an MVP level of design solutions to simplify their work and stick to realistic time limits.
APEXX has wonderful devs who are always open to new design solutions and ready to push the boundaries of standard dev. Flows. Such a rare and brilliant thing for a conservative Fintech.
One of the leading analytics points will be a click-thought rate from the product pages to the BNPLs offer and avg. Time spend on the offers page. These two numbers are indicators of success for our feature.
To combine them into one dash, we plan to add a custom Quick-side board that will work both for merchants and us to track the success of the BNPLs product. You can find a basic analytics view in the Portal Interface section here.
All the elements of the BNPL are part of the extensive APEXX design system (You can read about the creation of the APEXX design system here). BNPL Connect takes many elements like inputs, buttons, validations, etc., from the primary DS.
And the same time complements it with the BNPL’s focus elements.
All others team members can come and grab a bunch of elements from the typical design ecosystem, and I’m proud of it. Like the sales guys can add features to their deck from Figma, of web-designers for a public website can grab the BNPL’s icons in seconds.
The systematic approach always takes more time and effort, but you start to appreciate the fruits of DS with time.
Most of the analytics we got here are from the web demo and Figma prototype. But, this can be more than enough in many cases. We can see here that all the elements are reachable for use accessible. Looking at the content drill-down map, we can say that users stick to the predicted flows and reach the final point in 80% of cases.
We have recorded many video sessions with potential BNPLs customers from https://www.usertesting.com
*I’m waiting for approval to show this session here.
The main idea of user interviews is not about what people will say about the product. They honestly want to help and try their best. The main thing in the user session is to look at how real people use the product.
Look at their assumptions, misclicks, confessions, etc. The real-world behaviour can tell more than 1000 words, and it’s a privilege to have an opportunity to collaborate with actual customers of your product. As you can see from the videos, 90% of the time user is confident in all the actions and go straight through the predicted flow. The main inside of the user interview was a schedule of payments, UI changes, and text (copyright) fixes.
That 100% brings more clarity for future versions of the BNPL product.
The Fintech products cab be cool, but until they are simplified for the end-user, their future will be doomed. All great ideas that get financial profit for a user need a clear explanation of how they do so.
The aggregation of the different payment options needs a good UX layout representation. To reduce the pressure of the number of elements on the page.
Integration with 3rd party platforms can be tricky for users because of the number of redirects that he or they experience. The design should consistently articulate the current state and statuses of transactions.
