How To Simplify UX Flows In A Complex DeFi Product

Transcript

foreign we're just waiting for the green light all right we got it thank you everyone for coming to this speech I will be presenting today how to simplify ux flows and web free apps my name is julis I'm one of the co-founders of apwine and just to give a quick introduction where a protocol that enables you to get your salary in advance in D5 so we're going to see how to simplify a complex product like this one all right first off you know this talk is aimed for developers designers you know curious people so there's really this is just a beginner talk so we're going to be defining some terms first how do you define ux and UI user

experience you know in a product is mostly what you cannot see but what you can feel so this can be the wireframes uh you know the user scenarios the user personas and the user path in general so all the pages basically a site map of everything that you can do and how you can do it now user interface on the other hand is really what you can directly see and interact with so these will be all the buttons all the visual elements the typography everything that catches your eye and makes it you know that makes you go oh wow this is a good app we're going to be focusing on ux for for this topic of today now ux has a huge impact but we don't really

talk about it and it's often an overlooked aspect good ux is unnoticed because it feels natural but when a ux is bad you notice it directly and it can be very impactful and disastrous for your users it can mean that your users you know lose money do things that they didn't want to do or just simply don't understand how to use your app and as an example imagine for a second that there was a form where you need to input your phone number using a slider and it would just take you hours and you know even one pixel wouldn't be enough to select so this is just a fun example when you can see more of these on User interface.com it's very fun site you can try right now

um and just to sum it up this very quick introduction a user interface is like a joke if you have to explain it it's usually not that good and this means that good ux just feels natural again and bad ux you need to explain it over and over to make sure your users understand it now just a quick example of a few um well this is not great ux but as you can see we got some disco party going on here um these are some examples of notable ux Improvement that we've seen in the previous years we got the mouse you know from the keyboard to the mouse and then we got the finger touch with you know Steve Jobs bringing the iPhone instead of a stylus and recently we had the card

swipes from Tinder which are now used for you know booking any anything that you know is quite easy to do okay let's stop this okay much better now what is ux flows and this is going to be today's topic that we're going to dive into a ux flow is the complete path that a user takes when using your product so it's really from the beginning whether they have to register on your website or you know deposit some money or create an account or create a post it contains all the flow of your app and so what you can do with it and how you can do it and then we're going to see what are the challenges of ux flows in web3 there are many many constraints you know technical

constraints of being decentralized that we're going to see right now and that Builders you know us we um Builders developers designers have to work around in web3 the main one that I want to talk about today is the Smart contract ux because in the end smart contract is what your users are going to be interacting with even if they go through a UI smart contract ux is extremely important all of your users are going to be sending transactions from your interface so you know metamask basically to your smart contracts so it really replaces the back end of traditional web 2 servers so instead of having servers

that your users interact with you have decentralized Smart contracts published on the blockchain and this is really where everything is executed and stored so if you design your smart contracts correctly you're going to get good ux but ux you know when smart contracts also need to adhere to certain standards and one of these standards that you've probably all seen here is the erc20 so erc20 is just the regular token standard for ethereum and it's basically used by 99 of tokens who has ever seen this approval request when interacting with a you know decentralized app like yearn a uniswap Ave and so on just just raise your hands

if you've ever seen this on metamask approval of a token okay awesome so basically everyone now is this good ux this is not good ux thank you why because first you need to approve a token every single time you interact with a new contract and then once this is done this is basically sending a transaction once this is completed you need to execute the actual transaction your your actual action now there are two ways to kind of work around this either you you do this so you send a transaction every single time you want to do an action so two transactions instead of one or you give an unlimited approval but then and this is what happened a lot in you know smart

contracts Rock pools basically people give unlimited approvals and then their wallet get drained so this is the same as if you called your banker and you said listen you you can allow anyone to to get any money from my account this is just terrible ux and terrible security but there is a nice ERC that you know built upon this and this is used by usdc so if you go on uni Swap and use usdc you're gonna you know uh you're going to see that it doesn't require you to send an approval you just need to sign it so it's like a letter that says okay I allow uni swap to swap you know my tokens and then you actually send the transaction so this is pretty good because instead of two transactions we're down to one

and we're going to see how this can simplify web for ux flows even even more but before that a quick analogy on the things that's coming right now let's take for example the ux of a train you are in Paris right now we all are and you want to go to Amsterdam to you know get some natural herbs or or something you're going to want to First go from Paris to Brussels so buy a ticket you know ride the train stop in Brussels this is in case there's no direct train and then go all the way to Amsterdam with a new ticket so in the end you bought two tickets and you wrote two trains which is terrible ux because you need to change you can get late you can you know

your train your other train can get delayed I'm not going to mention all this but what if there was a way to make this much more simple um you know without changing the entire railroad system well the solution would be just creating a direct train so a super train in which you only need to buy one ticket write it all the way to Amsterdam it goes through Brussels but it doesn't stop in Brussels and so you're going to see that if you understand this you know it's very simple to understand you're going to understand what we're going to do next with something called zaps this is an example of apwines previous iteration of the user interface so I'm not going to go through all this because you don't need to understand how the protocol works but essentially to get a

fixed rate instead of a variable interest rate on AP1 you need to do three different actions first deposit your ease into Lido Finance so staked if and then deposit your state is on AP1 and then swap tokens to get a fixed rate three actions but if you include the erc20 approval then you're up to six different transactions this is absolutely terrible and you know we've noticed this problem and this is why we've been working on solutions to kind of counter this and this is what I will present right now the solution one of the solutions is zaps so zaps are essentially smart contracts that act as the direct train between

Paris and Amsterdam so essentially you just send one transaction which is going to do all the actions that you wanted and this is how it looks in the UI so essentially you just deposit your ease and in in output you get you know a combination of all the actions that were done by this specific direct strained smart contract and so you can see here that we listed all the you know all the steps that this is going to do and so this is the zap and it kind of looks like a train actually now in this example you can see that even though we simplified the user interface and the user experience we didn't hide anything we really show everything that the user goes through

because this is very important especially in web3 you know where you can get work pulled or just do a stupid action very easily through metamask so especially in web3 never hide always abstract and always show what's going on to the user now I think um if we have a little bit more time let's try another you know example of simplification of ux with another example of our previous iteration and you know we're working on new products right now so this is the the V1 of AP1 it looks very complex because it did an extremely complex product but you can do very nice things with it so there's a lot of choice here and how can we simplify this we're gonna keep it stupid simple and

sometimes it's better to split your product into multiple branches so that note you don't overload your user with stupid you know complex information um so yeah let's let's keep it stupid simple we're going to make a you know a small product this is just a prototype that's going to focus on one use case of AP1 and the use case is get your default yield ahead of time and if you look at this you know with even visually it's much more pleasant because you understand right away what it does there's only two actions there's the start button and there's the my positions button there's not too much choice and sometimes it's good to limit the choices and then same thing here we limit the number of assets and the number of you

know information overload that the user has to go through so essentially instead of showing everything at the same time we just work on the visual hierarchy of each data point so what's important here the assets so we show the icons in big and with you know very bold colors and the APR so the interest rate that you're getting and so this is what's the most important here asset APR and this is what you see right away so this is all thanks to you know the hierarchy of the visualization as well okay this was a I hope a quick introduction uh and a you know helped you learned something new with this talk uh this was a very brief introduction of simplifying ux flows and D5 there are so

many more things to explore and so many more Innovations to build in this space um a lot of research is being made at the moment and we're really looking forward to you know bringing more renovation with AP1 and this is why we are expanding the team so right now we're looking for developers and designers to join the team so you know whether you're a beginner in D5 already you're an expert in a in web free we would be super happy to chat with you um you know whether we explore you're interested in smart contract ux and development or you know user interface as a whole industry so please get in touch we're hiring and you can follow me on Twitter at eulidev or scan the QR code below me um behind me

for more information I hope you enjoyed this talk I hope you learned something new and thank you so much for being here hello first of all thank you I really hope no one more people are working on this kind of problems the problem with April is a real one that I think everyone is facing I'm a developer myself but the problem there is that you cannot actually make a contract give approval for you so you cannot make a contract call another contract to give

the approval for you have to be the one to call the approval how do you work around this problem yeah that's totally right thank you for the question that's a great question I think we're going a little bit more technical into this but it's a very good point and what I would suggest is that for any you know application any smart contract to allowed for a specific method that you can basically make an action on behalf of a user but only if it benefits the user so essentially imagine you want to deposit on the platform you know when you want to make this zap that doesn't have to go through each approval what if you add a function that lets you deposit for someone so this cannot hurt the user right because it can only be beneficial so in

that case it's very good to have both a deposit method and a deposit four method because then when you as a user you go through metamask you're going to call deposit but if you go through a direct train that does a lot of different things it can also deposit for you now of course this is not you know valid for withdrawals so withdrawals of course would require approvals and everything but for this kind of specific action this is what I would recommend and this is what a lot of different protocols already have so one unit swap for instance uh you can totally swap a token and in the same transaction send it to another user so this is quite similar so this is definitely something to take into account when you design smart

contract ux and this is why it's so important because the way it's immutable you know it can't really be changed if you make a mistake in the design and and I'm not saying this is a mistake but you know erc20 the approval thing it can really hurt the ux for the next few years so let's you know plan beforehand and make sure that the ux is great thank you for the question what are your thoughts on multi-chain ux yeah good question um I wasn't really expecting it and and to be honest um

I'm really not an expert on Cross chain uh ux but from what I've seen and from what I've tried you know Stargate um you know Bridges like hop and so on I think the only problem right now is that it's not instant um you know when this is just technical kind of yes oh I see so apps that support like a mainnet polygon Arbitron this kind of thing yeah um yeah this is definitely a tricky one and I think you know the standard for damps right now is just to offer a drop down so this is definitely an area where Innovation needs to be made but it probably needs to be made also on the wallet level because as long as you're

gonna have this Distinction on the wallet level there's nothing much you can do on top you know in terms of the application so probably you know something like a custodial wallet could probably help solve this by having you know not everything stored on one chain but then it gets like it's it's definitely a an innovation that needs to be made so you know if you're looking to chat more about it would be would be happy to thank you for the question that's a good question [Applause] thank you everyone thank you again and I hope you enjoy the rest of the conference have a great day