Product
The payment widget is core feature of B2B dashboard: prime interface for accepting payments. Using it, business owners receive crypto and fiat from their clients, and we receive a commission from their payments.
The widget can be used independently or can be integrated via API, for example: in the checkout flow in online store to accepts crypto payments.
Desktop
Embed
Task
•
Redesign the widget
•
Increase the metric of successful payments
•
Decrease time to goal
•
Decrease percent of errors
in selecting coins and networks
•
Decrease the number of support requests
regarding returns
•
Improve the mobile version
•
Update and implement the DS components
Success criteria
•
Improvement of the metric time to value
•
Improvement of the successful payment metric
•
Improving mobile conversion
•
Decrease errors caused by selecting the incorrect network
•
Decrease refunds support requests
My role
•
Conducted a review of the current version
•
Prepared hypotheses
•
Made quick changes and tested the hypotheses
•
I finished the scripts and all the layouts
•
Reduce the number of support requests
regarding returns
•
Collected and implemented a UI kit for the new implementation
•
Increased the efficiency and performance of the product
Goals
Time to value
-49%
Successful payments
+27%
Mobile conversion
+14%
Errors with the coin
-72%
Support requests
-90%
regarding the refund
Problems
Our research identified a set of critical problems that were dragging down transaction conversion metrics resulting in measurable business losses.
I explored the issues, ran a product audit, and organized the key pain points by screen to surface the most critical.
AS IS
Coin selection
V 1.0
Desktop
Mobile
Embed
Issues
•
V 1.0
The metrics revealed a high number of errors during BTC/BCH payments. Our hypothesis was that users were getting confused by BTC and BCH due to similar icons and unclear naming.
Lack of time to value metric
Lack of mobile conversion
A high volume of support inquiries related to refunds
Unclear UI for embed checkout via API
It was
Payment v 1.0
Issues
•
V 1.0
This screen had the highest churn indicator the root cause was unclear
Based on support requests, we found that some beginner users struggled to understand how to copy the payment details.
The sales team reported that the outdated UI negatively impacts how clients perceive the product.
Iteration 01
V 1.2
Rather than making radical changes upfront and risking conversion, I started step by step fixing as-is flow and testing a few hypotheses in parallel.
We made a hot fix with BTC/BSH transactions. Simple replaced the coin icons and improve UX texts.
TO BE
Coin selection
V 1.2
Desktop
Mobile
Embed
Goals
•
V 1.2
The BTC/BCH hypothesis was confirmed: improving iconography and naming decrease errors in coin and network selection by 59%
Improvements to the icons also shifted the time value,
reducing it by 12%
Intermediate result:
Payment screen was also improved via
minor updates in this iteration
Payment v 1.2
TO BE
Goals
•
V 1.2
By adding benchmark icons to the payment screen we made copying easier, reducing refund-related support requests by -11%
Successful payments: +7%
Intermediate result:
Overall, the successful changes and hypotheses have been confirmed; however, a number of important issues still remain
Conclusions
We received not bad result, but not all the issues has gone.
We managed to create another version of design to compare
two versions and achieve better UX.
Coin selection v 1.2
AS IS
Issues
Still not super good time to value
There were still requests to support about refunds
Lack of mobile conversion. Hypothesis: this is because user see only five coins on the screen
Unclear UI for embed checkout via API
Payment v 1.2
AS IS
Issues
This screen had the highest churn indicator (we still didn’t understand why)
The copying errors din't go completely. We saw in support
that some users were copying the address under the QR code 🤦🏻♂️
The outdated UI has also remained.
Iteration 02
V 2.0
After analyzing the intermediate results, the crew managed launch another version of widget to compare the designs in a split test.
TO BE
Coin selection v 2.0
Desktop
Mobile
Embed
Decision
01
The new layout become mobile-first, it bring more clearity for the embed API version.
02
We've replaced cells to the dropdown and suggestion included three most popular coins to speed up your selection process
at the start.
03
First step it's a coin selection field appeared, and then the field with the network: this step-by-step approach eliminated unnecessary issues with nubian users 🐹
Goals
Time to value: -49%
Errors with coin and network selection: -72%
Payment v 2.0
TO BE
Insight!
Decision
01
After analyzing behavioral indicators, we identified that our auto-redirect logic was triggering a bounce reflex among MetaMask users. We’ve since pivoted from an automated hand-off to a user-initiated button.
02
We removed the address displayed below the QR code to discourage manual copying and minimize the risk of errors by missing characters
03
I test the copy buttons in rapid corridors with my colleagues: for 8 out of 10 respondents it was clearity that clicking will copying text
04
The merchant's logo was placed inside the QR code so that the payer could associate the payment scenario and better understand who they are sending the transfer to.
Goals
Successful payments: +27%
Mobile conversion: +14%
Return
NEW
Decision
01
The refund journey was overly complex and fully manual: user requests were routed through merchants to our team, where each case required individual review and manual processing creating friction for both users and operations.
02
We added an email screen at the flow start and now with that case the user can initiate refund process themselves.
Goals
Support requests regarding refunds: -90%
Goals
A month later, we compared the metrics of the two versions and confirmed that the performance of the new version is significantly better, the overall result improved business indicators.
Besides the desktop version, the mobile and embed versions turned out to be quite successful, and we also received positive feedback from our sales team!
V 1.2
Goals
Time to value: -12%
Successful payments: +14%
Mobile conversion: -
Contacting support
regarding the refund: -11%
Errors with coin
and network selection: -59%
V 2.0
Goals
Time to value: -49%
Successful payments: +27%
Mobile conversion: +14%
Inquiries to support
regarding the refund: -90%
Errors with coin
and network selection: -72%
Success metrics
Time until the goal
-49%
Successful payments
+27%
Mobile conversion
+14%
Errors with the coin
-72%
Support requests
-90%
regarding the refund
Conclusions
This case highlights the power of a data-driven, iterative design approach in crafting meaningful and high-impact user experiences.
Through thoughtful research and well-crafted hypotheses, we not only elevated customer satisfaction but also delivered measurable outcomes that drive sustainable business growth.
