What is cross-chain?
If you are reading this article, the chances are you already know what are ETH and BTC. You might even own some of them. But do you know that, ETH and BTC belong to two independent ecosystems? The two ecosystems are completely different with no connectivity. Just like two countries located in different parts of the world. To go from one to another, you need to take an airplane. Sounds easy right? You just need to build an airplane to cross these two chains. Wrong.
Comparing to centralized exchange (CEX), there are so much more technical barriers for decentralized exchange (DEX) to overcome. How’s that? In general, when you trade on a CEX, your tokens are not actually exchanged to the counterparty. It’s simply an alteration of numbers by the CEX. You still get the tokens you want but the problem is, the whole process is done behind the scenes along with the risk of being manipulated and the risk of losing your tokens. However, when trading on a DEX with cross-chain technology,
- you own and control your wallet,
- full transparency and on-chain,
- higher security as tokens are actually exchanged.
The biggest challenge for DEX to resolve cross-chain issue is particularly “how to actually exchange one token from ecosystem A to ecosystem B”. At DINNGO, we resolve all the technical difficulties and design an intuitive user experience. Most people do not understand cross-chain technology or do not appreciate the value of it. Therefore, a good design can improve visual feedback and further simplify the experience. After dismissing the geeky interface, an average user can easily learn the true value and the ethos of the blockchain. Below we share our path of designing the new cross-chain solution — Portus.
Starting with research
1. Become the pioneer
Simplicity has always been the fundamental principle of DINNGO’s design. We want to make it easy for people to get into blockchain. So easy that even grandmom know how to use. We want to provide an experience that is effortless to onboard, visually pleasant and easy to use. When we started developing cross-chain function, we first studied every bitcoin wallet in the market and conducted product analysis to come up with a cross-chain wallet solution. Then we moved on to competitive product analysis to review all other products on the market that are also trying to find cross-chain solutions in blockchain industry. This is the time when we realized that we are the pioneer in the market. For example, one of the cross-chain solutions is Atomic Swap, which provides a one way or two ways fixed price swapping service. With Atomic Swap, the price is inalterable, which means you can not set up the price you want, and it does not provide visualize charts or order book.
Very few DEXs that support cross-chain features provide charts and even so, they only show you the charts of a fixed price swapping history without order book features. Most of them are crypto-pegged tokens, namely they are backed by the native coin in reserve and issue the pegged tokens on their chain. It is not actually decentralized. Believe it or not, until this day, no one has ever built a solution to achieve interoperability in the present market.
What you can expect from Portus cross-chain trading:
- Setting up order price as you wish
- An order book list of buy and sell orders
- Userful candlestick charting
- Physical exchange between BTC and ETH
- Decentralized exchange model
- Executing directly from your wallet
2. Viability
After a thorough analysis, we decided to choose private key approach for bitcoin wallet integration as our Minimum Viable Product (MVP). Here is why:
Majority of bitcoin wallets are designed to sign UTxO (Unspent Transaction Output) from P2PKH (Pay to Public Key Hash), P2WPKH (Pay to Witness Public Key Hash), P2SH (Pay to Script Hash) or P2WSH (Pay 2 Witness Script Hash). Considering the implementation of atomic swap will complicate the process of trading bitcoin, we decided to design a simple interface for users to manage their bitcoin wallets as our MVP. With the private key approach, we can increase the flexibility and capability of processing different scripts. In a nutshell, users are able to maintain ownership and security of their funds while using an unprecedentedly new technology.
Mapping out different user scenarios
1. Simplify users main purpose
Users only explore the matters that they care. How do we know what they are trying to get? Or maybe they are just looking? The point is, we need to let users know what they can do with the product. So how do we achieve that? We focus on conversion rate and user behaviors. We build mental models for different types of users to understand their thought process. Through research → assumption → interview → prototype → analysis → design, we consolidate all the information to have a clear picture of user experience. We design the processes and conversation to guide users. During the development, we always review our interface to see if there is any unintended implication. We ask ourselves:
- How do we guide users altering their inputs to meet their needs.
- How do we let users know that they have already registered an account with us?
- How do we let users know that they are logged in?
- How do we let users know that their wallet is not connected?
- How do we let users know the type of wallet they are currently using?
2. Categorize user journey map
We built user journey map from users perspective, from start to finish. By mapping out user behaviors and expectations at each stage, we are able to have a bird’s eye view of users as well as the close-up perspective. With that information, we can design a better user experience thus enhancing journey completion rate. Below is an example of user journey maps in different stages:
- User Journey Map of first time visit users: Onboarding → Sign up → Connect Wallet → Trade
- User Journey Map of users trading on Ethereum network: Log in → Connect Ethereum Wallet → Trade
- User Journey Map of users trading through cross-chain solution: Log in → Connect Ethereum Wallet → Connect Bitcoin Wallet → cross-chain trading
(provide informative message to guide users)
When you provide a clear structure and combine it with all necessary information, users can then easily and efficiently complete the necessary tasks to achieve their goal.
Good Wallet Experience
1. Ethereum Strategy
After finalizing the experience prioritization, we decided to onboard users to connect ethereum wallets first and then bitcoin wallet later since DINNGO Exchange is built on top of Ethereum Network and around 94% of cryptocurrencies are ERC-20 token. Besides, the bitcoin wallet integration has a high dependency on the onboarding interface designed to connect Ethereum wallets. Since our Ethereum wallet integration is designed with an iterative approach, it is flexible enough to make further modification. According to our user observation and quantitative data, it reveals that our current UI layout has delivered an efficient onboarding process for users. Therefore, we made just a little modification to maintain the original usability and to soften the learning curve.
(Goal completion rate and frequency)
2. Usability programme
After considering numerous user flow and scenarios, we arrange necessary and precise visual hints everywhere guiding the users to the next step. For example, after users connecting to our Ethereum wallet, they will see a Bitcoin icon next to Ethereum icon as a reminder of connecting Bitcoin wallet.
See some details of our design below:
- All wallet integration interface has only one single radio button. Just need one click. This way we decrease the number of clicks and make user journey much easier.
(pop-up windows of wallet integration)
- Loading animation inside buttons. Animation can reduce users’ perception of time, keeping users engaged before the process is fully loaded. We want users to feel like things are responsive and the action is processing while they wait.
- Error messages when entering incorrect password/private key/number. There are two types of error messages — systematic errors and validation errors. An effective error message is best to be placed near the field, especially to the right or beneath the field.
- Alert message for all the information you need. Once you connect your wallet, you will receive a notification informing you what you need to do.
(Hover effect to reminder users)
In summary
We are very pleased to share how we design Portus. Upon achieving market adoption, we will add more features. If you have any suggestions for a better user experience, please do not hesitate to share with us.
【 About Us 】
- Official Website: dinngo.co
- Twitter: https://go.dinngo.co/twitter
- Telegram: http://bit.ly/DINNGO_TEL
- Contact Us: support@dinngo.co
No comments:
Post a Comment