Designing Defi On-Ramps (Web3)
What are On-Ramps?
On-ramps are applications, websites, or any platform that allows users to purchase Bitcoin, Ethereum, or any other digital cryptocurrencies using fiat. A platform whereby users can purchase digital currencies using fiat (mostly through debit cards) and get the corresponding value paid for.
On-ramps are a common way with which new users start their cryptocurrency journey and platforms offering this service are commonly CEXes like Binance, and Coinbase, among others. These platforms allow users to take their first step into crypto by accepting fiat in exchange for crypto assets.
Fiats are used to refer to our local currencies used in measuring the value of wealth. We have different fiat money like euros, British pounds, American dollars, and so on.
Off-ramp is referred to the “cashing out” of crypto. Its basically the removal of money from cryptocurrency. Where you exchange your crypto assets for fiat. Its the direct opposite of On-Ramp
Conducting My Research
On getting the design brief, I started out by making research on what an On-ramp is. Thanks to @ManuelSnr and other creatives on Twitter who helped make the research and understand what O-ramps are. I read a couple of articles and watched three YouTube videos to get a better understanding of the term — since that sounded new to me. Due to the little timeframe for the challenge, I tested the ramp.network on-ramping process to check out the flow and also note places with poor user experience. After carrying out a heuristic evaluation of the product, I noticed a couple of problems that I solved in my own design.
😣 Problem:
There was poor visibility of system status. I got confused at a point about what was going on. The number of processes I am to go through to get my fiat swapped. I was just following all through without knowing what was next.
💡 Solution:
Having a progress bar to show users what needs to be done and the remaining processes would help in the UX
😣 Problem:
The platform did not match with real-world products. On-ramps are used majorly by new users who haven’t used any crypto platform. Users are new to this technology.
💡 Solution:
Designing a product that matches the real world. In my own design, I made it look familiar by designing the whole process to match that of an eCommerce checkout process. Also the use of Montserrat (San-serif font) to match the typical Web2 Platforms, unlike the use of Grotesk & Monospaced typefaces that screams Web3!!!. This strategy was to give users a better onboarding process and increase UX
😣 Problem:
There was low user control, as users couldn’t cancel or go a step back. I had to refresh the browser to start the whole process again.
💡 Solution:
A simple back button to go back to the previous screen/ cancel button to cancel all the processes would have given users control.
😣 Problem:
No error prevention method was implemented. No information icon on bogus words/new terms. New users would get confused about these terms and definitely make mistakes/errors while using the product.
💡 Solution:
Introducing tips on new words/terms would have improved the UX greatly as users would have learned new terms used in the technology and feel guided all through. Increasing their trust.
😣 Problem:
Confusion. That sounded like a big thing, and yes it actually was, I was surprised I wanted to buy Bitcoin with my local currency (NGN) but was confused seeing USD besides the Nigeria flag.
💡 Solution:
Solved this by carefully checking through my design to make sure this product is accessible and usable by anybody irrespective of class and basic understanding.
User flow
Putting my user in mind and trying to solve the problems I discovered on the ramp(.)network platform, I created a simple and easy-to-navigate user flow. Matching the eCommerce checkout style to give users that same feeling of using a Web2 product and to achieve their goal faster.
Style guide
Why would I create a style guide? Do I actually need it? Yes, I do need it.
Created this mini style guide to increase consistency in color styles and to stick to the brand’s identity. Consistency affects the UX of a product.
I made sure the color style meets WCAG 2.1 Level AA recommendations for contrast and to increase accessibility
Screens
Buy Crypto Assets Screen
This is where users input the amount of a selected cryptocurrency in their local fiat and they get the corresponding value of the same asset.
Gas fee, Network fee, Ramp’s processing cost, and the estimated processing time are shown to users to have a general understanding of what’s going on, how much to spend, and what to expect.
Payment Details Screen
Users input their desired crypto wallet address and also input their card details with which they’d be making payments.
The right section is to keep users abreast of the transaction details and to mimic the eCommerce style.
Final Checkout Screen
After inputting payment details and desired wallet address, this screen is to give users the privileged to have a quick preview before making payments.
A back button at the upper left side is to ensure a user can go back a step either to make changes to payment details if any error was noticed.
Want us to collaborate or wanna say “Hi”? Feel free to contact me
