Yearn Design Concept (homepage for novice users)

[freezer]

I had some time to imagine some interfaces yesterday and this was purely for fun. I love the spirit of this community and wanted to inject some creativity and design ideas to the already great work that’s being done.

Caveats:
-We should continue with the current path forward for the new UX that’s being built, which is a huge leap forward. This is just an alternate/divergent approach as food for thought for future iterations.

-These aren’t fully fleshed out, there are many use cases I haven’t included; its more of a concept sketch. I probably won’t work on them much more but can provide a source file

-The images are not by me (game dialogue, anime characters, pixel sprites), an artist would have to be hired

Goals:

More clearly articulate the value prop of yearn

Quickly onboard users to the platform, gently guide them through the process of using a vault

Design for the primary use cases in mind

Pay homage to waifu memes

[jimsox]

whoa…dude, love it. This is what we need for the noobs. Nice n clean, holds your hand with the “get started” buttons. Tick icons that highlight the key details.

bravo. will digest some more but initial impressions are very impressive.

@uhmpeps check this out…thoughts? good starting point for noob mode?

[Dark]

Wow legit. I’ll for vote anything with wifus. Let’s make the homepage theme switchable.

[WrongNebula]

Love it, it’s unique. It’s a good starting point.

YFI need an edge, something that discern it instantly from most of the other DeFi projects that are more like control panels (I’m thinking Zapper and Zerion)

It needs to stay simple and easy to use like Argent or Dharma. But then behind the hood you need to be able to access all the knobs and gears.

Simple at first sight, complex for those who need to fine tune things.

I also strongly believe that it needs to be playful and include illustrations.

Look at Monolith and their superb illustrations and packaging, check on Twitter how new users of the product post proudly their unpacking shots, it’s free PR.

I can’t even count how many times I’ve seen people praising Matcha just because it looks so good/different.

Uniswap as well: playful, simple (but complex under the hood)

I’m looking forward to see how this particular concept evolve.

Quick idea for the dark mode: switch the illustration to a darker waifu, maybe one with tattoos and devil horns?

[dripdrop]

As posted in the early days on #yfi-waifus, diversity is an important thing to consider. Anything can be a waifu, it could be an anime yeti or dragon in overalls, or a dude, or whatever.

Also, I think this is great for something like LearnYearn or a 3rd party info site like “YFI Life” “Waifu Guide”, or a guide that is linked to from the main site. But not as the main site itself. The main/official site should be more serious—we want to attract first time defi-ers, old school BTC hodlrs, finance 1.0 transitioners, everyone. We want $100B TVL. A more traditional modern design (ie Matcha, Coinbase, etc.) will be more widely trusted and taken more seriously.

An RPG-like click through tutorial guide with NPC dialogue boxes is genius! The PC asks all these noob questions and can proceed from Level 1 to Level 10 and the guide gets more and more deep.

[need3lives]

Agree with dripdrop. Although aesthetically pleasing, it does scream memecoin with the anime characters. I first saw this posted to twitter, and assumed it was just that before reading the text: another new random vegetable farm that will last a week before running its course. It is good to have fun, but many crypto investors would not take this seriously, and most mainstream investors (and Bitcoin Hodlers) would flee the site within a few seconds IMHO.

[uhmpeps]

I actually love it, and created a version based on this… You can see it here:

PROPOSAL: New Site UX **V2**

Waifu Mode [image]

Freezer also provided some excellent notes via DM which will be implemented.

freezer (freezer_boi)

[ETH_Maximalist]

We need a toggle between uhmpeps “serious” mode and freezer’s “hentai” mode.

I’ll be on serious mode whenever my wife is in the room and flip to hentai mode when she’s not.

[freezer]

Here’s an update on this:

TLDR:
-Full layout with footer
-Created a non-anime version as well
-UX flow for how it could work with existing work (v2 UX)
-New dark mode
-Specs and assets available for implementation

Designs:
Light Waifu

Search UI

Dark/Evil Waifu

Silicon Valley

Llama Wormhole

Potential UX Flows:

Assets and how to build:
ZIP:

Assets and Specs.zip

-Pixel specs are attached and zipped, basically open index.html and you can grab the exact value measurements, fonts, etc (pretty self explanatory). Any FE dev can grab this and implement the page.

-Icons next to the vault names are royalty free, found this pack here: 2d pixel item asset pack. Images are from actual anime…they are not my own! Use with caution or commission an artist. The illustrations in the non-anime version are royalty free.

-The fonts can be substituted out for Open Source alternatives or bought for usage, I did not check which are usable on the web.!

[uhmpeps]

Love it @freezer thank you! lol @ mega chad flexing

[1centwhale]

Really like the idea of being able to toggle waifu on and off. Creates credibility for new people landing on the site and then you switch over when “you are part of the club”. Could create a whole story around discovering waifus.

[digitaloil]

Feels a bit early to add theme skins to Yearn. We need a cleaner and distinctive look which still flows and is as simple as the existing look. Do we want to be perceived as serious or playful 2 months into this project. Simple broad UX should be the goal. I appreciate the efforts here but it is too early for the opportunity currently presented.

[Hypron]

As much as I (and a large amount of this community) enjoy anime, there’s an even larger amount of people that view it negatively. Having a homepage with anime on it is going to turn people away, without them even taking a chance to learn about it.

That being said, I’m all for having an anime theme once we have a better/full UX.

[JustinYu]

While the anime characters are the most obvious feature, I quite like the UX flow and guided path that you’ve constructed with this model. Streamlining on-boarding and ease of access is always great, but to pair it with creative ideas like this is even better.

[devops199fan]

I think the most reasonable way to go about this would be to have a waifu on/off switch similar to light/dark mode. Default to everything off, but have the option for people to set defaults.

[doug]

Nice, overall awesome designs, for beginners im still not sure “use strategy” as CTA means anything to a normal person. “Grow” or “invest” like zapper.fi does the cTA may actually be better. Not sure a beginner understands what a strategy is.

[thegismar]

really like it, for those that aren’t comfortable with anime (understandably) why not have it off by default and let the user choose?

[JustinYu]

There are tons of possibilities for “themes” like this. Although it may not be the most important feature, it’s a good community builder that adds more fun to the Yearn experience.

[freezer]

Thanks for all of the feedback. I would agree that the anime branding is potentially off-putting, and it is certainly a risk. Being a bit unconventional and making tradFi folks feel slightly uncomfortable is IMO a part of the ethos of DeFi, but anime itself may not be the right approach.

For that reason, I included (now more clearly labeled), the “Silicon Valley” and “Llama Wormhole” designs, which are relatively low risk, given that most large companies (Google, Spotify, Dropbox, etc) are often utilizing illustrations.

Also, the assets themselves are relatively simple to swap out, and all the variations are in the ZIP file in my previous post.

The real important parts of this design are:

• Ease of understanding, user learns the value prop quickly and how to use the app
• Simple onboarding, get the user to the “magic moment” as quickly as possible.

[rac]

love this @freezer!!