Proposal: New Site UX V2

agree. it also needs style. it needs a lot actually! :sweat_smile:

3 Likes

Works done by @uhmpeps is pretty good. I would like to see the light mode and I would have a light layout architecture but it’s just my thought.

2 Likes

Thank you malandraj, working on it! Light mode soon,


so this is the end view of the app im focused on and not the landing page
also, by focusing on dark mode which requires more precision to ensure its right structurally
working backwards from this endpoint, there will be multiple views that explain each product and also provide a simplified way to select desired products
anyway, i’ll continue with this and we’ll see where we land

2 Likes

light mode

5 Likes

Waifu Mode

4 Likes

Left menu:

  • Each item can have an “i” or hoverover for info. (ie Hover over Zap to learn what it does)
  • Vote should be one of the menu items. It’s one of the key “verbs” and products.
  • Colors: It could be an interesting nod to Andre’s original DNA design to have Vault be salmon, Earn be pink, Zap be blue icons etc. But then some repeat colors like Vote don’t work. Just thinking outloud here…
  • “Dashboard by Zapper” should maybe have it’s own purple line — section — to separate it. It is not a Yearn “Products” section product.

What about mobile?

2 Likes

Great notes ty, mobile in progress

1 Like

honestly I have only 1 or two vaults. Having the vaults take up a whole side column seem like too much. Why not put them small up top or make it hideable at least

1 Like

We can add a “hide zero balances” toggle

3 Likes

ok - below are a bunch of screens for different steps, all in dark mode, - other color modes will be provided at live page. requesting feedback

new user lands here


then user continues onboarding for a few screens (optional) (images will be added in blank spaces)



user has now logged in with wallet. top left shows example of activated dropdown menu so user can relabel address, copy address or copy address etherscan link

user selected vault, blank inactive with instruction, graphic is coming soon, text will be bigger etc

user selected Earn, you can see instructions (text will be bigger) and graphic below it. Graphic is copied and upgraded from @definn I can’t see if he is on this forum.

5 Likes

Some scattered feedback based on my own preferences:

  • I think “How it works” is probably better phrased as “How does it work?”
  • There is a lot of blank space on the onboarding slides. I think it may be nice to increase the font size of both the headers and the text to make them more of a visual focus, as well as removing some of the padding.
  • Some unDraw style illustrations could perhaps also help the more visually inclined people during the onboarding slides, if only to add some more flourish.
  • The contrast of the Resources tab is a little low. I’d personally prefer a brighter color to make it a little more prominent.
  • I’d personally like to see clearer delineation between the three panels (side, vaults, and main), e.g. via brighter borders, but I know that lower contrast and minimalism is more popular these days.
  • I’m used to seeing the dark/light mode toggle on the upper right hand corner of the screen. Do you think it’d also fit there? I didn’t notice it at first at the bottom right corner.
1 Like

Awesome as always! A few comments here.

For the “What would you like to do?” page, I’d like to propose something a little more structured and conversational to the user. Suggesting that we may be able to break up each section , as per my mock below -

  1. This gives first time user a clear indication of which button does what, which is obvious to us here but most definitely needed for first timers.
  2. Clearer organization of info & call to action.
  3. For Vault/Earn tabs, removing the sub-text (cleaner look I think) & adding APY to make it clear what kind of product it is.

Another suggestion would also be to more prominently display the section a user is on, I know the left side bar shows it, but from UI perspective I think it takes “effort” to know which page I am now on as I have to look left to remind myself.

Adding a small indicator to the top of the page (eg. vault selected) may solve it. Also incorporated a bit of @boatonagoat’s suggestions to make better use of space.

image

7 Likes

Nothing to add here, but I’d like for people to stop bitching and shitting on @uhmpeps and his website mockups. Speaking to the people that think “a professional should be hired”. Nothing says he is not a professional. He’s dedicating time and efforts producing something 99% of people here won’t or can’t.

To @uhmpeps, I love the style, keep it coming. At the end of the day, if Yearn as a whole does not adopt your proposal “officially” and the “official” revamp comes at a much later date, you could just as easily deploy this in prod on your own domain and advertise the website. Let people choose with their clicks which website they prefer for interacting with the protocols.

I see this no different than what Zappier did by creating a shell over the existing yearn protocols.

8 Likes




(working on gfx)



@tracheopteryx
@Jin
@boatonagoat
@gargantua
@dripdrop
@midnightcheese
@digitaloil
@SheckyGreen
@point
@DavidHay

18 Likes

(can only @ up to 10 people in a post)
@GeorgeMoroz
@timbit
@YieldBouncer
@kazuya
@yLearn.finance
@ETH_Maximalist
@Juanma
@n00b
@freezer
@Definn

4 Likes

Yes, much better. Simpler and flow driven. I really like the Invest, Protect, Govern, Manage shot. Great starting point.

@uhmpeps Should you add a DAO(under Invest) section to that screen? I don’t think it fits under “Vaults”. Andre announced this today: https://twitter.com/iearnfinance/status/1299668170668740608?s=20

2 Likes

Awesome. I’m still a sucker for larger font sizes (and wish it were a little larger), but the additional graphics + updated layout on the What would you like to do? portion looks awesome.

Thanks for being so open to feedback!

2 Likes

Yes it’ll be flexible enough to allow the addition of any products :slight_smile:

2 Likes

:rocket: :rocket: :rocket:

Looking good! I like how you held people’s hands through the process.

2 Likes

Azeem, you killing it man. Top notch work.

2 Likes