Proposal: New Site UX V2

Those buttons are difficult to read. Needs more color contrast. I like the blue version better.

1 Like

latest

1 Like

Would it be possible for you to hide the large descriptive texts using an “i” icon (information) so that it is only visible when hovering over the icon?

1 Like

yes, a variation of that coming in the next iteration :slight_smile:

2 Likes

1 Like

This is really great progress.

Will the Zap/Earn/Cover tabs have different colors similar to the current site?

I like how the softer versions of blue/green/purple are used for each function right now. It helps create some distinction between parts of the site and a more
“elementary” look which speaks to the ease of use we want to portray to potential users.

1 Like

Thank you - it’s a great idea, though I won’t do that for this iteration, I would like to explore that idea more in the future. Just want to keep it consistent for now and not too blade runner for the moment. Want to get everything else right before adding more colors.

1 Like

@tracheopteryx

Hello guys,

These are lovely images! I really respect all the work that went into the design and discussion. It’s clear that we can spend hours about discussing a shade or blue or a position of a button (as we will), but I think we are far from that. Here’s why:

New is not always better

  • this design is not connected with the current live version, possibly alienating the non-power users (Q: Why are we completely redesigning the colors, iconography, layout and all?)
  • this design is only for the power-users, being information rich to a point of cramped (Q: why are we favoring the power users wanting stats over the people wanting a clean and elegant experience? Do we know our current audience and an ideal one?)
  • this design is not future–proof. Desktop-oriented information richness will not transfer well into a mobile experience, if major mobile browser will enable web3 the next week. We would need to do a redesign when that happens.

So, instead of doing something completely new, I usually take a moment to understand the existing and see why it was successful in the first place.

Assumptions and observations from a live version

  • Simple, big and colourful UI with few choices presented at each time was important to funnel users
  • Navigation was always present, advertising other products as a part of yEarn suite
  • Choices in lists were always in the center, the focused choice was expendable, providing context and controls when needed
  • Interface explanations and detailed info was largely missing, inspiring into existence community guides
  • Stats, when present, were confusing, spawning few community projects focused on that
  • Visual design was crude, effectivity was more important than aesthetics

Now, this was by all means exhaustive and detailed, but it can provide us with a base of choices we should be considering when designing a new version.

What are we building?

  • Simple interface with clear paths and burried stats, or in-your-face dashboard with all the numbers?
  • Minimal or exhaustive explanations?
  • Mobile ready with or desktop only?

I feel that only after we come to some sort of an agreement about these questions, we should be getting to designing. Only then it makes sense to me to play with shades of blue, because we will have a clear set of goals to evaluate the designs against.

Do you agree? How are you thinking about this?

7 Likes

Actually the majority of your concerns are resolved as I am building an onboarding flow reminiscent of synthetix mintr, along with blank state screens and prompts. In addition all community concerns and feedback around issues that we previously point people to FAQs for are now integrated into this design. As for desktop v mobile, would not be concerned at all, usually I only build for mobile first. So actually most of my experience is on mobile :slight_smile: In good hands.

Bear in mind also, this is dark mode, which currently doesn’t exist at all. There will also be a light mode.

Can you share any specific improvements you would like to see?

1 Like

(pardon my French, but:) If all the concerns are already covered, how come all the info on the image is so dense to a point of overwhelming, you are breaking established design patterns for no good reason, and it feels disconnected from a live product? :slight_smile:

Now, commenting is way easier than doing the design and you did a lot of good work there. I don’t want to take that away from you.

What I was taught to do was never just “here’s the design” but “this was the problem and this is the solution”. Here I am not seeing this. I can get more specific like:

  • show flows, not screens
  • show mobile first (nice buttons for switching language and skins at the top left corner, will they stay on top and cover content?)
  • branding is missing
  • why are you breaking the wallet (profile) pattern? (Usually top right)

… but I don’t think that’s the point. I am not saying we need to throw stuff away. I want to understand the problems you are solving, not just the solution. Only then I can provide a meaningful feedback.

5 Likes

Usually?

1 Like

Usually?

Look I truly appreciate your kind words and your feedback, especially what you shared in the last thread too, it was heard and implemented.

That said at this point I’m really confused because the concerns seem redundant now.

Right now you have given 2 examples without understanding why the designer did what they did. I am sure you can find as many examples of the pattern I have described as you like. The number is not the point. The reasoning is.

Thank you, as before I do appreciate your feedback.
Go look at AAVE, Synthetix Mintr, Curve, and tell me what the wallet profile pattern is.
And before touting reasoning, consider that maybe the reason is, because it’s a good experience for the user.
Maybe if I was designing just for Chinese or Arab or Asian markets I’ll put the wallet on the right because of the direction established for reading.
But again it’s nitpicking, and not a real needle move on the most important goals.

You are correct that some put it on the top right, but your wording is “why are you breaking the wallet (profile) pattern? (Usually top right)”
It’s just strange to hear this when the field is so wide among top players.
It’s an accusatory tone as if I’m breaking some divine law.
Even if that was established, it does not suit this flow.

Mintr – shows wallet on the right because they show the details of the wallet beneath. You have navigation there, which is not connected to the wallet.

AAVE – shows wallet without details. They can do that because you have connected with your wallet in a previous screen. While they show the navigation as you do, they don’t show wallet value or currency. What if the user does not care about USD and wants to see different currency?

Curve - actually hides wallet into main submenu for an aesthetic reason. They don’t show details at all.

Which of those reasonings are you following for your design?

1 Like

aave
mintr
curve

wallet in top left

current positioning in screen is because it’s a great user experience

that is the reason

:frowning: the design is for the people to use. They expect the wallet (or profile) in some spaces more than in others. Breaking away from these expectations should be reasnoned. Nothing more, nothing less.

1 Like