Website Plan & Site Map

Hey all, would love to get some feedback on some design and branding work that’s been ongoing.

Website

A group of community members has informally grouped up in a leaderless way and have been working on branding, design, and the website. This is the result of many people’s work, including: @FutureFund, @iTo, @WrongNebula, @nomad, @Definn, @x48, @Danger, @learnyearn, @lehnberg, @franklin, milkyklim, banteg and many others I apologize for forgetting atm.

This is an ongoing and open process so if you want to be involved please jump in.

Our current plan is to update yearn.finance with a new site map that collects the various ecosystem domains under one improved frontend that isn’t a complete design overhaul but more of a refresh to the original which has become iconic and we all quite like. @FutureFund and their team are doing all the design work pro bono.

Here’s our latest crack at a Site Map:

Page Details

Stats

  • Rollover: Track your portfolio’s growth and view stats across all of our products
  • This would include the current Dashboard features

Products

  • Rollover: Use our yield-aggregating Vaults, purchase Cover, and mint yUSD at the source
  • All protocols ready for enduser interaction via a UI would live here

Labs

  • Rollover: See our research and development work, backend protocols, and new stuff
  • This space is for more b2b style legos like yBorrow and stuff still in development or early testing

Governance

  • Rollover: Take part in deciding Yearn’s future by participating in our thriving DAO
  • Aggregates all the governance sites in one place with the option to redesign each one in the future as our gov process evolves

Community

  • Rollover: Check out the best projects from our active community
  • Redirects to learnyearn.finance which will be transferred to yearn control and evolves into a critical onboarding site and community portal
    • Gallery of yearn partner sites so we can have one place with alternative frontends and 3rd party stats sites to both feature them and also help validate what’s legit from the spam and scams out there
    • Visual How-To guides and aggregate explainer docs, images, and videos from the community

Docs

  • Rollover: Learn the details about how Yearn works and find answers to common questions
  • The official docs which is most of what’s there now plus many more dev resources which we are launching now.
  • How-Tos will move to learnyearn and we’ll need to figure out the balance there a bit over time
15 Likes

I like this idea a lot. I like Yearns simplicity on the site because it seems that would be pretty low overhead, but having to remember where something is or go to another site to get something done is a pain!

Great effort, I like the idea of separating Products vs Labs.

Can we consolidate it even further by putting ‘Docs’ and ‘Community’ (call it onboarding maybe) under a “Learn” top-level nav?

5 Likes

Looks great looking forward to an immediate view of portfolio performance

Community? I think you mean yCulture.

4 Likes

Also, @tracheopteryx– you mentioned for people who want to help to jump in– but what would be the best place for them to do so?

I like the proposed Site Map, but just took a stab at reimagining it myself:

Yearn (Home Page)

  • The Yearn home page, in my eyes, should be modeled after something like Uniswap.org, that is, not swamped with info, images, and buttons, but rather simple and clean.
    It should consist only of a top horizontal menu bar and one sentence about what Yearn represents, such as “Yearn is a suite of decentralized protocols focused on value generation through high risk-adjusted returns on tokenized assets.” The It should serve as a web2 portal to both web2 and web3 interfaces. As such, it should feature a “Launch Apps” button that allows the user to launch any of the 3 “Products” listed, in addition to launching directly from horizontal menu bar, described below.

  • Products
    Unclickable item in horizontal menu bar with dropdown menu containing the following:

    • Invest
      Clickable link to Balances & Holdings (what is currently called the Dashboard)
      Rollover: “Passively manage your funds through automated investment strategies that put your money to work, while keeping costs low”
      • Balances & Holdings
        Redirects to a page similar to yearn.finance/dashboard
      • Transactions
        Redirects to a page with a similar interface to that of zapper.fi/transactions, which allows the user to see there previous transactions into and out of Yearn’s Vaults.
      • Explore Investment Options
        Redirects to a page similar to yearn.finance/stats
    • Mint
      Clickable link to interface for minting yUSD
      Rollover: “Mint yUSD, an interest-accruing token backed by stablecoins pegged to the US Dollar”
    • Insure
      Clickable link to interface similar to yinsure.finance
      Rollover: “Purchase decentralized insurance coverage to protect against losses due to smart contract failure”
  • Labs
    Unclickable item in horizontal menu bar with dropdown menu containing the following:

    • Developer Tools
      Unclickable item with dropdown menu containing the following:
      • yBorrow
        Rollover: “A tool enabling credit delegation for smart contract-to-smart contract lending”
      • yLiquidate
        Rollover: “A tool enabling automated liquidations using flash loans”
      • ySwap
        Rollover: “An automated market maker (AMM)”
      • yTrade
        Rollover: “A leveraged stablecoin exchange, allowing users to borrow with up to 1000x leverage”
    • GitHub
      Redirects to GitHub
    • DAO Vaults
      Clickable link to yDAO interface
      Rollover: “Community driven funding for the open source maintenance of the Yearn ecosystem”
  • Governance
    Unclickable item in horizontal menu bar with dropdown menu containing the following:

    • YFI Token
      Rollover: “Learn about YFI, the Governance Token that controls the Yearn ecosystem”
    • Governance Forum
      Rollover: “Participate in community discussion regarding the future direction of the Yearn ecosystem”
    • Governance Portal
      Unclickable item with dropdown menu containing the following:
      • Vote
        Rollover: “Take part in shaping the future of the Yearn ecosystem by voting on Yearn Improvement Proposals (YIPs)”
      • Stake
        Rollover: “Deposit your YFI tokens to unlock voting capabilities and begin collecting fees from protocol usage”
  • Community
    Unclickable item in horizontal menu bar with dropdown menu containing the following:

    • Discord
    • Twitter
    • Telegram
    • Blogs (Unclickable item with dropdown menu with links to Learnyearn and Andre’s Medium page (more “approved” blogs in the future?)
  • About
    Unclickable item in horizontal menu bar with dropdown menu containing the following:

    • FAQ
      Redirects to interface with similar content to docs.yearn.finance FAQ
    • Jobs
      Redirects to a Jobs portal maintained by Yearn Governance
      Rollover: “Search and apply for salaried positions funded by Yearn Governance”
    • Logo & Brand
      Redirects to page in which you can download the official logos of the Yearn ecosystem (YFI, yUSD, yETH, etc.) and other official Image Assets

As you can see there is certainly plenty of overlap with what was already proposed, but figured some of these proposed differences/additions may be worth considering. Ultimately, what I’m proposing is to implement a UI that feels a bit more like Uniswap’s, as I find it’s UI to be very clean and logical. Thoughts?

3 Likes

Some good ideas here. Thank you.

3 Likes

I think @mdesim01 answered this question perfectly. The best place to jump in is exactly where you’re at.

Thanks for this! Really helps to have another POV on this stuff. And I agree about uniswap in part—though I’m not a fan of the web2 vs web3 UX distinction and get confused by their organization. I’m not sure why a “launch app” button is needed?

Thanks for the feedback. Platforms like Uniswap and Aave have a homepage that feels like a standard trad-fi website, but instead of having a “Sign Up” button to prompt creation of an account, you hit a “Launch App” button (Uniswap) or “Enter” button (Aave). While many on CT may not think that this is an important feature to a homepage (since “accounts” are not even a thing in DeFi) and may even find it to be a nuisance at this point, I believe that it is a crucial onboarding feature.

I’m trying to put myself in the shoes of a nontechnical user who has just heard about Ethereum and does not yet understand the concept of having a Metamask wallet (it goes without saying that the vast majority of people in the world have never heard of Ethereum, DeFi, or virtual wallets). Imagine this user visits our site upon learning from a friend about this thing called Ethereum and hearing that there’s an application called Yearn that is like Vanguard or Wealthfront but way better (for reasons that we all understand, but that person does not yet). That user visits our site to learn why it’s better and to hopefully set up an account. He does not know that there is no such thing as having an “account” in this platform. In my opinion (and in my own personal experience in showing this stuff to family and friends on their own personal computers), that user does not want to immediately see an interface that look as if he has already signed into an account yet cannot see half the content because the site needs him to “Connect Wallet”–something that he doesn’t even know is a thing. He wants to see an interface that feels familiar to him. He has interacted with trad-fi applications for the past decade and has online accounts with banks and investment platforms–all of which required that he set up a username and password to use. That person is expecting to learn about our services and then hit a “Sign Up” button.

The “Launch App” button is the equivalent of the “Sign Up” button, and upon clicking it should immediately prompt the user to “Connect Wallet” and provide links to Metamask’s site, etc., as we should assume that many people visiting our site for the first time do not have a wallet, nor understand what it is.

In time, I think this can and should go away, but not until the vast majority of internet users know what DeFi and virtual wallets are and have already used both in the past.

Sorry for the long-winded response!

3 Likes

Any updates and/or need for more community input regarding new UI design and/or branding? I’d love to get more intimately involved in this, but I also don’t want to reinvent the wheel, as it’s been implied that there has been a decent amount of headway made already. It’s difficult to help out when there’s such little communication (this thread and others related to UI and UX have been fairly dormant), and there doesn’t seem to be much substance on this subject in Discord, Telegram, or elsewhere. I know that @tracheopteryx and @FutureFund, among others, have been leading the way with this. Can we get some updates on progress on here so that we can get back to collaborating?

2 Likes

Most of the work I am aware of is happening in a telegram group, I’ll dm you.

The info from this thread and others is super valuable and gets integrated into the work. The info exchange and comms are not as good as they could be. It’s a lot easier to work in smaller groups, but then they feel private, and it’s hard to sync info, and I wish I knew a better way to do it.

Currently @FutureFund is finishing up the design and @x48 is doing the dev. Hope is to have a site up this month.

2 Likes