Redesign + Critique | SuperTeam X AshM

<aside> 💡 Figma Link https://www.figma.com/file/wdbPylaicvZV8qNfDgi8KR/Saros-Redesign?node-id=102%3A557

Prototype Link https://www.figma.com/proto/wdbPylaicvZV8qNfDgi8KR/Saros-Redesign?page-id=1%3A36&node-id=5%3A2366&viewport=241%2C48%2C0.37&scaling=scale-down-width

</aside>

Screen: Landing Page

User Goals: Understand what Saros is, offerings, and usage.

Untitled

Problems:

  1. This section should depict the key values of Saros that are output oriented for the user. ‘Defi Super Network Built on Solana’ doesn’t add much value to keep it as a header.
  2. Current font (Quicksand) is too informal with its rounded corners and gives a playful feel.
  3. Alignment is something that guides the user to absorb information. Making it aligned in a way with the above animation again focuses on Saros just being a system built on Solana.
  4. {Minor} Font Weights are not appropriate to draw the user attention to the right place

Untitled

Problems:

  1. This section is coming right after the first scroll. Before understanding what Saros is offering different, this piece of information is inappropriate at this time.
  2. Tile alignment is visually messed up with chart on the end.
  3. The focus here is to give the user a glance of portfolio of all the tokens available, it should look aesthetically pleasing rather than much informative.

Untitled

Problems:

  1. Visibility - The background illustration and header color is adding a difficulty in the visibility of the main information. The two globes are given too much of transparency that the main focus on feature is getting hindered.
  2. Alignment - Zig-zag alignment with a gutter for the second one is great but the text alignment in which the header starts from the right-inside of the tile makes the readability complex.
  3. Attention - Adding almost similar icons in terms of color & tone decreases the attention span of the user that
  4. Importance - This is an important section for the user and should come right below the fold section to convince the user to scroll further.

Untitled

Problems:

  1. Visibility - This segment depicts the various products of Saros and this the size, margin, and padding should align with the importance of each. This section tiles should also be different than rest of the tiles on the same page.
  2. Pain - Asking the user to go the the app but then saying this is not available at the moment is a huge pain for user.
  3. Graphics - Icons are too small and don’t look visually pleasing.

Untitled

Problems:

  1. Readability: The readability flow is drastically broken. Consider someone starting from the left. After a detailed look, user will get to know that this is an outwards flow of information.
  2. Background: The size and color grading is hindering with the background making it difficult for the user to understand.
  3. Negative Area: So much negative space on both the ends makes the section visually impaired.

Untitled

Problems:

  1. List is quite good already, All that needed attention is footer section.
  2. Footer needs to include the important links, resources & socials

Untitled

Solutions:

  1. What you can do with Saros? Swap, Stake, and Invest. But why? It’s Low cost, high efficiency, and ultimate experience. Telling this piece of information above fold to convince the user to scroll further.
  2. When it comes to fin-tech, the right font should give the essence of trust & sincerity. A few examples of right fonts here might be Poppins, Inter, Gilmer, Gilroy, etc.
  3. Centre-aligned elements will create a top-to-bottom flow for the user to absorb all the information in the required manner.
  4. More focus on Header with a gradient to help user begin with the flow.

Untitled

Solutions:

  1. Give this information once the user is here to go further into the Saros ecosystem and understand what Saros can do for them.
  2. Aligning the whole section in two halves to keep a static attention to the header & CTA.

Untitled

Solutions:

  1. Listed the section in two halves to give importance to the header.
  2. Added a CTA to documentation for someone who wants to understand these features better right here.
  3. Center-aligned tiles for the features with colored-3D illustrations to keep the user interest in reading them all.
  4. Quite clean background so that the focus area is exactly the features list and not hindered by the background
  5. This section is kept right below the fold section to make up to its importance on the page.

Untitled

Solutions:

  1. Keeping a mild gradient in the bg to keep the visibility and focus steady.
  2. Giving an aesthetically pleasing pattern to the tile to make it stand out.
  3. Adding different CTAs for different tiles based on the current availability of features in the app and minimising miscommunication.

Untitled

Solutions:

  1. Making the interpretation of the section quite easier to understand. Powering the Saros? What is it? $SAROS it is. But How? These are the values & then these are the incentives.
  2. Keeping in mind the flow of how a user will absorb the information. Top → Left → Right → Bottom
  3. Highlighting the key areas of interest - Values & Incentives, to help the user quickly take a glance at interested ares.

Untitled

Solutions:

  1. Made the footer more detailed in terms of information. We might prefer not to include the same footer for in-app screens.
  2. List of backers is made more prominent with added hyperlinks to individual backer.

Screen: Swap

User Goals: A simple UI to help the user swap quickly & easily.

Untitled

Problems:

  1. Icons with no info about what they do might unease the user to check them. Using the bare minimum to fulfil the needs is what makes this screen easy to use.
  2. There’s no definite criteria on which chart will appear (C98 or USDC in above case)
  3. Refresh meter can be skipped and we need to add an hover icon to display information about certain items. We can’t assume that user knows what slippage rate is.

Untitled

Solutions: