Aave Labs 🛠️ Improving UX of DeFi Applications

[Music] hello everyone and welcome to the LFO a Labs Workshop improving ux of defi applications joining us today is Yoni Helen who will be taking us through this session and with that I'll pass it over to Yoni to get the session started awesome thanks Rory and um hello everyone um I can see we got a bunch of participants already I can't see um your faces I'm just doing the my own screen but um yeah hi everybody nice to meet you uh so just a quick intro so my name's Yoni I'll Be Your Design personal trainer for today and uh yeah I'm not really sure what kind of audience uh it is I'm guessing hackers devs so various design experience may be some may be none so I thought I'll sort of give you some good tips um how to get started kind of like a like a half an hour bootstrap uh bootstrapping session for for design how to how to get going or how to improve uh yeah in the past I've I've done a bunch of stuff to um in Tech and ethereum pretty much since the early on I work on Arizon argon as and finance but now with the a fam or a should I say on a a labs and lens and you can find me on Twitter and lens on on the on the uh handles there just just ask me if any questions if you want to show me some stuff you're building in catham want some feedback just just send me a DM well happy to jump on on call or or chat so today's session is as I said how to get started in design how to how to sort of get the basic uh chops um how to build something people want is sort of a cliche classic cliche but it's it's very true when you think about design in a broader context not just just how things look or you know is it pretty is it aesthetically pleasing but I think designers um design is such a powerful tool also for figuring out what people actually want for testing testing things out for for uh yeah effectively understanding uh empathizing with the users so we'll talk a little bit about that then um some blockchain specific ux tips so there's a lot of complexity in blockchains some of that we can sweep under the caret we'll talk a little bit about that and just more generally like how to make the blockchain complexity as easy as possible especially for new users and then last sort of a hot tip is UI Frameworks I'm sure a lot of you are already familiar with this but we'll cover a few of these so this can save you a lot of time when you get going especially in ham projects um but also like for actual products so that's a few of my favorite ones and pros and cons of using U Frameworks in general and we've got some time in the end for for our Q&A as well so so uh yeah any point you got any questions that we we can save for save for the end so how you get start in design um the main things you'll need are sort of these three areas um it's one way to chop things up I'm sure there's many but uh this is something I put together for this talk so the the the core craft is something you can't really get away from you'll need to have these skills and we'll talk about like how to get better at all these things uh so figma chops pretty much all of the uh Design This days happens in figma there's some other tools still as well but let's assume you'll be using figma for this prototyping skills doesn't really matter what tools you use could be um in figma figma is has got some really nice protyping tools now basic ones that I'll show you uh you could prototyping code you could use specific Pro protyping apps like principal and so on but it doesn't really matter whatever you're most familiar with but you you should prototype as quickly as possible and get in front of some eyeballs and get feedback as soon as possible and then talk about a big Community how you can get involved design community and inspiration where to find like nice designs to be inspired by um uh actually let's jump into I've got slides for each of these so we can talk about this in detail that way rather than on this slide so jumping into the basic skills and inspiration so design really at core is pretty simple like you you're dealing with fairly basic things um which once you've Master it is not super quick because you'll sort of you start from zero like it'll take you a while to for your brain to start getting sensitive to your eyes and taste to start getting sensitive for these things but the main ingredients you're really cooking with are layout Hier typography and color um so those are the basics I would say to get started with of course you've got flows ux flows um sort of not just the visuals and static screens but these are very very important sort of core core things to get familiar with and you'll be like doesn't matter how long you've been designing your always sort of these are the thing the the main big building blocks you you'll deal with then you can you can add layer things on top of that so of course the flows U make sure that those are very smooth people uh find them easy to go through but um you can sort of delight uh with transitions micro ammunitions and really reinforce the mental models of how the flows work with these things um and not many people are doing this yet you see a lot of this in sort of native apps but on the web for some reason even though tools are there people don't really use this as much as they could not overuse it like it's easy to go overboard with this stuff um but I've got some nice examples to show you like how to test really use this to basically Elevate the perceived quality the Polish and the Delight like the users um generally um find these kind of small touches quite delightful and then yeah lastly Community just to get inspired remix stuff so I would say the best way to get started really is to is to take existing designs maybe find a web page you really like try and recreate that in figment from scratch effectively you'll start to understand the decisions the designer of that app or page put together why they put certain type sizes in certain places how many type sizes they're using how do their how does their pattern look how does their hierarchy on the page look layout so I would just start with that um effectively just do do maybe start with four or five of your the things that you most like just recreate them like literally just throw of them uh design of them in figma and then you'll start to get an understanding for for how to put things together uh there's a lot of resources you can take a screenshot of this this will be recorded but um the resources I would guess used to get started would be the figmma community is great um so there's um um a site for that U just on the fig.com community where it's eff the closest you'll get to GitHub for a design where people post a lot of sort of files for you to just browse and use they have different licenses on what you can do with them but of it is just you can run with it but sort of helps to as with open source when you can see how exactly these things are made how the are the the f is structured how everything works uh it's really helpful to to see har this uh who um more advanced than you you are doing these things trible is the old old sort of favorite but still nice for inspiration I'd say when again when you get started first thing you want to get inspired by something doesn't have to be in even in the same domain could be up for some something completely different but just look at uh cool new stuff on dribble or even Pinterest is a bit UNR underrated but uh just immerse yourself uh ARA is another good one immerse yourself in just sort of um going through um pages and pages of of good design and then you'll pick up on ideas and could be as I said a completely different domain but it doesn't really matter most of the design is still very Universal Design code is fantastic uh set of courses for um for designers and developers so I got a screenshot here just to make it more visual so that you can remember as well so yeah design code. iio in no way affiliated but this is this is great Mt and gang have done a great job on this for for you to basically have a more handheld um path in in terms of learning and building building stuff so they've got courses for figma for react for for iOS Swift UI various things uh that that sort of combine design and code together which really is a superpower if you if you can do a bit of both like typically people are stronger on one or the other but if you can do both even have a sensibility um it's really a superpower you'll be you'll be far ahead of most people and this is just a screenshot of FMA community so just type in whatever you want Lads of um uh figma files will come up that you can just dive into some of them are paid some of them are free but uh you can find a lot of great stuff here as well to to dive into so uh yeah that's that's the sort of the first part of getting inspired learning the basic jobs then I say one major thing um that is maybe not obvious when people think of design is what it actually entails but is a big part of design is perspective shift so you really have to almost like see the world through somebody else's eyes the the eyes of the people who you're going to use your app or site or wherever it may be so people some people are better with this than others but and you can use use testing to to help with this as well we'll talk about that more but you really need to um not just think for yourself like or think what other people uh might want you need to sort of deeply understand what their needs are and when they start using their prototype like how they stumble and and uh how they fail so yeah I'd say you'll have some intuitions but you want to validate them pretty soon as well uh intuitions if you are kind of the audience for your app yourself you you can use introspection but um I think it's still that I think it's still a good idea to test with users as soon as you can and and quite often as well it's something that never really is finished and talking to users never too early or never too late to talk to users and you might have a Grand Vision but just keep poking holes ask your friends who are more grounded to poke holes that they ill helpful in in a constructive way not not to bring you down but to help you maybe a spot where the where the holes might be and then the last portion of this is the Taste and polish so taste is really I think really difficult to Define um is something you just become more sensitive to certain things like I guess if you're a chef like you're an amateur chef and um just cooking at home compared to like somebody who who works at a Mich restaurant they can probably taste every single ingredient every single Spice in in the dish compared to to to sort of normal people same with musicians I think versus somebody who do listen to music it sounds good but you can't really tell why it sounds good or why it's good it's just good but once you sort of develop these sensitive sensibility then you'll be able to picko and and so sort of be more specific about why why things are good why things are bad you should also like be allergic to friction and and things that don't work a lot of there's so many things in the world that are uh not very welld designed but people just get used to it and sort of take it for a ground head but another thing I'd say is to to always like if something like just just be critical of like if it doesn't feel good keep working on it keep polishing it until until it feels perfect or until there's no doubts about you know what's going to happen next or you know like if you have any any doubts when you're using when you're testing you can be sure that your user is going to have the same Downs uh also don't layer too many things in in the designs like the same is some something that happens a lot in the beginning people just put a lot of things together but the best designs tend to be fairly Spar they have some things have a lot of space around them and then you can really Elevate the things uh again like the cooking analogy I think is pretty good good here good here yeah just use the best ingredients sparingly and then yeah just keep keep working the the spat the details part part of uh this is super important so yeah just keep reducing things again like you can start with a lot of things when you typically when you start a design process you'll just maybe you put some moods together in figma you'll start working on some some initial ideas but just keep chiseling it like take away like if there's a lot of things a lot of textt um just take away as much as you can until until it's almost too much and then you can bring some of it back but you really want to be um sort of removing the cognitive Lord and friction like a lot of that is actually the design process you may think it's just making things look nice but it's it's taking away a lot of things uh a family I'd say um our recent recent design friends who've joined theara uh are extremely good at this so check out the family website for inspiration and I've actually got a quick video of of this just on sweating the details and the something that um Benji um from family shared earlier so this is some work they excellent work the family designers and developers have done um just just sort of onboarding flow to family wallet but I thought it's really great in terms of the details and the the motion works so I'd want to share this with you guys I don't know how that good frame rate is but uh you can see how the the transition from one state to another it really sort of reinforces the the mental model of where you're moving to where you're going uh instead of just being sort of abrupt changes or just a normal slide there's like uh and this is another another sort of trick I recommend use Quick Time pro on your your um uh Mac or or screen some kind of a screen recording thing on your phone if you would you see something really nice uh just record it and go through it frame by frame or slow it down you can see exactly you can sort of reverse engineer how these transitions are done from one screen to another uh and then you it can really help you sort of try and understand them how they work as well as they work because a lot of this transition work just sort of happens in one or two seconds and is is difficult to see a lot of the time Family app is yeah I'm not I don't work on this personally but as far as I know it's in Swift uh all of is native Native is so last thing um on this um the the sort of the three main things is um building something people want and this sort of clich a little bit of a cliche but is super important and how how do we sort of figure this out um so how do you how do you use design to help uh find your way to prar fit so it turns out like there's a lot of things in the sort of more ux research tool kit that you can use for this um but it's really about speed and then talking to users I would say so prototyping getting stuff built don't necessarily make it perfect like there's a balance between speed and quality and I think on some type of products the bar for Quality before you start sharing it it depends on who share with if your friends maybe don't care so much but before you sh start sharing publicly then the bar quality can be higher but you want to pick the propping tools you're the best in and the fastest in I would say typically whether that's in figma figma or or just react or whatever um just run with that and then get feedback as soon as you can as soon as You' got something that works sh it to your friends um share on Twitter um maybe see if you can put together like uh some kind of onetoone sessions on like getting people on Zoom for half an hour to walk them through it because you want to see them not just sort of comment on design Twitter the comments tend to be like it looks great or you know more on the design things but as when you're testing things you want people to actually use it and you want to see them use it so like um this kind of qualitative onetoone interviews are really good for this um you can set this up I'd say five for six usually gives you a pretty broad spectrum of different types of people using your prototype uh and that's usually enough sort of half an hour to one hour calls with people uh or if you can do in person that's great to but yeah Zoom works great for this then sort of surveys when once you get to a bit further along surveys unmoderated prototypes mze is a tool for this where you can just put your figma prototypes on a link and then sort of set up tasks next to it and then people can reply uh try and do the task in your figma prototype and like write comments and stuff like this it's nice to if you want to run research at scale for 100 or thousand people then obviously you can't be on Zoom calls with all them so this type of tools are useful for that you can DIY a lot of this stuff I would recommend for user research may be starting if you're able to if you have budget or able to uh work with uh user like professional uh ux researcher I open ux um is a new sort of web 3 focused um shop for that I we worked with them a couple of times they're really good but also others um I recommend this you can do it for like one one or two sessions and you'll pretty much get the gist and you can do it yourself after that uh then so the user research does have limits like the the users won't design the product for you but this will really help you uncover things you don't see yourself and we all are blind to a lot of things when we work in something for a while so it's super helpful and then one last tip on this use testing just make it easy to use test as you're building it so this is a figma click through that's the easy way to to to to um do a prototype you can put in front of people in maze if it's a buil already built product make sure on test net make sure you got the faucet in is easy easy for people to get the tokens and whatever they need to get going or or even if if it's just the F front and flows then just make sure that they can um basically run through that without too many Hoops or or you're not going to get the sort of the feedback you want then some blockchain specific ux tips um so I I've got a few for this there's there's a lot actually it could been a whole talk this one but um there's a lot of complexity in blockchain starting from the core protocol like why do we have layer tws and bridging to start off with like it's not something the users would want uh that so we'll kind of have to then hide away this complexity like signing transactions approvals all this kind of stuff um wallets in the first place just getting a wallet for somebody who's new to the space is is's already like a stumbling block so thankfully there's better and better solutions for all of this stuff um if it's a consumer app you build building there's a lot of good embedded wallets you can use now if it's not sort of super high value transactions uh so consider those kind of things um like hiding away the cross chain stuff and ethereum specifically maybe not so much in salana but like yeah ethereum's got a lot of this issues with the liquidity all over the place um people needing to breach from L2 T to but again there's starting to be pretty nice Solutions like with layer zero for cross chain swaps where maybe that maybe you don't really need to depends on your application of course like if it's a defi application with a speciic thing then these things are extremely important but if it's like a consumer application like lens maybe and you know you you're posting like Zora in on lens you you don't probably want your users to have to bridge their e to Zora just to be able to Mint like something that appears in the post in front of you so this kind of cross chain um swapping is really nice and we we're building this into into lens but also any any kind of more consumer application I think is nice way to hide this layer two complexity and then of course you have the again these things work for some things don't work for everything but bundle transactions with account abstraction starting to be a thing gas L uh where effectively sponsor the gas if if it's a lowc cost chain and uh this type of things uh I think also it's combination of many things really really help and then one last thing again does doesn't work for everything but for for sort of non-financial application in particular is great to reduce the perceived latency with optimistic UI so so in your UI just sort of pretend that it's already happen even if it's mining in the background you can have maybe some sort of a pending state but don't block the UI like just let the user get on with their life and if it fails for some reason most of the time it doesn't but if it fails then you can at that point pop up toast and say let's try again but don't like make the users wait uh okay so uh some other things on this complexity topic we we can bri through this uh but it's a good idea sometimes to start from mobile first just because it forces you to think about um what's absolutely essential and check the rest if you got large canvas and desktop typically there's more space so you add more stuff to it and with this kind of constra mobile even if your your sort of target audience is on on desktop is sometimes useful exercise and then also it's easier to usually start from mobile design go from desk go to desktop sort of blow it up rather than the other way around doesn't work so well okay so let's look at some examples there's been a lot of text and a lot of talking so it's practical example so this is a current UI of AA um not not designed by but sort of first good first step um for uh switching tokens in particular so there's uh is functional but there's quite a lot going on here there's not very good hierarchy of things in here uh when when you sort of pick your um pick your assets that you want to swap from um drop downs quite small and you you know there things that could be improved uh so yeah for for this particular example I just think it's easier to talk about specific examples let's look at what we could improve here for instance so one is like Focus um I think is is is much better to start with like little information by default just again the essentials in this instance we've in blood background but even just the the sort of insides of the model here um and then some better hierarchy effectively so you don't have a lot of things like a lot of strange gaps and like lots of different type sizes and so on um and then like the asset drop down I think it's nice to have a search in there it's nice to see also the the dollar value of this these tokens just sort of basic things like that nice to have it centered and not sort of cramped in the corner small um and then maybe when you get to the the sort of end of this more unisoy style uh token switcher again like think about what's absolutely essential to show you can always show the extra things like on a expanded view of this like these are probably the main things people want to see and then if you want to see more stuff then you can show them rather than showing this up front because it looks quite scary like even though this is already reduced to a minimum like it's not something people necessarily need to see up front so it's better to hide things and like show more this type of ux patterns and then then show like the extra stuff than just put everything on screen by default and just another example of how we we could reimagine this maybe from more first principles a lot of time it is good to take existing patterns like we are very super familiar with this uni swap style swap widget but there's probably other sort of um paths for designing a simp a simple widget with the same kind of stuff um so making again the things that you want to be big or focused on very very big and then the other things can bar be smaller um cool the last thing your libraries um I'm not going to since we're pretty close to the end not going to um spend too much time on this but effectively yeah so you can save a lot of time with these things uh if your aim is to go to get to Market fast uh you don't need to design these these uh components build them wct is all sort of built for you this can be quite opinionated sometimes they introduce blow to your code base but a lot of the good ones are are good um and can be extendable sometimes it's a bit pain painful but they are extendable and outut box of course it's going to look generic like every other app with the same framework but you you can theme most of these things um so I would say just to wrap things up I would say these are probably my top ones I would recommend for people there's many other ones and these are sort of just subjective but um you may be familiar with this but if not then check this out shout it's a great one from um forget the dev's name but uh very good front end Dev uh tailin UI or Catalyst I think it's called now it's great again uh it's paid but it is worth the money in my opinion uh if you're in the Tailwind Camp radic UI great they also have headless versions of these components and then mu we currently use on a it's a little bit more old school but still pretty complete so uh just sort of quick screenshot of this and we can start taking questions um yeah cool so we've got to the end any any thoughts any questions there was one question early on at the beginning um is too many animations bad yeah I'd say it's again it's kind of comes down to taste like you don't want to distract people like with animations I would just say it's nice to have a sp sp because then it's kind of delight like instead of too much of a thing and then it can get quite distracting as well so you I don't it's difficult to say was too many like you can like in an onboard Journey for instance you could have a transition between like we saw in the family example like there's a lot of transitions but it's not like a circus that's going on on so it's just a matter of taste I think but yeah i' I'd say start with no animations and just add some to enhance rather than for for effect cool um any other questions and then the going close us towards the bottom uh uh there was a question or I guess maybe yeah a question don't you already see the one equals 22.25 in the inputs why duplicate it this was I think when you were going through the um uh few slides uh okay the drop downs I see I missed that one um yeah I think maybe that was just the sort of the the the minimum you're going to get maybe yeah that that design is still work in progress so yeah but I think that that's sort of pattern you see on un as well you want to see um with the slippage sort of taking into account what's the minimum you can expect because you can't tell slipit ahead of time there was a question how to convert figma design to code please don't get mad I'm new yeah yeah that's a great question unfortunately I wish there was some AI tool to magically do that um there isn't really so yeah the other way around it works pretty well there plugins that you can take an existing website convert it to figma later figma but uh all the sort of automat tools I seen from taking figma into code they don't really work that well so it's I mean otherwise I guess we wouldn't need front Engineers too much but um maybe at some point I will figure out um so far yeah I haven't seen anything that's really that great and that's may be sort of one sort of um benefit for these um UI libraries is because it's they already built so you some sometimes you have figma versions of those so you can sort of approach I Flows In figma quickly but you don't have to build all the components from scratch basically then for your front end so you'll save a lot of time that way uh there was a question on what are your thoughts about scaffold eth I haven't actually used scaffold I I saw it on our Dev Garden call yesterday um yeah i' I've had not personally used it um so yeah I can't say but the the dev who was sharing the smart post with um they had used scff it they seem pretty impressed with it so sounds like a good thing uh yeah so a bet uses mui um yeah I don't know if we would stick with it if we were to redesign AR at this point it is good but yeah there's also a lot of good competition these days I think that's the only question so far so if anybody does have any questions uh or if you think of questions after you know we end this call please definitely reach out to the partners and the Discord channels and their partner channels and if you haven't done so already you know connect your hacker dashboard to Discord so you are able to access those specific partner channels um but yeah if there are no other questions then great thank you all for attending and thank you uh Yoni for uh hosting this great session and just a reminder we have opening ceremony and kickoff later today and then another team formation session and few other workshops later today as well um this last question do we need to have the teams finalized by today no you don't need those them finalized today you just need to make sure that uh if there are people that haven't uh applied to LFO yet that they do so by today um but yeah you can still me uh you know mess around with your teams for you know most most of the event um but yeah so awesome cheers thanks everybody have a great rest your day and thanks again Yoni thank [Music] you