Improving and redesigning the UX/UI for ORCA-Solana's most user-friendly dex

In this article, I will explain the design process which I used to redesign the ORCA dex.

What is ORCA?

Orca is the most user-friendly dex (decentralized exchange) on Solana. It has blazing fast transactions, nearly zero fees, and a good UX. It is a place where people trade and pool their virtual tokens and currency.

Why redesign?

This redesign was done as a part of bounty submission for Superteam. The criteria were to select and improve the UX of any Solana-based project. Few days ago, I tried to use the ORCA dex for swapping, and it was a bit confusing for some parts. Although I am a tech-savvy person who is involved in crypto for more than a year, I was able to do the desired transaction. But since ORCA has one of the highest volumes in terms of transactions on Solana, I felt the design could be a lot easier to understand and straightforward along with some necessary features.

This article is divided into two main sections.

1. The first will show the improvements made on the top of the original design.
2. The second section is where new features are shown that will take the UX experience to next level.

Let’s get started!

The design process that I followed started with competitive analysis. I look at the other DEXs and their flow and how they operate. Also checked what they offer from a UX lens.

Next was wireframing and information architecture. This helps me to decide the user flow within the web app. Also, this process helps me understand what are the most important pieces and how to place them within the system.

Then comes the fun part which is Visual designs as discussed and described below. So let’s jump onto it!

Trade/swapping page

The main user goal of this page:

• To let users swap one token/crypto with another one. This is the main page for buying or selling crypto on ORCA.

Problem 1: Lack of value communication as well as scattered placement of information

• No communication or value exchange between users and ORCA. This is crucial to establish trust, especially in Web3.
• Scattered information all around the place + hidden drop-down menus which require extra user effort resulting in an increased cognitive load.
• Fonts are too bold and heavy which is not going with the user-friendly theme of ORCA.
• Navigation isn’t future-proof and lacks context.

Solution

• Value communicating through pop up video
  As soon as a user lands on ORCA, I designed a pop-up modal with a video. This video will communicate the unique features of the ORCA such as stable swaps, double-dip, and even search by type thing. This video not only communicates the value that ORCA has to offer but also educates the user on how to use the platform; thus establishing the trust factor.
• Web-app style layout
  I converted the vertical web page style layout of ORCA into a web app horizontal style. There are two reasons behind it — first, no more hidden dropdowns that require extra user effort. In the web app style, these links are already shown. Second, the web app style is future-proof, Meaning if ORCA in the future comes up with more products, this can easily be shown in the horizontal bar and the vertical bar can be used for other things.
• Used more friendly and legible fonts called Inter that showcase and reflect the ORCA values of being the most user-friendly dex on Solana.

Problem 2: Too much distraction and poorly designed UI for the swapping card

• The typography scale seems to be disoriented. Too much large fonts that are gaining too much attention
• Too much noise in the background takes the user focus away as well as its looks and gives more of a childish feel with all that underwater visuals.
• “Search by typing” is a great and unique feature but not enough attention is given to it. Also, the message in the search box is confusing and lacks context. It doesn’t feel typeable.
• Lack of consistency and hierarchy on the swapping screen. Everything is center aligned leaving too much space on the sides. A symbol of poor UI.

Solution

• Removing the distraction from the background
  I simplify the underwater background by only putting a few elements that are enough to keep the ORCA theme relevant. I also changed the background to dark blue so that all the elements, cards, and fonts on the top are easily visible and pass the accessibility test.
• Adding more context to the “search by typing feature” and making it more visible
  Resize the search bar covering the whole top area, making it more visible to the user. Also, improved the context by simplifying the language used in the search box. Added a simple message “Try swapping with just writing” which conveys the purpose of the search box. Kept the UI more highlighted to draw the attention of users, resulting in more usage of the feature.
• Redesign the Swapping element along with some enhancements
  Redesign the swapping element with the new visual style making it easier for the users to comprehend information. Established a clear sense of hierarchy in terms of fonts and visuals. Adding an enhancement in form of a slider, which will let the user slide through the desired “pay with” amount; thus giving them more choice and not only “max and half” as seen on other Dexs.
  Added one more enhancement which will allow users to enter amounts not only in crypto but also in dollars $, thus improving the overall UX. Also, to use and cover the space on the side, I added the graph element beside the swapping element as this provides more visual information regarding the crypto pair that the user is trying to swap.

Before the redesign

Pool/Double dip page

The main user goal for this page:

• Putting the ideal crypto assets to work and earning passive income in form of ORCA and trading fees.
• For ORCA, it is a way to generate liquidity for the platform.
• Double dip is a unique feature for ORCA where user can deposit their LP tokens in pools to get more APY on his/her assets.

Let’s start with “pools” first and then “double-dip”.

Problem 1: Too much scrolling and poor UX due to lack of information architecture on pools screen

• Pool cards are too big in size and contain repeated information. As a result, too much scrolling and user effort to go through each and every pool card. Apart from this, heading are been repeated on each card taking up the space and adding visual noise. Also, no visual difference between headings and data points.
• The overall page pools heading ex: Total value locked, 24h, etc are designed poorly and feel like a strip of information with no hierarchy in fonts or visuals.
• Presenting excess information that is irrelevant to the user. For ex: Lp distribution, trading APR, emission, etc.
• Poorly positioned search and filters. Both are important while sorting information but in the current design, not enough emphasis is given to them, and also poorly positioned.
• Deposit pop-up card can be improved as it contains a lot of noise and it is poorly structured.

Solution

• Structuring the proper hierarchy of the page and emphasizing what’s important
  Converted the overarching heading from a strip of information into cards and set a clear context right at the top. Add a visual hierarchy to the information within the cards, making it more scannable for the users. Add % increase and decrease indicators to each card which will keep the user updated on the daily movements in pools of ORCA.
• Compelling all the pool cards in the table format
  Putting the pools in table form do two things — first, reduce the page size so that user don’t have to scroll and can easily compare pools. Second, it removes the repeating information from cards, thus giving more breathing space to design and data.
• Properly positioned the search and filters. Added filters to the table heading where the user can sort ascending and descending. Also added a search tab that users can use to search for a specific pool. This UI is similar to a lot of other apps, therefore familarity for user when using.
• Redesigning the deposit pop-up card with the new design system. Also added more data about what users canget when they deposit crypto in the pool. This will make users more informed about the rewards, therefore chances of depositing crypto increase tremulously.

Problem 2: Double dip page also has the same problem of lack of structuring as well as too much scrolling

• Same problem as the pools page where cards are big and repeated information on each of them.
• Overarching heading feels like a strip of information and search, filters poorly structured.
• Too long for a page that needs user effort to locate a particular card.

Solution

• Compelling the pool data into table format
• Converting the strip of information into heading cards sets the context.
• Apart from that, a double-dip is exclusive to ORCA. Therefore, user education is necessary. So added a card on the top itself giving the brief about a double-dip and a link if the user wants to read more. The main reason to put it on the top of the page was to educate the users first about the page and how to use it so that they can use it flawlessly.

Improvements

These are the new features that I designed for the ORCA which takes the user experience to next level.

1. Assets table

Added a new page showcasing all the assets that a user can trade on ORCA. This page is under the swapping page. All the tokens are listed in the form of a table where users can view the current market situation and common data points such as price, 24h volume, and % increase or decrease. This mimics the CEFI experience as well as establishing the credibility of ORCA as a very good exchange if there is a long list of assets available to trade. This way if a first-time user lands on ORCA and sees this screen, he/she gets an idea of what assets are available. Therefore, when the same user wants to trade again, the chances of coming back to ORCA increase since the user knows that assets A is available here. Also, clicking on one of these assets will lead you to the swapping screen.

2. Overview page

When a user lands on ORCA, immediately landing on the swapping page feels a little weird. Most of the other exchanges have a home page and then launch app flow but that doesn’t serve much of a purpose. Therefore, for ORCA I decided to go with the overview page. This page contains all the active positions for a particular user. These positions are visible when a user connects his wallet to ORCA. It will show all the available assets that users have and also all the active pool positions if a user had deposited anything in the past.

Also, all the ORCA rewards from all the active pools can be collected with a single click. Moreover, data points for all the active positions can be seen here with an option to withdraw or deposit more.

Also, aggregate from all the active positions is shown right at the top giving the full overview to the user. A moving strip with all the hot pools/trending pools are shown at the bottom convincing user to deposit more liquidity in ORCA for all of these amazing rewards.

Therefore, this screen serves as an anchor point for a user to give all the information about his assets and to collect rewards from ORCA. Also, this experience mimics the CEFI portfolio experience. As we make more and more experiences similar to CEFI, it is convenient for users to shift to all of these DEXs that offer such amazing APYs on top of self custody of the assets.

Here is the Figma link for the project!

That’s it, folks! Thank you for scrolling so long and making it till the end. Hope you enjoyed this detailed case study.

Being a Web3 nerd, currently looking for job opportunities as a Product Designer in Web3 space. If you’re hiring, I’d love to have a conversation with you.
You can message me on LinkedIn and Twitter. :)