The challenges of designing for blockchain: How I designed Swapy Exchange UX

The challenges of designing for blockchain: How I designed Swapy Exchange UX Written by Plinio Braga (UX/UI Designer at Swapy Network) The Blockchain is one of the most innovative and world-changing technologies that come to life in recent years. It is behind digital currency networks like Bitcoin, Ethereum, and many others, and it has the power to drastically change the way we transact value in the future. But what is Blockchain? There are many definitions of blockchain. I like this one: “A blockchain is a decentralized, distributed and public digital ledger that is used to record transactions across many computers so that the record cannot be altered retroactively […] This allows the participants to verify and audit transactions inexpensively. “ Wiki It seems simple but powerful and its implications and use are endless. It is not limited to finance but can be applied to art, music, stocks, intellectual property, and so on. Some people say it can unleash the power of the internet of things, some people say it will lead us to a new era of the internet of value. To understand its potential I suggest watching this video: Understand blockchain in under 7 minutes: Don Tapscott with Lloyds Bank In this article, I will talk about the challenges I faced when designing for blockchain using the Swapy Exchange D’App UX design as an example. Swapy uses Ethereum blockchain in its applications. To learn about Ethereum I recommend this article. What is Swapy Exchange? Swapy Exchange is one of the three decentralized applications proposed by Swapy Network. It is a D’App built on top of Ethereum blockchain that intends to connect international investors from countries where the interest rates are lower to credit companies in countries where the interest rates are much higher, providing better returns to the first and lower cost capital for the latter, in loan transactions. Swapy Exchange aims to reduce the cost of capital in emerging countries, and have the mission to provide Universal Access to Credit. In order to achieve that goal, Swapy plans to start its operations connecting (international investors) with (local credit companies, fintechs, and other financial providers). That approach intends to reduce the risks regarding compliance, and make viable to operate according to each countries legislation, consequently reducing the credit cost to the end user. How does it work? In the platform, credit companies from countries where the interest rates are higher, launch their own fundraising offers (loan conditions). Investors from countries where the interest rates are lower can find and choose the best investment option in the platform, invest, and follow the investment, achieving better returns. Swapy Exchange is divided into two paths, [Investors path] and [Credit Companies path], what represents the two groups of users of the platform. When an international investor sign in the platform, he has access to a variety of fundraising offers provided by credit companies from all over the world, and he can choose what investment option better suits its needs. The investor chooses the fundraising offer he wants to invest, select how many assets from that offer he wants to invest and conclude the investment. All investments made are displayed and can be followed on (Manage) screen dashboard, as well as it is registered on Ethereum blockchain. When a credit company sign in the platform, it is able to create a fundraising offer and make it available to international investors from all over the world. The credit company sets the amount it wants to raise, the conditions of the offer, and launch their own raising offers. That fundraising offers are made available to investors worldwide. Investor main actions on the platform — user goals Choose an investment offer Invest Follow his investment Receive its return over investment Credit company main actions on the platform — user goals Create a fundraising offer Receive the investment Transfer the investment to the desired account Return the investment to the investor Secondary common actions — user goals Feed its own wallets with Ethereum [ETH] (Cryptocurrency in which the investments will be transferred and returned), and Swapy [SWAPY] (Cryptocurrency in which the loan collateral will be held) As interaction designers, we need to remember that it is not about the interface, it’s about what people want to do! To come up with great designs, you need to know who those people are and what they are trying to accomplish. — Cordell Ratzlaff — (Designing Interactions — Bill Moggridge) To be able to design the UX and achieve a level of usability that allows any person to use the platform, even not knowing much about blockchain and ethereum, we needed to deeply understand the capabilities brought by the technology but especially understand its pain-points, its limitations. The analysis resulted in the following data parameters: As a new technology, it is important to point out that today users need to use additional services in order to buy, maintain, and transact their cryptocurrencies, such as personal wallets, exchanges, and other applications. (Approach: To keep the experience consistent we have tried to incorporate some features from external common used extensions into Swapy platform. One example of that is the Metamask icon (Fox’s head) you can find on the main top white bar. Having the Metamask integrated to the platform allowed us to significantly reduce friction, increase the ease-of-use and also solve some engineering problems. More details about this approach can be seen in this amazing article by Ícaro Harry. Although the “loans” will be transacted based on fiat currency (dollar), it has to be transferred in Ethers. It can be confusing if not properly stated and shown. (Approach: We clearly show the correspondent value in dollars to ETH, and its index, on the main top bar, to assure transparency and ease) The transactions on Ethereum blockchain may took less than one minute to be (1)mined, but they also may take a couple of minutes to complete. It is necessary to clearly communicate in which part of the process the user is. (Approach: Enhance visual signalization about the mining process as a “load” signal. Additionally, we included a notification signal on (notifications), informing the current state of the mining process.) Top white bar — Metamask icon (Fox’s head) integrated to the platform What is Metamask?: MetaMask is an extension for accessing Ethereum enabled distributed applications or “D’apps” in your normal browser! The extension injects the Ethereum web3 API into every website’s javascript context, so that dapps can read from the blockchain.  MetaMask also lets the user create and manage their own wallets, so when a D’app wants to perform a transaction and write to the blockchain, the user gets a secure interface to review the transaction, before approving or rejecting it. I have tried to create a smooth user flow with minimum steps required to complete the user goals. The idea was to make the process as simple as possible reducing the points of friction. In order to improve the learnability of the platform we prioritized the linear flow of use, reduced visual distractions, kept it consistent, and provided active guidance throughout all the steps to achieve the user goals. That guidance can be seen on the top of all screens beside the screen headline. Active guidance on screen headline: (Choose a fundraising offer and start investing)Another concern when designing for blockchain is to provide constant and regular feedback to the user regarding his actual, previous and next step on the platform. To assure that, we emphasized directions, like (next) and (return) buttons, enhanced notifications and visual indicators like the (mining load). Despite the effort to be jargon-less, and reduce the use of technical terms like (hashes), and (gas) in the platform, we felt important to maintain certain words, that are already incorporated to the technology like ((2)wallet address). We believe that expressions like (wallet address) are already part of the blockchain identity and cannot be simply replaced by a correlated word. It has it’s own value and significance, and need to be preserved. To represent the mining process we chose a different loader. It is actually an SVG loader that we believe best translates the idea of mining when compared to loading. Despite the fact that both, loading and mining, are related to the waiting process and communicates to the user the need to wait while something has been done, the idea behind mining goes beyond, and also evokes a sense of mathematical calculus, a sort of interaction going on, the reason behind the wait, and it required a better visual metaphor. Mining visual metaphorThe main challenge when designing for a new technology that can certainly revolutionize the world as we know it, but that has not already reached its boom, as blockchain, is to humanize the technology, to make it user-friendly, and it is not an easy task. Translate the technical view, gathering engineering decisions into feasible interfaces can be tricky. The strategy we defined was to start simple and improve continuously, providing the necessary features to run the platform with satisfactory user experience, and constantly improve it based on our real user’s feedback. You’ve got to start with the customer experience and work backwards to the technology. — Steve Jobs I started designing the interfaces based on early wireframes and user flows from each main user stories, and the feedback we received from a previous version of Swapy Exchange. The research and user’s feedback gave us important insights on what we need to improve to enhance usability. Once each user flow screens were designed, a validation step and general discussion with the developer’s team and the CTO was set to refine the user experience, and incorporate important feedbacks from the technical side. We focused on creating a simple to use product, and reduce friction as much as possible. In a field with particular terminology, and specific nuances like blockchain, the details are vital to assure a consistent and easily understandable user experience. The following principles were respected and the questions they bring led us to achieve the final result: Clarity of intent: The user goals can be easily followed in a clear and objective communication? The user always knows what he/she is doing without any doubt? Consistency: Similar elements have consistent look and function in a similar way? (Be consistent is to communicate with your users using one coherent language.) Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That’s good. — Jakob Nielsen Usability: How effective, efficient, and satisfactory, the product is perceived by the user when trying to achieve the uses goals? What about the ease of use? Ease of learning: How fast the user who has never seen the interface learn to use it? It is easy to learn how to use the product?