Figma File:

Redesign Mockups

Landing Page

User Goals: Quickly understand what Saros Finance is, what it offers, and know how to start using it without any confusion

Issues

1. “No Wallet” doesnt stand as a good CTA

2. Items in “explore section” aren't vertically centered on certain screen sizes. This is an issue of scrolling.

   

3. The overall scroll animation is very janky and is not a smooth experience

4. The “Resolving Problems & Offering The Best” section is a confusing zigzag layout. The zigzag makes it seem like the items are chronological and they actually don’t need to be. Would cut down on space usage too.

5. Powering the Saros section:

   • Title makes no sense
   • Looks like a Venn diagram... but that is very confusing

6. Landing Footer looks very unprofessional

   • No copyright
   • No logo
   • No terms + Privacy Policy
     • questions credibility

7. Splash Section:

   1. needs better CTA buttons
      1. Learn button doesn't feel like a “primary call to action.”
   2. I don’t know what super network means

Solutions

1. Change to “Connect Wallet

   

2. Suggestion (2 and 3): remove the scrolling mechanism, go back to continuous scroll. When you have pane by pane viewing, things easily get cut off on the screen and there’s no way to view those items.

   

3. See Suggestion 2

4. Redesign the section by using a grid layout - it makes it much easier to read through and is more space efficient.

   

5. Values + incentives should be something more like: “this is what you put in, and this is what you get out”

   

6. Add in copyright, logo, and a terms and privacy policy especially since you guys are a Defi Platform.

   

7. Title on splash screen should have greater font width

• Add Learn more + Start trading buttons.

  • Make the start trading button black or dark blue and lead to the app, make learn button go to blog

  

1. Add in major statistics of the platform on the landing page to increase credibility... ppl want to know that there’s liquidity and is not sketch

   • TVL
   • Total number of pools

   

Swap Page

User Goals: to be able to easily select two tokens to swap between, see a chart of the 2 tokens selected, their transaction history, select a slippage fee, and be able to clearly see the final amount they have to pay to swap their tokens.

Issues:

1. The spinning button seems unecessary and doesn’t serve a purpose. why is it counting down? What is going to happen if it goes to zero?

   

2. “History Transaction” is poorly worded.

3. This portion has no value to the user

1. The settings icon to change slippage fee is another high friction action for the user, the settings icon is not the right icon to indicate that by clicking that button, one would be able to change the slippage fee.

Solutions:

1. Remove spinning button

   

2. Reword it to Transaction History and No Data

   

3. Replace with Total value to show user how much they have to pay as a final amount

   

4. Give slippage fee options directly next to the slippage tolerance section

   

Liquidity Page

User Goals: To be able to add liquidity pairs into any pool.

Issues:

1. The timer widget is unclear and doesn’t serve a purpose. (same issue listed in the swap page section)
2. The title “Liquidity” doesn’t make a lot of sense. “Swap” is a verb, and liquidity is a noun. It seems like the verb would be “pool.”
3. It’s not very clear how to get started on the page— where do I click first?

Solutions:

1. Remove the timer

2. Rename “Liquidity” to “Pool” and “Pools” to “Charts.” This is what Uniswap does, and it is much clearer.

   

3. Start the user in the actual pooling interface vs their list of pools— new users will inevitably have no pools, and they will be confused. Also, consider starting the user off with two coins populated in the pooling interface, rather than nothing populated.