To improve the UX of the donation checkout flow of a decentralised microdonation service
Micropayment is a digital transaction that involves a small sum of money in exchange for products and/or services available online.
Although this type of payment has become more common recently, only a few platforms provide a tailored experience to specific use cases, such as micropayments for donations and subscriptions.
StablePay aims to address this gap by building a platform that is designed specifically for the microdonation use case, which enables users to send and receive multiple cryptocurrencies instantaneously. It also gives the user the ability to freeze the price when the transaction occurs. The platform is designed to help users sidestep a high price volatility by using an instant exchange between selected cryptocurrencies and stablecoin, which has a USD price-pegging feature.
Making a transaction on the web3 is lacky and not very user-friendly when compared to web2. On average, each transaction takes more than three minutes. This process may be tolerable for a high-volume transaction, but it is a deal breaker for a smaller transaction.
Although most of the applications built on the web3 stack are based on the same technology, the duration for each transaction varies from application to application and from one user to another. Therefore, it is apparent that there are other contributing factors influencing the transaction speed besides the limitation of the protocol itself. This could be improved by introducing an alternative UX pattern.
I carried out UX research that consisted of four in-depth user interviews, two user-testing sessions, and an analysis of the collected analytics. The research indicated a few UX issues that hinder the low transaction speed, which are: action prioritisation as users were distracted by less important actions before reaching the main CTA and the need to sign off on one transaction multiple times.
Based on this conclusion, I proposed two directions to improve the checkout flow UX. We decided to test out both solutions simultaneously with real users:
To optimise the highest possible transaction speed by abstracting the transaction customizability.
On a high-level view, these are the minimum four steps users can take to complete one transaction. In order to achieve this, we need to re-prioritise the features based on new insights obtained from user research.
Small donations (less than $10) should require some effort from the user side. Therefore, we decided to completely remove the advanced options from view. However, if needed, users can still access the advanced options from inside their wallet when they confirm the transaction.
To improve the speed, but still keep the ability to customise each transaction.
StablePay’s users are crypto natives and we assume that most of them subscribe to the ethos of the crypto community, which emphasises individual privacy and freedom. With this in mind, it is crucial for the platform to maintain the familiarity of the web3 UX pattern. This includes the ability to set a spending limit for an app, an early wallet connection, and the ability to adjust the gas fee while improving the speed for each transaction.
Above is the minimum five steps a user needs to accomplish in order to complete the transaction.
I explored a number of possible UX patterns that could serve each of the proposed directions during the wireframe stage. The aim is to introduce meaningful changes and adjust the hierarchy of the components based on the user’s need on the frontend, and to accomplish this goal without needing to create too many hurdles and infrastructure overhaul.
Here is one of the flows for wireframe I developed. It is stripped of any visual design and branding elements.
The high-fidelity prototype design is focused on reprioritising actions and making sure these are nested in an order of importance. Relevant CTAs are grouped together in the common region and arranged with consideration regarding the law of proximity.
Users should be able to scan the screen and realise in the first few seconds what actions need to be carried out. All CTA buttons are large and stand out, which make these easy [.1] to recognise.
A picture is worth a thousand words. Wherever relevant, a short text snippet explaining the action is added together with the interactive visualisation describing the state of the action.
In order to reduce the time spent completing a transaction, we decided to group the signings together so that users can sign the transaction off two times in a row. The user then needs to only leave the site once instead of twice.
The StablePay application is in light mode by default. The final product is the design for both iOS and Android. The design is pragmatic, simplistic, and has a well-arranged visual hierarchy.