StablePay


Product
Designer



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.


  Micropayment



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.

  Web3 payment



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.



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.



  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.




  Wireframe



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.



  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.