Redesigning a Decentralized Exchange — A UI/UX case study
Take a look at the process of redesigning a successful DEX.
Last year in June we were contacted by the founders of DFX in order to help with the redesign of their protocol.
I was really excited about the opportunity of designing a protocol that would help not only native DeFi users but also new users who might not have interacted with DeFi protocols before.
What is DFX? DFX is a Decentralized Foreign Exchange Protocol (DEX). It’s like a peer-to-peer marketplace where users are able to buy and sell assets. DFX is focused on foreign stablecoins, meaning that the assets you exchange are fiat-backed assets which are designed to be stable in price.
The Challenge
Our main challenge was understanding the current limitations of the user experience and design a new UI and UX that would educate users and offer a much faster and intuitive experience.
For the design process we used our normal Design Sprint for DeFi, and took us about 2 weeks from start to finish.
Total project time: 2 weeks (until passing it over the the developer)
Original Scope: Redesigning the DFX protocol
Interesting info: Entire Sprint was run remotely as Adrian and Kevin are both located in Canada and Ultim are over in Barcelona.
Step 1: Setting Up our Assumptions
The first step was gathering feedback from the team that would help us in creating our assumptions.
After a 2 hour long call, in which we tried to understand the current limitations and business goals, we gathered enough material to move forward with our research.
We managed to do this remotely using Notion we’ve created questions that would start conversations about users, product and business goals.
Step 2: Testing out Assumptions with users
We wanted to understand as much as we can about the protocol’s current user experience, so we transformed the assumptions collected from the call into questions.
We then guided users through the main flow of the app, asking them specific questions in order to understand their confusions, therefore validating our assumptions.
What did we discover?
The usability test surfaced numerous opportunities and allowed us to come up with a solution for each one.
Step 3: Wireframes
Wireframing the solution was a breeze, we’ve decided to redesign the user experience in order to simplify the flow, therefore creating an individual experience for each transaction, making the swapping and staking process much more faster.
One of the biggest changes was separating the actions of adding liquidity and managing positions into individual flows as opposed to the original version of the app where they were in one view.
We then proceeded to separate the Pools and the Positions sections in two separate lists. We did this so that users would have a clear differentiation between the actions of providing liquidity and managing their position.
Step 4: Designing the UI
The new design features a simplified dashboard where users are able to swap, provide liquidity and manage their positions in an easy and intuitive way.
What has changed:
- An intuitive swap interface where power users, but also new users, are able to understand everything they need to know about their transaction with the use of tooltips.
- A simplified Pools page where users are able to see the underlying tokens for each pool and understand if the pool is imbalanced or not
- An easy way to provide liquidity, stake and manage their positions that focuses on one transaction at a time
Step 5: Iterating the design with users
It’s time to test out our newly created design with users.
We’ve gathered the same users from the research phase and took them one by one through a Figma prototype in order to understand if there are any confusions with the new flow.
Most of the changes we’ve done after the tests revolved around communicating the value proposition better and offering more details on users positions.
A simplified and intuitive user experience
The final design features a streamlined flow where users can quickly perform any action without the need of an extra step.
It also features an intuitive interface where new users but also power users can easily navigate and understand how a Foreign Exchange trading protocol works and what value it offers.
What we’ve learned
- Always perform research when you are redesigning a protocol. It’s important to understand from new users what are the current limitations of the platform but also from more experienced users what frustrates them. You want to create an experience that pleases both and performing research at the beginning will answer a lot of questions.
- Always use tooltips. Tooltips are an amazing way to introduce new users to DeFi but also keep the UI clean for more experienced users who are already familiar with specific terms.
- Read between the lines. Don’t always take at face value what users say, use your intuition to understand if you need to do further research before proceeding with a change and always put yourself in their shoes first. Ask yourself the question — If I would be in their situation would I do this?
Check out DFX, and if you want more process breakdowns like this make sure to follow us.
Hey, hey…before you go! 🙆♀️🙆♂️
👏🏻 SPAM 50 CLAPS if you enjoyed this article.👨🎨 Curious about what we do? Check our site **https://ultimstudio.com/**💭 Comment your thoughts, feedback or what you had for breakfast.
