Feedback: Outercore's request for design feedback on: stFIL, SFT, Filet, and Glif

[jimmylee]

Who is reviewing...

Hi 👋 I go by Cake in the ecosystem-dev channel in the Filecoin Slack.

I am an engineer, designer, and I help manage a fund. Before joining Protocol Labs (where I have been for ~3.5 years), I was either a very early technical contributor or founding team member for 7 startups.

A few years back I designed and launched https://slate.host for consumers on Filecoin.

I obviously care a lot about Filecoin and financial services! Some of my close design peers have designed at Paradigm, Square Cash, Coinbase, DyDx, and Fey and I've had many great design conversations with them. So I'm happy to lend a critical eye on the user flows for the following websites:

• stFIL, [needs work]
• Filet, [almost there]
• Glif [just some nits]
• SFT Protocol [just some nits]

In addition, I will try not to focus on the visual design quality of your sites unless it feels buggy. Instead, I have listed some high level guidance:

• - should be obvious in 2023 to be using a grid system
• - should be obvious to keep all measurements in a pt system
• - you should measure first paint speed
• - get a lighthouse score over 95
• - solve FOUT issues
• - all transitions should be at 60FPS, learn how to kick the compositor early on in the browser's page load before the user event occurs.
• - font hierarchies are good, see this link: https://www.editorx.com/shaping-design/article/font-size
• - check for typos
• - don't leak user information in the client such as in user information that comes from a database
• - optimize your SEO
• - make sure that if the user has an ad blocker, your scripts are non-blocking, meaning the exception thats thrown doesn't cause the rest of the client-side JavaScript to crash.
• - everything should be mobile responsive, design your components to be fluid from the start so you don't have to make a mobile version for everything.
• - make sure things are vertically aligned.
• - make sure you're using assets that are 2x-4x their normal size for retina screens. No one likes logos with bad antialias

So lets move on to the feedback, here are my notes from spending 10 minutes on each staking site.

stFIL

• There is no way to give you my FIL easily from the marketing page.
  • Other sites have a big deposit CTA, why doesn't stFIL have one? Did I miss the button to connect my wallet through WalletConnect/RainbowKit/MetaMask/etc?
• The loading interstitial at the beginning is unnecessary.
• The scroll lock performs poorly, a couple of scrolls up and down the page are frustrating already.
• The fancy background is cutting off in a strange place near some text. It makes the page feel glitchy, here is a screenshot:

• Saying you are "Community First" without showing a single member of the community or anything they have said makes me feel like you have no community.
  • Maybe show some testimonials?
• The security section should just list the audits and who they are by on the marketing page without having to click.
• Whenever I click into a section, If I hit back, I have to see the loading interstitial again, I really do not like this loading interstitial.
• Transition effect over the cards adds nothing to the importance of clicking the CTA.
• Every page load I have to see the interstitial, I recommend you get rid of it.
• Clicking on the Chinese translation doesn't do anything. Am I missing something?
• Would benefit a lot to have some regulatory guidance
• Would benefit a lot to have some tax tips for users in the US (or anywhere with more strict tax laws).
• Clicking the protocol link is just a way to get the loading interstitial to appear again. That isn't fun.
• The documentation site (https://docs.stfil.io/) has far more functional purpose than the marketing site (stfil.io), I feel like if you replaced your marketing site with the documentation site and added the join mailing list to your documentation site, you wouldn't need your marketing site until you had more to offer people visiting your marketing site.

Overall: Seems like a site for people who know what they're supposed to do here, otherwise I have no idea what to actually do here. I'll do something which is called "drop off", where I don't really see the point of being on this site. The "Subscribe to our mailing list" is the best part of your site, its the only portion that converts the user in a meaningful way (collects e-mail).

Would stFIL convert me? No.

Filet

• IMPORTANT: DAPP should say "Stake Filecoin" instead, no one knows what a button that says "DAPP" is supposed to do.
  • Improving the CTA will improve the conversion on this site.
• Ledger and Metamask should be options for staking. A lot of western users probably do not have the wallets mentioned. In addition, everyone in the west is used to seeing WalletConnect or RainbowKit https://www.rainbowkit.com/. Both of those wallet integrations have good experiences.

• "A trustworthy platform providing staking service stably" should say "We are providing a trustworthy Filecoin staking service"
  • Bonus points: Just show who trusts you (which companies, notable users, etc), it would be a better signal than the three boxes you have. People like to see people they trust using your service.
• The StakeFIL to earn FIL section could easily go up higher on the page, this is what people actually care about.
• The Media Partners section carousel is broken. Before you fix the carousel, consider not having one. Instead you could just render all of the media partners out into a grid. It will look better and the user doesn't have to click or tap to see more of the media partners.
  • Side note: The content inside of these posts is good! You should surface more of this content on the marketing page, it gives Filet more credibility.
• The FAQ section "How does Filet Work?" has a lot of great content. Some of this content would do better as hooks on the marketing page so you can convert the user sooner.
• Tell people what TVL means.
• Would benefit a lot to have some regulatory guidance
• Would benefit a lot to have some tax tips for users in the US (or anywhere with more strict tax laws).

Overall: The page loads fast and helps add to the feeling of professionalism. The website could use some copy improvements and more meaningful copy, I think if Ledger and Metamask are supported wallets, using Filet could become a popular option. Definitely need to fix the CTA so people understand what to click to stake.

Would Filet convert me? No.

Glif

• https://www.glif.io/?txtype=send this is a smart URL to have and very good idea, everyone should learn from Glif here. Immediately I know what to do.

• Connecting a wallet looks easy.
• I wouldn't open with "Genesis Pool" is now "Infinity Pool", I would open with marketing explaining what this all is sooner, and then explain the name change later.
• "Trusted by the heart and soul of the Filecoin community" can be better served with a real example of how the community trusts GLIF.
  • Example: "Join the ten thousand users using GLIF tools today" something like this, with examples.
• Page loads quick, the experience is straight to the point.
• Would benefit a lot with some audit information
• Would benefit a lot to have some regulatory guidance
• Would benefit a lot to have some tax tips for users in the US (or anywhere with more strict tax laws).
• More numbers explaining the potential returns (like Filet) could help.
• Love the big deposit CTA.

Overall: Fast user conversion experience sets Glif's website apart from the rest of the staking sites I have seen so far. Seems like the goal is to get your FIL and they focused the website experience on getting your FIL. True to intent.

Would GLIF convert me? Yes.

SFT Protocol

• The hero copy is worded awkwardly.

Liquid staking derivatives for Filecoin while ecological infrastructure provider

• It should say something like

Ecologically friendly staking derivatives for Filecoin

• I like the design, clear CTA (call to action), if I fail to convert, I'm taken (with proper visual hierarchy) to the next section where I can learn more.
• "Latest News" SEO images look terrible and take away from the clean design of the site, I would just use custom ones.

• You might want to bump the font weight on the primary CTA text, might make it a little more enticing to click.
• On the Mint section, make sure you remind the user to connect their wallet, it doesn't hurt to show the connect button in the Mint section in case they don't see it in the top navigation.

Overall: Another website with a faster user conversion experience (like Glif). The site could use less vertical space/height and make sure they don't lose users because they missed content below the fold. The website interface also needs more testing in different viewports, some components that should obviously resize when the screen resizes are static.

Would SFT Protocol convert me? Yes.