UIX Case Study: Minswap DEX Revamp
As technology advances, more and more people are using web3 & blockchain, so we decided to revamp the Minswap DEX (decentralized exchange) web application. We see an opportunity to add new features based on the issues we discover from the blockchain community & from our experience.
This initiative can help Minswap DEX to gain more active users by supporting more cross-chain non-custodial wallets. Second, we want to improve the customer satisfaction index by adding more useful information for users on the landing page and a token sorting feature based on several parameters.
We hope this initiative will reduce the consideration stage for users to trade or do yield farming on our Minswap DEX.
Objective
- Provide access to trade tokens (swap) and yield farming in Cardano blockchain with minimal cost, minimal time and maximal convenience
- Provide the best quality DEX and DeFi experience in Cardano blockchain
Detail Key Result
- Increase trading volume from Q2 to Q3 by 10% (52.53 million USD in April 2023) -> dimasukin ke problem overview, current condition nya gimana di problem overview
- Increase Total Value Locked (TVL) by 15% from Q2 to Q3 (currently 55.4 million USD)
- Increase Monthly Active User > 28k (currently 24k) in a quartal
How do we get the revenue?
Minswap fee: 2 ADA (fixed fee) + 0.3% (variable fee)
From 0.3% → 0.05% goes to Minswap and 0.25% goes for yield farming pool profit from the converted token
Example: User wants to swap 10000 MIN token to AGIX. Minswap will charge 2 ADA + 0.05% from 10000 MIN (5 MIN). These will go to Minswap DEX Treasury. The other 0.25% (25 MIN) goes to liquidity provide for their profit
Assumption & Hypothesis
- Web3 users who use DEX have a high concern for security and privacy.
- Web3 users interested in DEX have an interest in the crypto ecosystem and tokenization.
- Web3 users who use DEX value decentralized access to global markets.
- Web3 users who choose DEX aim to achieve financial freedom and reduce dependence on traditional financial institutions.
Process
#1 Empathy process
Before undergoing a revamp, we conducted research on what web3 is and how it works. From the research we conducted, we found several areas that can be further improved for DEX Minswap to compete with its competitors.
Competitive Analysis
Before we start this project, there are several major competitors located outside of Indonesia. So we are looking at those competitors:
Uniswap :Protocol, Interface, Labs
To begin, we should make clear the distinctions between the different areas of “Uniswap”, some of which may confuse new users.
SundaeSwap
SundaeSwap is a decentralized, autonomous protocol for trading cryptocurrencies, specifically Cardano tokens, on the Cardano blockchain. The SundaeSwap protocol is defined by a series of immutable, permissionless, and decentralized smart contracts built on Cardano using Plutus, the smart contract programming language of the Cardano blockchain. These smart contracts were built to allow users to trade cryptocurrencies directly with each other and without a third party intermediary that holds the power to halt trading or any other form of restriction. The SundaeSwap protocol has been designed to remain non-custodial, censorship-resistant, and secure.
WingRiders
WingRiders is the Cardano Decentralized Exchange DEX offering DeFi services across ada swap, stake and yield farming.
All of these competitors share one commonality, which is the usage for DEX Cardano. However, each platform has its own strengths and advantages. example Uniswap: Known for its user-friendly interface and automated market making algorithms, Uniswap offers a seamless trading experience with high liquidity.
User Interview
Question
We have prepared several questions that will be answered by users who will be interviewed through a questionnaire. Here are the questions:
#2 Define process
From the questionnaire results with several individuals who have already used web3, I obtained validation for the initial assumptions. Based on this, the next step is to create User Personas, establish a Point of View, and formulate How Might We statements based on our research findings. These steps will help us in developing solutions and understanding user needs more effectively.
Customer Journey Map
User Persona
Point of View (POV)
Problem Statement & How Might We (HMW)
After creating the user persona and point of view, I explained the pain points in the How Might We (HMW) question, here’s the Problem Statement & HMW formulated:
Crypto users require a Decentralized Exchange with features that can accommodate their desire to transact crypto securely, provide informative data, and allow control over their preferred wallets.
- What if we provide a feature that provides information about the rise or fall of a crypto?
- What if we offer a feature that facilitates users’ desire to use their preferred crypto wallets?
#3 Ideate Process
Minimum Viable Product (MVP)
Based on the CJM & also feedback from the blockchain community, we tried to improve our product by adding useful features based on RICE scoring model.
In this initiatives, we chose to add several features that will help us to achieve Minswap DEX OKR, such as:
- Adding options to be able to connect Lace & Cardwallet wallets into our Minswap DEX → to gain more active users from other chains & also provide more options for our current active user
- Adding simple 7 days trend chart for each token in the token list → to help user understand the price trend easily & could easily help them to make decision to buy or sell token
- Adding Top Volume, Top Gainers and Top Losers information (last 24 hours) plus sorting feature based on these parameters → helping user to sort and check token information easily
Epic, User Story & Acceptance Criteria
Jira Sprint Roadmap
On this initiative, we created 3 epics with 8 user stories under it, based on the OKR that we want to achieve. 1 sprint = 1 week
Epic 1 : Add new wallet options in the “Connect Wallet” pop-up window
We want to add features in the “Connect Wallet” button options, where Cardwallet & Lace wallets can be connected to the Minswap DEX dApp (decentralized application) through Chrome browser extension.
User Story 1 : Add Lace wallet to the “Connect Wallet” option
We want to add a feature in the “Connect Wallet” button options, where Lace wallet (official wallet from Input Output Global) can be connected to the Minswap DEX dApp (decentralized application) and several other functionalities such as, read assets on the Lace wallet, sign transaction, swap tokens and do yield farming.
User Story 2 : Add Cardwallet wallet to the “Connect Wallet” option
We want to add a feature in the “Connect Wallet” button options, where Cardwallet (cross-chain non-custodial wallet) can be connected to the Minswap DEX dApp (decentralized application) and several other functionalities such as, read assets on the Card wallet wallet, sign transaction, swap tokens and do yield farming.
Click here to see the Jira story ticket (MD-6)
Epic 2 : Revamp UI for the token trading pair information in the “Overview”
Adding price trend chart and last 7 days change for each trading pairs. Where these information can help Minswap DEX users to quickly make decision to do transaction in the dApp.
User Story 3 : Add last 7 days trend chart in the “Top Pools” tab
To help user quickly understand the token information, we want to add last 7 days trend chart into each trading pair list in “Top Pools” tab.
If the “bottom arrow” get clicked, the trading pair tokens will animate to show the specific information about the price of each token, trading fee, LP fee and total LPs
User Story 4 : Add “Change 7D” information in the trading pair list
We add “7 days percentage” feature in the list of token to help user quickly understood what token was increase or decrease percentage in previous 7 days
User Story 5 : Add last 7 days trend chart in the “Top Tokens” tab
We add “7 days trend chart” feature in the list of token to help user quickly understood what token was increase or decrease percentage in previous 7 days in the form of visual graphs
Click here to see the Jira story ticket (MD-12)
Epic 3 : Add Top Volume, Top Gainers and Top Losers in the top of “Overview” dashboard
Adding Top Volume, Top Gainers and Top Losers features for the top 3 tokens in each categories. And also sorting feature based on last 24 hours information in each categories for the token list when the right arrow icon get clicked.
User Story 6 : Add Top Volume feature in the “Overview” for Tokens tab
Add “Top Volume” feature in the “Overview” web page, showing the best 3 tokens in the last 24 hours. If the “right arrow” get clicked change to “bottom arrow” and the tokens under will be sorted by the top volume in the last 24 hours from top to down and show all of the information about the top volume in last 24 hours,
include change 24 hours, 7 days before, market Cap, and trend Chart in 7 days before.
User Story 7 : Add Top Gainers feature in the “Overview” for Tokens tab
Add “Top Gainers” feature in the “Overview” web page, showing the best 3 tokens in the last 24 hours. If the “right arrow” get clicked change to “bottom arrow” and the tokens under will be sorted by the top volume in the last 24 hours from top to down and show all of the information about the top volume in last 24 hours,
include change 24 hours, 7 days before, market Cap, and trend Chart in 7 days before.
User Story 8 : Add Top Losers feature in the “Overview” for Tokens tab
Add “Top Losers” feature in the “Overview” web page, showing the best 3 tokens in the last 24 hours. If the “right arrow” get clicked change to “bottom arrow” and the tokens under will be sorted by the top volume in the last 24 hours from top to down and show all of the information about the top volume in last 24 hours,
include change 24 hours, 7 days before, market Cap, and trend Chart in 7 days before.
#4 Prototype Process
Low-Fi flowchart
Based on the MVP (Minimum Viable Product) requirements, as well as the Epic and User Story needs, a low-fi representation of the data is created.
Lowfi Top Pools & Top Token Homepage
Lowfi Connect to Wallet
Design System
A design system is a documented catalog of components and styles used within a product, including how and why each should be implemented. While design systems are often confused with style guides and pattern libraries, a design system is more strategic and high-reaching.
Hi-Fi Design & Prototype
#5 Usability Testing Process
Usability testing (UT) is carried out using a semi-moderated method, namely the user will be fully assigned to carry out UT following the flow of the maze application and recording via zoom and online
How long have you used cryptocurrency or blockchain technology?
Have you ever swapped coin or token in an exchange previously? Either centralized exchange (CEX), such as Binance or decentralized exchange (DEX), such as Uniswap, Minswap, etc.?
Scenario
#1 View the Top Volume/Top Gainers/Top Losers page on the Top Token page
The user is on the main page of minswap, at this time he is interested to see what’s on the top token page, after clicking on the top token, the user sees that there are 3 different cards namely Top Volume, Top Gainers, and Top Losers. here the user wants to see one of the cards
#2 Connect wallet
The user is currently on the homepage and wants to connect their wallet. They notice a new wallet called “Cardwallet” and want to connect their Cardwallet to Cardano.
#3 Disconnected Wallet
The user has already connected their latest wallet, but they want to disconnect it.
Question
You can check question for Usability Testing here, it contains Qualitative Questions and System Usability Scale (SUS)
Usability Testing Result
A1. Click and open “Top Tokens” tab
Users have a bit of trouble finding the top tokens tab because they need to scroll down first and the writing is a bit faded. The rating given by the user to find the top token tab is an average of 8.3 (score)
(range of 1=difficult to 10=very easy),
10 points (3 users)
8 points (1 users)
7 points (2 users)
5 points (1 user)
A2. View the “Top Gainers” information and sort the tokens by “Top Gainers”
Some users are not aware that there is a sorting button on the top gainers column, so there are many miss clicks on the screen, and with the sorting details the bar below confuses the user. The average rating given by the user for the sorting buttons on the 3 columns of top volume, top gainers and top losers is 6.9 (score)
10 points (1 user)
8 points (4 users)
5 points (1 user)
1 point (1 user)
A3. View the “Top Losers” information and sort the tokens by “Top Losers”
The user is getting used to the sort button on the 3 columns so that the user can easily sort the top losers column, but there are some users who are not aware of the usefulness of the sort button and there will be data changes in the top tokens table
And this is what makes it iteration for the team to move the 3 column top tokens on the top tokens bar below
B1. Connect your wallet to Minswap DEX application
Users can easily find the connect wallet button indicated with all users (7 testers) answering it is very easy to find the connect wallet button
B2. Install “Cardwallet” via Chrome browser extension
In general, it’s still easy for users to install Card wallet, it’s just that there are some users who are used to directly installing a manual wallet in a browser extension, so there are several miss clicks on the screen
B2. Install “Cardwallet” via Chrome browser extension
There are some users who immediately install the chrome browser extension for the card wallet that hasn’t been installed, so the user thinks that the words not installed cannot be clicked and are just a sign or just a label/indicator
B3. See the landing page and “wallet drop-down menu”
user can easily find the dropdown menu button, this is because the journey has been made when the user clicks the connect wallet button and installs the card wallet
B4. Disconnect wallet from Minswap DEX dApp
it’s very easy for users to disconnect the wallet in the dropdown menu because the journey has already been formed. It’s just that we can’t find why the click rate percentage is high even though in the detailed data there are no miss clicks and on the hit map there is no clicked area other than the disconnect button
Design Iteration
Based on the feedback from the Usability Testing participants and also from the quantitative data (heatmap, misclick rate & duration), we try to improve our design to increase the “Usability Score” in Maze.
#1 Connect Wallet Popup Wallet
Some users are not aware that there is a button that can be clicked, to help opening Chrome browser extension for that “Not installed” wallet quickly.
Due to this, lots of user try to install it manually by clicking Chrome extension icon, instead of using our feature.
So we try to improve it by changing the caption into “Click to Install” and if we hover on it, background color change, so the user understand that they haven’t had the extension yet, plus they know that it can be clicked.
#2 Top Token Page (Top Volume, Top Gainers, Top Losers)
Based on the usability testing results, lots of participant click the “Top Volume” text instead of “Sort” button. And they complained that they could not see the sorting result directly.
Therefore, we improve it by redesigning the position of the “Top Volume/Top Gainers/Top Losers” nearer to the token list.
And also changing the background color of the box. Plus, if sorting button get clicked, the focus will be scroll down into the sorted token list.
Figma Prototype
Here you can see the changes made before and after conducting usability testing.
Closing
That concludes the process of problem definition, prototype creation, and conducting usability testing. Thank you to Team 2 and Binar Academy for this opportunity! I have learned a lot throughout this process, particularly in terms of collaboration and prioritizing key aspects in the revamp based on the PRD and MVP. Thank you for reading this article! I hope this design case study proves to be beneficial, and that you gain insights from what I have accomplished in this project.
What I’ve Got to do Better
This case study marks my first experience in designing and revamping a web platform, particularly in the realm of web3 and DEX, as well as understanding what Cardano is. The revamp process presented numerous challenges. Here are some key takeaways and areas I can further improve:
- Deepen my understanding of how DEX operates: To enhance my design skills in this domain, it is crucial to have a comprehensive understanding of how DEX functions and the underlying mechanisms.
- Empathy towards users: When designing, it is important to consider how users will interact with the platform. It’s not just about creating visually appealing designs, but also ensuring that they meet the needs and expectations of the users.
- Expand knowledge about Cardano and web design: To effectively design a web platform for Cardano and similar projects, continuous learning and expanding knowledge about Cardano’s ecosystem, protocols, and design principles is essential.
- The importance of conducting usability testing cannot be overstated. It allows us to identify aspects that may have been overlooked by a UI Designer and helps us create designs that are significantly better and more effective.
By incorporating these lessons and continuously improving my skills and knowledge, I aim to enhance my abilities in designing and revamping web platforms, especially in the context of web3 and DEX. Any feedbacks or suggestions are very welcomed, and you can leave comments below or reach me personally by email :)
— — — Thank you for Reading 😙 — — —
Gideon
📧gideonoscar.t@gmail.com