Web3 Design Systems - components and design standards for better dApp UX (Devcon4)

so what is a design system traditionally design systems are a set of reusable components that are backed by some sort of standards or guidelines these can be assembled together to build any number of applications and they kind of enabled products to prototype and test their products faster so the some of the design systems that were familiar with today are such things as material design angular and bootstrap and as we know today web users for web 3 have to learn very new concepts mental models and patterns with each application that they use on web 3 and like the early days of the Internet we're coming up with new patterns and eventually we'll get to a place where designers kind of coalesce into a set of standards making users to bounce from one application to the next so in an aspect what 3 is kind of taking us back to where user experience was in the 90s there's a lot of excitement a lot of experimentation going on but we need to establish some new patterns to serve our users and get them to the hurdles of web 3 so I'm gonna be introducing the web 3 design system team what we are is a federated design systems team but that means is we each work for different organizations and we've kind of through community efforts come together to spearhead they use UX and usability issues in the ecosystem our goal is to create a resource in an open-source format that anyone can make it on their own and rely upon when their whether you're a designer or developer to prototype and test our products faster we hope to do this through a well researched and validated component library but we've been very mindful of jumping into the components because let's be realistic there's not a lot of user data out there and traditional UX research methods kind of start to fall apart when you put them in front of people with about three ecosystem so currently we've been working with some of the top teams and projects that have actually been working on solving the UX issues in the space for the past few years so we're learning from the challenges and the issues that they face and trying to bring everything in a cohesive manner so not people are creating siloed solutions our goal is to open up our project to anyone who's creating any components or any research to kind of help us facilitate that better I'm gonna pass it off to Beltran to speak about the problem space thank you at the beginning of the year we published the web 3 design principles that try to propose some of the components or hinted at some of the possible components however like you said the research was much lighter than the Thoreau one that we are doing right now and we are interviewing everybody in the space that has topped to users with intention of mapping up those problems and the users face and the current solutions to later create this web design system this library of components and the and the guidelines of of best user practices so you know all of the problems there's a plenty of them today's a very confusing space we can share some we don't have any components I was saying yet but what we can share is the second best thing which is a mental framework about how to go about and think and solve these problems okay and we've asked these companies what are the questions the users have and we try to map them out and gather them some are fun like how do I find these projects in the other Internet or some are very important like why should I care this is questions that users really ask and so we try to make sense of all these questions and we came up with pattern that we call the problem space to map them up in a problem space and we found there's the problems can be categorizing two buckets like problems that are relating to technicalities of the blockchain or decentralization in itself and fundamental other problems that are fundamental to the explanation about decentralization and of course there's some obvious overlap and and there are also subcategories we will see so we put these questions we map them into this problem space into this diagram and in the technical bucket so you have questions like what is gas what is gas price what is how do I get et cetera and in the fundamental part of the centralization we find questions that are more important like how core can you reset my private key which speak to the misunderstanding of users of the purpose of decentralized technology and I was mentioning subcategories of course there is consensus among many of the interviewed people that decentralization like Akhil was mentioning requires new mental models and besides this we also have new complicated concepts like gas transactions the tokens private keys these are completely new to the users are and they are unfamiliar and so not only they are complicated concepts but it appears today we are doing a very bad job at explaining them and so advancing the possible solutions that the creators the developers and designers are using and they're seeing that work into this problem space we found out this that we call the solution space which reduces the possible solutions to - which is either hide the complexity of the technology or explain it better and we will see in a bit in a minute how to do it so let's see an example for example all these problems are multi-dimensional it means that the questions relating for example to gas fall in various of those buckets and in various possible solutions for example in the bottom part the questions what is gas what is gas price etc those are technicalities that if possible we should hide and the mr. team has taught us how to hide them progressively from from the user then there are a question like why does have gas have varying different costs at different times this although we hope to be able to hide it one day today there's not a technical solution yet and if the user sees different fees in different moments for the same action they will still be asking why is it different so you need simply to be explaining what is happening in the back and on the top part there are questions that relate to misunderstanding of decentralization itself like why do I have to pay gas or does the theorem foundation get the gas so why do I have to pay the tap a gas - so these things you need right now only to find better solutions and this solution space can help you make better design decisions and it will help us design decisions for the components so the key insights is on the bottom part the technicality is hide or obstructing away and we have patterns that a cube will mention that today helped us for example hide gas or there is a consensus among the interviewed people that it is OK for newcomers to have different degrees of centralization okay that you can't put a centralized service to simplify the experience of the newcomer but as soon as possible on boredom onto the real decentralize and educate them for - to do that real decentralization for technicalities that cannot be hidden yet we hope one day we can push it down into the hybrid bucket but today you should use analogies that they earn they know so if it's a financial application use or look at patterns they're useful for example in banking and most importantly for the fundamental parts of the centralization these questions overarching unimportant you should not hide them and you should explain them better and to explain them better you have to start with why why is it important why are we motivated by this and something that came up from many is that the you should start explaining the benefits and not the technology this is something dabs are completely finding and doing so we quickly went over the issues with gas but the underlying issues for the problem space are that it's a very novel experience people don't really understand what they have to pay fees were interfacing with the technology also as Beltran was mentioning there's variations in gas prices and that's not really conducive for mass adoption use cases and another thing is the concept and the terminology of gas itself is very counterintuitive and the analogy doesn't match up with speed versus distance but we've been starting to see a lot of emerging patterns come out from the research that we're doing through the community efforts and those things are such as extracting gas interactions for new users so things such as universal logins relays or meta transactions and then other options have kind of emerged from places like meta mask and my crypto where you give modular options for people to have low fast or varying speeds and one key insight was that we need to some way standardize gas moving forward for the entire ecosystem key management has a similar problem space where people don't really understand can you reset my password we need to do a better job of explaining how and why they should be backing our private keys and maybe just kind of get rid of seat phrases all together so the problem space with the key management is it disrupts the onboarding flow of the whole interface people don't really know when or why or why they should be backing up keys there's a confusion between passwords and private keys and people kind of give them wages for air drops and lose all their finances and the biggest issue is there's a lack of recoverability so emerging patterns are progressive you tiered your security models so you kind of work the user into knowing what a private key is through progressive models like universal logins is using or maybe use some disposable keys that users don't actually have to backup or maybe do multiple device private keys on local wallets transactions people don't really understand why it's taking so long and we need to get rid of things such as the nonce so people don't really understand one key inside that we got from the larger projects was that they don't understand the relationship between what the transaction is what a wallet is how that relates to the blockchain and what things like either scan actually enables for them to do because a lot of the support tickets end up into either scans mailboxes where people don't really know that they're not responsible responsible for anything emerging patterns is out of this space are giving human readability and transparency to their transactions so things like NAT spec and R aspect that are coming out and then from the front do UI perspective maybe giving in that history and transaction context two main insights beyond the questions are everybody thinks that mobile will be the future of onboarding the next wave of users but everybody is working on desktop ok some exceptions apply and the second most important one relates to what we are trying to do also with a def con track design track which is everybody agrees that designers need to be in the room since day one since they zero actually okay simple smart contracts create complex UX patterns so get a designer in your team from day one and I'll pass it to Gustavo yeah thank you and we will have also another slide where you can take a screenshot to come and talk to us we want to interview you get your insights and we will be posting this mental framework and also the future components thank you thank you Beltran Akhil my name is Gustavo guys I'm here with consensus design and I'm gonna talk to you I'm gonna show you guys a little bit of what we are working with and what we hope to accomplish in the space and bring into the this initiative and design systems we are calling a Trimble and our mission is to make it easier for developers to build depths without standing UX the way we're doing this is by partnering with some of the leading companies in the space and their design teams to learn about their insights learn about the users and what their what their struggles are and how these companies have been solving them we are going to take this insight and build a reactor library for users or for developers to start building depths with some patterns to start with and you don't have to do a lot of guessing from day one some of the stuff we hear about is gas gas and transactions so madam s has been doing wonderful work with these with these teams and we want to take their insights we want to build things like transaction components into Rimbaud that you can import and start using from day one we are talking with bounties to figure out what their users are wondering what happens when something goes to the blockchain what's that all about so we want to build things like prompts and alerts to educate users in it and get them to developers from day one we are talking with companies like you port to manage identity and we want to take their insights and build them into Rimbaud as well want to build an e components to Rimbaud that you can start using from day one so that's some of the things are we working on if you're interested please visit rim bolt consensus at design and join our spectrum chat and tell us what you think tell us about your pains your hopes and your dreams and want to build this with you so give us your feedback so now we're just gonna do a little panel discussion and pose some questions to you both what do you think is the role of designers in this space thank you so we are here to simplify your lives and we want to show you that design or you should start thinking that design is not UI this is a very important misconception of everybody and design actually has a lot of tools there's a lot different types of design and I can help you at different moments of your of your project there is service design system design behavioral design and all these can help you in different moments of your of your creation of of your adapts or your application of your projects so get a design co-founder come to the UX audits and see how your mindset can change after one hour or spending with a designer helping you through your own depth so I think you made a really good point about service design and like systems design how do you think we can get that seed on the table as designers when people are creating these ecosystems and platforms and protocols how do we how do we engage the people as designers for sure DEFCON is working a bit for that I hope that developers are working up waking up to that through the design system we are making trying to make your life easier and maybe you discover it through that as well come to rainbow consensus design and to on complex and and here and ask and ask questions and again just talk to designers from day one if you want bring the designer into your team you will see how it works yeah Bob just so you guys said I think we have design at DEFCON today this year so I think that's a great start let's bring designers into the space let's involve designers from day one let's start talking about design talking about design systems and get the conversation going and I think that's how we really incorporate this into the ecosystem and into the watching space so now we have designers in this space how do you think we bring more users into the space well I'm biased I'm a designer so my point of view is that design kind of can help solve everything I think it's a problem-solving mindset and I think we need designers tackling our biggest problems so how do we do that so I think we are our design teams are tackling a lot of these problems are tackling like thinking about users first and thinking about how blotching affects their lives and say as opposed to just the technology we need the cig knowledge to be used by humans and I think that designers bring that into the space to hear about people first yeah so I think like you touch on like empathy and taking it from the users perspective so how can non-designers kind of facilitate that too because I think that's a key skill set that anyone can kind of a balloon at the room to kind of enable that process something they should be looking at some readings yeah I think like look at design look at I mean from a designer's point of view like let's think about the users first listing about their lives let's think about our grandpa's and our nieces and our sisters and our moms and how blotching is going to have like help their lives we need this to be usable by everyone so let's let's start there we need we need to like think about the end-user and what does the space look like in ten years I think you also have to be mindful of not marginalizing the people that were building a technology for so we're building this new paradigm of financial ecosystem are we marginalizing maybe four billion people while we're doing this so maybe having those conversations while developing these protocols as well so maybe you could give a viewpoint on do you guys think we're at like the beginning of the web again or yeah so we are starting a new adventure and it feels kind of stepping back there are some similar things on some new things I think we show the slide of the early Geocities super ugly problems okay that was because people the the new creators did not know about kind of the standards to to communicate and to tell on the web and I've been teaching usability engineering Jakob Nielsen engineers I remember that and today it feels similar in the sense that we don't know the standards yet we are still looking for them but there is a very important difference from the early stages of the of the web which is at the beginning of the web everybody knew what it was for and they wanted it everybody wanted to tap on to this global connected a mindset of culture commerce etc today instead users ask why do I care so we have a difference today that we need we need to solve this centralization is a cultural movement and as designers we need to and developers also in the space we need to make a concerted effort to bring societies to this new new idea yeah I think in terms of being back being back in the like web 1.0 world I think in terms of design design and you I don't think a lot has changed we do have new paradigms and new UX workflows and you problems that we have to tackle however I think one of the biggest things aside from UI and UX and visual things it's these new let's say like ideas that we have instill into our users the idea of being responsible for your Kezia do you have like owning your data the idea of being like the only person in control and nobody else can help you those things are 100% new to our space and we need to do a really really good job of instill in our users if we're going to move forward just to put a counterweight to that do you think we should be bringing in existing mental models from web tool even though we're designing these new systems or do we have the opportunity to kind of step back and look at it from first principles and kind of try to redesign the whole thing leading that's conducive to what we're trying to do here or is you think this I think we can we can definitely build bring in whatever works we see right now we're like kind of like in the fork in the road where we see a lot of things we're centralizing some services all a sudden becomes all of a sudden like we can get carried away and kind of get rid of all the benefits that we get through blockchain like see phrase our hearts so let's just like use passwords and then we we lose like the user owning their data and their user being responsible so I think we just need to be mindful of that and yeah we have like an opportunity right now to to set the path and we need to like really make blockchain useful and remember like what it's here for and like what the value is and keep that and do our best job to keep that and not not not relinquish it and you know by just making things easier for users like we can we can try harder and we can make people learn this stuff I think we've had these internal conversations all the time so maybe we can give an opportunity to the audience if they have any questions I see her hand back there or no okay back there so to repeat the question what is the thoughts between explicit education rather than implicit good design yeah we struggle with that in our day to day jobs because of course good design should not need explanations but in this case we need to put onto the balance that we they are giving new unfamiliar concepts to the users and all at once it's like the firehose so one good design way of doing this is to progressively show and explain what these things are and what they are important are so it's a balance that we need to struggle every day I don't think they're made to exclusive I think good education is also good design I think like on top of like making making things pretty and make making things easier and reducing friction we have to be mindful of necessary friction we need to educate we need to talk about blockchain and talk about this stuff and talk to your moms and your sisters and your nieces about blockchain and read articles and we need to like and we need to instill it in the culture we need to have people talking about it we need to educate people and why it's important and why all this friction is necessary in order to build the future that we want to have and not like step back into web 2.0 I think another key point there is when we're educating people we need to make sure that there's some sort of centralization to this decentralized ecosystem where people have a common terminology and a common set of frameworks to kind of actually wrap their heads around because if each project is creating their own set of standards and education it gets very confusing for users to bounce from one to the other so that's why having opportunities for people to come in a room together and have these discussions is very imperative at this point in in our lifecycle for the ecosystem and hopefully you can start doing a better job with that any other additional questions you were here all right no plants as of yet but everything is open we really want all the people we can get in the community and if you reaiiy manned the blocking space is moving so fast that we need to know what developers are thinking about and what they're looking ahead and start you know tackling things before before we even get there I'm biased of course but ENS should be everywhere you know if you have users if you have users you need e and s if you have complicated hashes or something you can resolve into a simple string other questions yes good question how do we as designer keep up with a constantly and rapidly evolving ecosystem the blockchain ecosystem we don't sleep we we part we party hard we rape fun we I think it's important also for designers to be educated to technology in this case this is my personal opinion is one of the debates of the space also there's a lot of new designers coming in who don't understand the technology as deeply but in I am one of those I think it's important for designers and for everybody to learn about technology in general also be mindful we were supposed to have four people here today only three made it so she was party hard additional questions yeah designer tools for the cooperation between designers and developers in our interviews we are analyzing that and how to better integrate and make concerted effort that designers are since day one on working together with so one key insight we got from the interviews was when people are prototyping these tools they're using figma or these existing tools but that doesn't really give you a realistic user feedback because people aren't waiting for those load-times or when they click everything seems so smooth they're like yeah this is awesome from the existing patterns but you need to have some sort of test network or some sort of application that kind of facilitates so he's basically saying that people don't really need to understand protocols in web tool but it's kind of imperative for the decentralized technology stack for people to understand these to actually benefit from the valley exactly we also asked do users need to know about the blockchain and to all the people that we interface and so sorry to just step back he's saying is it limiting isn't having to know that is it limiting to mass mass adoption or will we ever get to a point I have faith in us that we will bring it and today we had an awesome onboarding tract onboarding breakout where a lot of people tried and tackle to solve these problems to hide and bring everything in the height bucket okay you have here universal logins Alex to understand he created also an awesome tool to hide a lot of that complexity gasps etc and private keys and I think we will get there but there is this layer that is unavoidable to explain why we are doing this and why our decentralized a Facebook will be a better than decentralized version and so that is you need to explain and maybe hopefully not you need to explain some technicality hopefully you don't need also when other scalability solutions and side chains and state channels come in I think is going to change the dynamics of the user interfaces and kind of make it more palatable for users because not everything needs to be decentralized you can play around with that so I think it's exciting to see where we're going and just last question we have five seconds right there yeah yeah like that's one of our biggest things right like onboarding like the first step the most important step is like one of the hardest steps in blockchain right now so we are all working super hard to fix onboarding if you guys are we going to def like into the talks there's like universal logins and there's like tons of solutions like popping in left and right sorry were you talking about actually onboarding new designers into the space yeah so these these efforts like Conflux what consensus I think just on wording like 70 designers in the past few years so there's a lot of people that are doing great stuff and you saw workshops happening over Def Con there is Gendry and nos that did the mechanism design for you and the UX implications Lex was there with his universal logins and kind of bringing that UX voice and that thing is just gonna get better from here thank you for everyone for your time and be sure to reach out to us [Applause]