top of page

SAROS UI UPDATE

Redesigning the UI for Saros Finance's web app. This was a design bounty done for SuperteamDAO.

BACKGROUND

Saros Finance is a Unified Suite of Decentralised Financial Products with three fundamental building blocks: SarosSwap (AMM), SarosFarm (Pool), and SarosStake with SarosSwap being the core of the entire ecosystem. It is built on the Solana blockchain.​

UNDERSTANDING THE PROBLEM

Using the existing webapp gave an insight into the limitations and difficulties dealt with while using the app. Being familiar with decentralised apps, I tested the existing myself to find the pain points and possible solutions to improve the user experience.

 

While the task was to visually redesign the elements, it was clear that it needed some functional changes.

  • Navigating around the app is complex and confusing. Multiple action buttons lead to the same tasks.

  • As a financial application, analytical data for the users assets is non existent

  • Visual consistency across the brand is missing.

As the turnaround time was limited, I treated this as a mini design sprint. Using a simple framework to solve the task at hand.

2. Swap and Adding Liquidity

  • The overview section works as a dashboard providing two groups of metrics, the overall dApp metrics and the users portfolio. On the dashboard, the user can see their distribution of assets and also has quick access to take actions such as Harvesting staked tokens, quickly directed to LP asset, etc.
     

  • Switched to a side bar for navigation to provide the user a direct and easier access to desired sections of the dApp.
     

  • Top bar includes the metric of the star of the ecosystem, the Saros token price. It also has the wallet information.

  • A toggle switch enables switching between the swap and liquidity to the console. This is similar to what was commonly seen in designs of dApps. The user must be able easily switch between the two as they swap/buy tokens before adding liquidity to a pool.
     

  • The nav bar has a SarosSwap and Liquidity tab as well. The sole reason for having them as separate tabs is from a branding standpoint. Since we are promoting ‘SarosSwap’ as our prominent feature, it doesn’t make sense for it to be hidden under another tab.
     

  • ​A dropdown console gives all the necessary information about the pool. The user can add, remove or simply view the information from this console itself.

3. Pools

  • We will see a dropdown console across the dApp. Here, it gives the user all the information and metrics they need at a click of a button. The user gets an overview of their share in the pool, on top of which they can directly add further liquidity from the console itself.

    This not only eliminates the requirement of being directed to another page, but adds all the metrics and data in a concise manner. While this works well from a user experience standpoint, it requires a bit more work on the development side in terms of loading the charts in the background, etc.
     

  • The search bar has been added here for the user to filter out pools. The interface makes it quick for results to come up in this list form.

Press Some Buttons

DEFINING GOALS

To find the right balance between making changes to the interface and not straying too far away from the current app, I did a competitor UI analysis and tested the app as a user to define what needs to be updated to make it a more streamlined experience.

To help work on this, I've broken down each screen and developed a consistent system across the web app.

4. New Sections (Stake, Tokens, Farm)

1. Overview

  • The screens for other sections of the app follow the same principles kept in mind while designing the other sections. The intention is the same, to have easy to follow and quick navigations for the user.
     

  • Similar to other platforms, on approving the contract, the approve button changes to ‘Stake’

4. Transactions Interface

  • An unusual approach to try and solve this. Let’s say we clicked the ‘view all transactions’ button on the C98 - CASH LP in the 'pools' section. We will then be shown all transactions related to those 2 tokens. This is done using tags for the tokens. The user can then toggle between all, swapped, added and removed transactions. (Similar to the existing design) But if the user wishes to C98 - USDC transaction without going back and finding the LP pairing, he can simply remove the CASH tag and search for USDC. They will then see the transactions for those pairings.

    Essentially, its the same page the user comes to, the filters/tags differ based which pool, token or farm they was redirected here from. So they can search for any transaction from a single page!

bottom of page