UX design: improve strategy and pool cards in home page to show better info

[akiraonstarknet]

The below cards need to be improved to show more info for better UX:

Strategy card:

1. Strategy name along with its token icon. Some strats may have 2 tokens as well.
2. Underlying protocols involved (e.g. zklend, nostra) - max 2 protocols
3. APY - Key metrics and needs max attention - upto 2 decimals in %
4. Boost (e.g. 1.6x) - Something more visual could be nice instead of just a simple number showing multiplier as in current design. if no visual ideas are available, atleast some visual distinction between low boosted strats (e.g. 1.1x) to high boosted strats (e.g. 1.6x) to get people attention on high boosted ones would be nice
5. Risk -> its a metric from 0 - 5, 5 being no risk, 0 being very risky. Again, its something i do not want to have number and something visual would be nice. Exact number need not be shown, but rather the feeling of risk has to be conveyed to user (e.g. it can also be in 3 categories => low, med, high)
6. TVL in the strat ($ terms) => good to have
7. user deposits in the strat (token and $ terms, latter being like a sub-title) => I think would be good UX to see all invests across pools at one place
8. If a strategy is audited, add something that indicates that its audited giving the feeling of safety and security to user. (like a blue tick mark in socials)

Pool card improvements

1. Protocol with logo
2. Pool with logo (max 2 icons)
3. APY in % with 2 decimals
4. TVL in $, no decimals
5. Risk (similar to strategy card)

[kiyoshizk]

I would like to work on this

[akiraonstarknet]

Done ser @kiyoshizk. Assigned to you.

[akiraonstarknet]

@kiyoshizk add one more data point to strategy cards. If a strategy is audited, add something that indicates that its audited giving the feeling of safety and security to user. (like a blue tick mark in socials)

[kiyoshizk]

@akiraonstarknet added designs on figma as per brief.

Figma link https://www.figma.com/design/aRQ6kg5LBUb4jMgcM9Ybff/Strkfarm-assets?node-id=629-1420&t=BWzZPSC4nwHeLJc9-1

[Ayoazeez26]

@akiraonstarknet I would love to implement this: my approach would be to convert the design to code to match what is in the figma file to pixel perfect, and change the color that is on the progress bar to match the status of the progress as displayed in the design file. I would ensure that all data represented on the design is captured in my integration

[akiraonstarknet]

@Ayoazeez26 Assigned issue. Please start with pool card, finish that, raise a PR with vercel link as asked in PR desc. If all ok, work on strategy card can be done.

Can u share a rough ETA?

[Ayoazeez26]

@akiraonstarknet 24 hours but realistically should be completed before then

[akiraonstarknet]

@Ayoazeez26 Additional context:

1. All stable coin pools (i.e. any pool just involving USDC, USDT as tokens) to be marked with safety score as 5/5. Tooltip on hovering it should say low risk
2. Any pool involvingatleast one ETH or STRK should be marked as 3/5. Tooltip to say Medium risk. This element must be in orangish color as shown in design.
3. Also add heading as Safety Score for this column.

[Ayoazeez26]

@akiraonstarknet thanks. I have a question I can see two final pool cards on the design file and the difference in them is that they have different background colors and one has 1 token and the second has 2 tokens. Do I implement in a way where if there is one token it has a different background color from when it has 2 tokens?

[akiraonstarknet]

@Ayoazeez26 if u look at strkfarm.xyz, Find pools tab, it already has cards with alternating colors.