StablePay


StablePay is a crypto microdonation platform built on Ethereum.
My task was to improve UX of the platform's check out flow. I gathered user's insights from both direct interview and analytics. The design work includes lo-fi wireframe, the new UI and hi-res prototype.

Micro payment on web3


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.
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.

The solution


Fast transaction

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.


Full control

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. Below is the minimum five steps a user needs to accomplish in order to complete the transaction.


Prototype


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.