USDO stablecoin provides a payment method for users to make payments. It is faster and more reliable than a traditional payment method to some extent. The referral system is a way to increase the number of USDO payment users, as well as the number of USDOfficial users.
There were two missions for me:
The goal of adding payment feature was to expand the scope of application of USDO, thereby increasing the number of users. Similar to Venmo or Alipay, it allows users to use digital currencies to pay for goods or services or receive payments from friends. As a result, the key features are pay and receive. While the goal of referral was to utilize the acquaintance effect and bonus reward to encourage registration.
What set USDO Pay different from other digital payment methods was that USDO Pay was blockchain-based. It includes all the advantages that blockchain technology possessed. As a matter of fact, the dynamics of making and receiving payments are entirely the same as cryptocurrency wallets. What I aimed to do was to create the appearance of a traditional payment system , which would provide users a feeling of familiarity, thereby building more trust in the product and truly achieve the goal of user growth.
After a couple of iterations, I ended up with the following sketch.
And then, I outlined the key user flows to show the journey experience of referral that a user would have.
Scroll horizontally to go through the flow
I chose to use the two-panel selectors design pattern because they are commonplace in web and application design, and they enable users to view information while keeping an overview of the structure.
During the payment process, it is vital to have the pending payment cancellable, especially when the user makes payment to a non-registered user. It encourages the user to make a payment without worrying about unexpected loss.
To notify the user that there was an opportunity to earn a 10.00 USDO bonus by making payments to a non-registred user, I decided to put an announcement on the top of the page and in strategic locations within the website.
After confirming the user flows, I created low fidelity wireframes to present the content on each page. And then added visual design to create the high fidelity wireframe.