--- tags: brand --- # 30 Oct 2020 — Yearn V2 website call 1 Document outline: 1. Website plan 2. Same plan but for commenting/adding feedback 3. References/other stuff Discussion points: - Make our process leaner and distribute more power to this team so that you can function indepently and are empowered to make decisions. What is the minimal structure you need for this to work? - Future (design lead) - WrongNebula (design partner) - x48 (dev lead) - There is way too many steps and pages in the V2 design (Miro board), goal would be to have less clicks for the users to go from point A to B. - Stats (both on Stats section and product specific stats) is a key aspect that will likely require a lot more work. What are the metrics we choose to ship on day 1? - We need to get a MVP (minimum viable product) out, the V2 design has been in the works for too long, it's good to have tons of mockups but at this point we need to have a live version (even if password protected on a subdomain) that we can test. And iterate. - how to integrate all yearn network sites quickly as they come out without limiting independent devs. For instanace I want to see Keep3r on yearn.finance but Andre needs to be able to make and launch pages for his new stuff with 0 friction. Can we template out something that you just add the url for a new Andre project and it embeds it in our nav? # 1) Website plan This doesn't define the number of pages, it's just an indicative outline of the website. Please use the same mirrored structure in the second half of the document to input your comments. **Homepage** **Products** + Overview? + yVaults + yInsure (now yCover) + yUSD + Missing: Cover + Missing: Zap **Stats** + Overview (main dashboard) + Vaults (+ V1 iEarn tokens now named yEarn tokens) + YFI + yUSD + Governance + Treasury **Gov** + Overview? + Staking? + Proposals (YIPs + voting) + Forum (gov yearn discussions) **Labs** + yBorrow + DAO Vaults + yLiquidate + Stablecredit + yTrade + ySwap **Community** **Docs** --- # 2) Website plan with comments # Homepage What is the first things that user see when landing? # Products ### Overview? *Copy: 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. ### yVaults Comments and ideas: The General / Cleetus on Discord: Make a subpage/list tab for deactivated vaults if possible. Like yETH and ywETH, yLINK, yGUSD, etc. Pp on TG: I gave a idea some time ago related with displaying somewhere the approximate amount of gas spent in case a user wants to withdraw from a vault Ceahorser Ceazor on TG: total available to be withdrawn, i know you can simply subtract the Vault holdings and Strategy holdings But i think this nubmer should be displayed right beside the withdraw feature. so people can clearly see if its an opportune time to withdraw. Like the free capital not locked in the strategy so when people withdraw they don't need to pay all the fees. locked=>deployed. Klim added: you need this next to the withdrawal, maybe not the amount (to save people from mental maths) but a notification that they are not charged for withdrawals ### yInsure (now yCover) *Copy: Purchase decentralized insurance coverage to protect against losses due to smart contract failure.* ### yUSD *Copy: Mint yUSD, an interest-accruing token backed by stablecoins pegged to the US Dollar* ### Missing: Cover Cover = yInsure. This product is now named **yCover**. ### Missing: Zap The idea was to have Zap functions live under yVaults since they can be seen as tools to facilitate moving into, between, and out of vaults. # Stats ### Overview (main dashboard) *Copy: Track your portfolio’s growth and view stats across all of our products.* This would include the current Dashboard features IMPORTANT: Have proper information hierachy (most important metrics up front and big, but ability to dig down for power users). It's a juggling act Medio from Delphi added "It can be hard to understand a lot of these concepts in writing, especially when there's so many steps and naming conventions that change, so leaning into good data visuals / graphics is a big value add in terms of users being able to comprehend what's actually happening" ### Vaults (+ V1 iEarn tokens now named yEarn Tokens) Comments and ideas: Medio (Delphi) on TG: Could also be that APYs on Vault page summarize historical data, where a gauge shift like this is naturally a forward looking situation. Perhaps regular people looking through Vaults didn't realize rewards for the ycrvBUSD vault were going to see a pop Medio (Delphi on TG): This is a good dataset to showcase so people can see how the vault has returned relative to the base asset. In the case of LP shares, also good to see they they appreciate on their own as well (many ppl may not realize). ![](https://i.imgur.com/fpCPhVi.jpg) Medio (Delphi on TG): for iEarn tokens, also cool to see which aTokens & cTokens they've used & switched between over time optimizing for yield ![](https://i.imgur.com/6Zer7O0.jpg) ### YFI ### yUSD ### Governance Comments and ideas: Medio (Delphi) on TG: these types of time series & data aggregation would be useful for governance ![](https://i.imgur.com/p1IP6hK.jpg) Could probably do something cool for each vault to visually show how much profits are being reinvested into their respective base assets ### Treasury Comments and ideas: Medio (Delphi) on TG: Show historical revenue to treasury by vault? ![](https://i.imgur.com/0PrHBad.jpg) Show Treasury total value then a breakdown by type ![](https://i.imgur.com/wvQjCwK.jpg) Comments and ideas: MD on TG: I’d also like to see more on revenues over time and distribution of that revenue. MD: It’d also be nice to get more info on the MultiSig’s balance and it’s distributions # Governance ### Overview? *Copy: 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 ### Staking? *Copy: Deposit your YFI tokens to unlock voting capabilities and begin collecting fees from protocol usage* ### Proposals (YIPs + voting) *Copy: Take part in shaping the future of the Yearn ecosystem by voting on Yearn Improvement Proposals (YIPs)* ### Forum (gov yearn discussions) *Copy: Participate in community discussion regarding the future direction of the Yearn ecosystem.* # Labs *Copy: 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 ### yBorrow *Copy: Credit delegation for smart contract-to-smart contract lending.* ### DAO Vaults *Copy: Community driven funding for the open source maintenance of the Yearn ecosystem.* ### yLiquidate *Copy: Automated liquidations using flash loans.* #### Stablecredit ### yTrade *Copy: A leveraged stablecoin exchange, allowing users to borrow with up to 1000x leverage.* #### ySwap *Copy: Automated market maker (AMM).* # Community *Copy: 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 *Copy: 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 - API and SDK docs for integrators like Argent etc... --- # 3) References **Tools for abstracting complexity** Ways to have more infos but keep visual space clean: ![](https://i.imgur.com/9hZPBoP.jpg) Using expanding list view (like the current Vaults page), when you click it expand to reveal extra metrics and fields. Using tooltips, dynamic ones that show more informations. Either we have two kind of tooltips, (i) and (?), the first one being for "informations" and the second one for "help" Uniswap for example use (?) for static tooltips: ![](https://i.imgur.com/B1PKsAP.png) ![](https://i.imgur.com/8ZNjzMw.png) MetaMask use (i) for dynamic tooltips: ![](https://i.imgur.com/h0ZCpHE.png) Akropolis use (i) for dynamic tooltips: ![](https://i.imgur.com/am4QzBY.png) Or we can have a small stats icon as well like Twitter does under tweets of business accounts: ![](https://i.imgur.com/54E6dng.png) But I think that most users are used to see (i) or (?) Here I tried to show the different icons (16x16px) we could use for the UI. (Note: They will be smaller that on this screenshot) ![](https://i.imgur.com/TqSd5IE.png) Example in use on yOracle mockup at 16x16px: ![](https://i.imgur.com/g6tA9jS.png) --- **Other stats related stuff** Some interesting metrics ![](https://i.imgur.com/hxdIbEx.jpg) --- **Icons** We need to keep (and polish) those icons for making diagrams! ![](https://i.imgur.com/3a7xymD.png) Example: ![](https://i.imgur.com/O9QqisR.png) Even if we don't show those icons anymore on the frontend, we need them.