Product Feedback on new designs

[kattylucy]

I created this ticket for product to use as the placeholder and add the feedback during testing.

What are we testing?

Landing page (/pools)
Pool overview page (/pools/:poolId)
Reports page (pools/reporting/)
Data page (pools/data)
Creating a pool and updating a pool in the configuration tab

It relates to all the work in the following tickets

#2392
#2391
#2390
#2427
#2459
#2460

[0x4Graham]

Hey!

Looks like updating the Target APY isn't working:

Never updated

[0x4Graham]

Very very difficult to click on this

[sonam-jo]

For funds that have only 1 tranche, we should just have the name of the fund under Token, and Token price in the chart -- no junior -- same as the UI today

[sonam-jo]

Axis for APY chart looks off -- it neither is the same for all time windows, nor does it adjust to show the graph properly with different time windows

[sonam-jo]

The only item missing from this Overview box is Expense ratio.

1. Expense ratio is something we calculate, and should appear in every fund we create as long as we have the fees numbers and the NAV.
2. There is a lot of blank space in the overview box. I would recommend increasing the spacing across the rows in line with Figma, and perhaps reducing the side of the chart so there is less white space on the page.
3. There seems to be a difference in the font size for the titles (e.g. Asset type) and the respective fields (e.g. Private credit)

[sonam-jo]

Transaction history table is not the same as FIgma

[0x4Graham]

Create pool button has the wrong colour

[0x4Graham]

When creating a pool, the APR for the tranche is also not set:

[0x4Graham]

When creating the pool, I only named the token "Twirl".

But the token name in the display is: Twirl Junior junior. Which shouldn't be the case.

[kattylucy]

The expense ratio is there but probably for this specific pool is 0 so it does not show.

For the APY, can you give me a bit more context on what do you mean? The filter is changing the APY based on if 30 days, 90 days, YTD. is this not what we want?

@sonam-jo

[hieronx]

Overall it looks amazing, really nice job @kattylucy ! Excited to see this go live soon.

I have quite a list of QA feedback, but they are almost all very small points :)

Landing page

• The full pool cards should be clickable, now the white space at the bottom half isn't.

• The ordering of the tranches should be senior at the top, rather than junior at the top.

• For the min investment fields, the prefix $ sign is missing.

• The color gray of the Total value locked (TVL) heading seems too light (#cfcfcf vs #82888D in design).

• There should be more padding on the right side of the Governance submenu:

• The padding on the top seems a bit off compared to the design. In the implementation, the top padding is less than the left padding:

While in the design, it is about the same:

• Nits:
  • Asset Type => Asset type
  • Min Investment => Min. investment
  • Tranches => Tranche

Pool overview

• The expense ratio should be the sum of all the fees in the pool. So for Anemoy LTF, the number should be 0.15%. It is now incorrectly showing as 1.20% instead.

• In the Reports section, none of the buttons have a hover action. I think it would be good to add this.

• The font size of the expense ratio tooltips appears too small:

In the design it is 12px.

• Nits:
  • Expense Ratio => Expense ratio
  • Cashflow statement => Cash flow statement
  • Executive Summary => Executive summary

[sonam-jo]

For the Transaction history table in the overview page, two changes:

• change Principal payment to Sale
• more description of the actions: e.g for the highlighted section in the screenshot, it should say Sale of 912797LK1, settled into Brokerage account

[hieronx]

• To add to @sonam-jo 's comment above, we should also fix the correction transactions:

These should display as Correction ↑ of Brokerage account (for a correction up), or Correction ↓ of Brokerage account (for a correction up), and Brokerage account should be a link.

• I would add $ prefix here too, to be consistent with the landing page:

• On the Reports page, can we make the bars (significantly) wider, if you have selected a longer period like monthly?

Similar to how the 30 day view on the pool overview chart also has wider bars than the longer time views:

[hieronx]

One more thing I noticed in the transaction history: the cash transfer here (on the bottom of the table for Anemoy LTF) should be from another account (Transfer account I think) to the Brokerage account, not from Brokerage account to Brokerage account. I think the assetFrom rather than asset should be used for the left side here.

[hieronx]

One more typo: Investor Type => Investor type on the landing page, within the cards.

[hieronx]

On the Liquidity page, I'd make these two buttons secondary/gray, like the Download buttons on the overview page.

[hieronx]

The Invest button should be fully right aligned, and have some more left & right padding within the button.

I'd also make the Token column a bit wider by default, so the other 3 columns are more closely spaced together on the right side, like in the design.

Design:

Implementation:

[sonam-jo]

Overview page

Cosmetic changes

• I still see junior in the token price for single tranche. it should just say Token price
• Shift the spacing around for the Token/Invest row such that there is more space between Token and APY and Invest is all the way to the right with a bigger box (similar to the UI)
• Do not show Pool analysis when there isn't any (like with DYF)
• Icons next to the Balance Sheet, CF, P&L should be in grey with more padding between the icon and text
• Min investment range for NS3 should be $5K - $25K, not the other way round. APY should also follow same logic of lower number first.
• Connect wallet instead of Connect

UX

• When there is Pool analysis, the report should be linked to Pool analysis title with an underline so it's clear that it can be clicked.
• Currently the CTA is always Invest, when it should follow the logic from the ticket:

CTA on the table depends on investor status
- If the wallet is not connected, the CTA should be "Connect" and should open the connect wallet flow. Do not open side panel. 
- If the wallet is connected, but it is not on the memberlist of the fund, then show the "Onboard" button. The onboard button should follow the onboarding flow (i.e Open up new page to Anemoy onboarding). Do not open side panel. 
- If the wallet is connected & is onboarded to the fund but has not previously invested, then show "Invest" CTA. Clicking on the CTA should open the side panel. Side panel should show the renamed "Investment position" and now include Realized and Unrealized P&L. It will also now include the APY in the Price chart. 
- If the wallet is connected & is onboarded to the fund but has previously invested, then show "Invest / Redeem" CTA. Clicking on the CTA should open the side panel to Invest.

[sonam-jo]

Landing page

UX

• APY on Landing page does not match APY in the Overview pages for DYF and LTF. They should be the same as Overview page.

Cosmetic

• Font size and spacing for single tranche pools with just APY and Min. investment looks off compared to the designs
• Lighter grey background for Closed box
• Can't really see NS2 icon
• Once all the short descriptions are in, check if there is still extra blank space at the bottom of each box. If so, consider reducing the size of the boxes and increase the padding between the top row and bottom row pools

[hieronx]

• The name here (Bank account) is now correct, but the link is still incorrect:

[hieronx]

The APY in the token dialog should be shown as %, not denominated in LTF:

[hieronx]

The right padding of the sub items is now fixed, but the right padding of the chevron of the Governance item is still too little:

[sonam-jo]

Reports page

Cosmetic

• Can we fix the first column for all reports such that when the user scrolls to the right, you can still see all the row headings?
• The calendar boxes next to the dates in the chart need to be closer to the dates. Same with the dropdown next to Monthly
• In the table, the grey lines for the rows should be lighter, in line with Figma. (Same with chart?)
• Change the date format in the chart from 11/10/2024 to Oct 11, 2024 (to be in line with the table)
• Boxes around Balance sheet/P&L/CF to be light grey, not black
• Can we have a smaller box for CSV?

[sonam-jo]

Data page

Cosmetic

• Fix the top row so when the user scrolls down, they can still see all the headers
• Change date format in the top box from 11/10/2024 to Oct 11, 2024 to be in line with the table
• Calendar icons to be closer to the dates
• All the fields in the filters seem to be in Bold, that's not needed
• Title of the first field in the grey box on the top should be Data not Report
• When the Network and Filter by address are in the same row, they are not aligned

[sonam-jo]

Landing page

On the top, can we replace TVL with Total Assets Financed as we have on the website today?

[hieronx]

• The range should only be shown on the pool overview page. In the card, where the APY is shown per tranche, there should be no range. In this case the Senior APY should just be 4%.

• If no APY is set, - should be shown:

• The token price for Tinlake pools should also be fixed to 6 decimals

[kattylucy]

Can we fix the first column for all reports such that when the user scrolls to the right, you can still see all the row headings?

This is within the table. I will try but would leave this issue for last, since we need to change the table a bit for this and we use tables a lot across the app.

Change the date format in the chart from 11/10/2024 to Oct 11, 2024 (to be in line with the table)

Unfortunately HTML date type (which is what we are currently using) only accepts the YYYY-MM-DD format. It’s a bit more complex to do but since we use our input on different places (from fabric) and we want to deploy on Wednesday. Maybe we can have this changes that require more work for after the release? I don’t want to make a big change in the component and broke something else from lack of testing.

@sonam-jo

[sonam-jo]

Yes neither is launch blocking - we can do fixing table columns and date formatting post release.

[kattylucy]

Great - I will prepare tickets for those @sonam-jo

[hieronx]

@kattylucy a small design change to the sidebar:

• Can you add more padding to the Centrifuge logo so the left and right padding is aligned? Looks like it needs another 8px on top.
• Can you add rgba(145, 150, 155, 0.13) as the background color for the active menu item? Also needs margin-right: 20px; border-radius: 4px; on the anchor tag.

See sample screenshot of how it should look:

[BrianCarter-Design]

Hi @kattylucy I've reviewed done a full design QA on the pages that are in dev so far. I've added a link to the Figma file where I've documented all the feedback. I've noted everything I could find, so most of it is minor and perhaps a low priority, but just thought I would add everything.
https://www.figma.com/design/ng7qdNcSCXSDA6ZUdWIs6u?node-id=4013-2504#986168970

[sonam-jo]

Start execution order CTA is showing up on the Liquidity page for the 3 Tinlake pools, when logged in as Alice or even when not connected to the wallet. Please remove.

[sonam-jo]

For DYF, the APY of 8.95% is incorrect. I've created to investigate this post launch, but for the time being, can we please hardcode 15% target as APY for both the landing and overview pages.

[sonam-jo]

For NS3, we seem to be having the same issue as DYF. Can we please hardcode:

Landing page
8% target for Senior
16% target for Junior

Overview page
Overview box: Target APY with 8% - 16%
Token table: 8% target for Senior, and 16% target for Junior

[hieronx]

@kattylucy to this point: #2471 (comment) looks mostly correct now, except the background color is only implemented on hover, but should be always on for the active item (so it shows permanently for that one, not just on hover).

Also looks like the margin right is more than the margin left. Could you set the margin left to the same as the current margin right value? (this was probably my mistake!)

Finally looks like the margin top on the landing page within the main content should still be increased.

Implementation:

Design:

[sonam-jo]

Landing page

1. For the laptop view, currently we can see 4 pools. Can we enforce showing only 3 pools so the short description does not run into 3 lines (remains to 2). You can then see if we can increase the font size to 14.

2. For DYF, we keep the title as APY (like the rest of the pools) but add target after the 15%, like done for NS3. Please target, no capital T

3. For NS3, APYs need to be swapped. Senior is 8% target and Junior is 16% target

4. For NS2, can we change Investor type to Qualified US and non-US investors and Asset type to Residential real estate (same as NS3). Also missing $ for the 5K min investment.

[sonam-jo]

Overview page

1. For DYF, can we change the font size in the service providers box so they all fit in 1 line

2. For DYF, keep the title as APY but change to 15% target

3. For NS3, APYs need to be swapped. Senior is 8% target and Junior is 16% target. Shift the white box of service providers to the centre of the text.

[sonam-jo]

For the Tinlake pools, when clicking on Onboard -- its taking user to the Onboarding flow when users can no longer invest in them. For these 3 closed pools, please change the CTA to Closed and disabled