User Experience of Aragon by Jouni Helminen (Devcon4)

I don't know if people know are we gonna have used it before so I thought I thought I'd do a live demo of what it looks like today so in the next 20 minutes we're going to claim your do name on Eragon maynot you can actually do this yourself you can follow and just pick your name if you want I'm gonna do one for something called lorikeets which is something I'm going to give you guys a sneak peek about this is I guess like a component toolkit and a design system that we've been working on for Eragon specifically but we are open sourcing it and more broadly want other people to be able to use it as well so really briefly just wants to introduce myself and my collaborator and friend Pierre so my name is yoni and we've been working on a couple of different open-source spreads over the last few years so worked on ubuntu we've been to fun mobile for about four years and then recent redesign for Rio metrics and most recently I guess last year so we've been working very hard in Aragon trying to make organizations on blockchain be very easy to use so yeah let's get into it let's claim your do name so if you want to try and follow it you can you can do it yourself it takes about two minutes you'll get the issue your own token you get to claim your name so it's pretty cool throwdown let's go to the website so for those of you who haven't seen nor heard from Aragon before Aragon is is a kind of a platform for das I guess so it's very very very extensible very broad you can do a lot of things with it but in this instance I'm going to create a do from managing Laura cane which is the design system so in the future we might want to be able to vote on different choices that we the participants in the open-source project once you go ahead with so I think a doll would be great great setup for that so I'm gonna do this a minute because we are live on maintenance as of this week after quite a lot of hard work and I'm gonna create a new organization so you can you can open existing once if you're just trying this out maybe try the demo first to see how the app looks like by I'm gonna create a new one so we'll create a new org and for this one we want that democracy talking project we have a lot of people potentially on on who on this bridge here wants to decide on things and we're gonna call it Laurie kit which is great nobody has squatted it next I'm gonna just kind of brace through this is kind of the settings for your voting that I'll just use the defaults for now but you can change this and I'll call it so when you create thing dear with Oregon today you also get a token a RC 20 token so I'm gonna create what could we call it it's call it Laurie coin and give it a ticker and then yeah you just confirm the transactions and get a cup of coffee I guess and then you've got your DA ready so to save some time I'm just gonna jump into a demo work to show you guys what happens next what what do you get when when you finish with the transactions and it looks like something like this so this is basically the arrogant main UI so what you got here on the left is a list of apps you have in your organization so by default you get apps like token managers manage your tokens to add people to your organization voting you can vote embarrass things you can just do random verse or anything you want or you can do voting relating to finance if you want to make any kind of transactions from your doubt to have to pass the reverting first before they accepted then that's a good use case actually I'll show you really quickly how this work so in this demo now we have two token holder so you can just add more people by just adding the adding theory theorem to address an athlean s name very soon big fans of unis voting looks like this so yeah you'll see what the current both sigh what's being rejected what's being approved you can view the details of that votes if there's an open vote I don't think there's any on this demo dial you can you can vote on it if you hold tokens in the organization in the finance up you hold different tokens on your organization so you you can do various things with it you can pay for things you know normal stuff but all this stuff can be linked to the voting app so whenever you want to make a decision so you can make sure that token holes approve those first so yeah making new transfers I can make a deposit so if I wanted to deposit some ether and then into this org I could just do it through here I can also send either directly but for different tokens better to do it through the app and you can if you want to withdraw let's say I wanted to pay for I don't know flights to zhuge I just put in there maybe they don't like airline they accept see through him I just put the contract address here and and then click this and depending how you got your permission set up it goes through it goes through a vote or if your account has the peppermint permissions to do this things directly then you can also do that we have an app story that's coming up which is going to be really cool so people can create their own Eragon apps and so just let me give some examples for now but hoping to have have a lots of and it's really quick to create this up as well so hoping you have lots more in future so yeah that's kind of a sneak peak of Eragon 0.6 Alba and yeah try it out is very quick to use very easy on main net so you can do rid of things now which is cool so the next thing I wanted to show you guys sarong presentation is lorikeet so lorikeets is something we've been thinking for about for a long time I guess they started off as just kind of an extension of we built something for ourselves will be thought it would be really cool if we could just expand this thing to something that anybody couldn't go with people can contribute it it and basically it'll just enable you to create production really beautiful apps much quicker because you have these good base line components and really you can use these for throwaway prototypes if you and B these are reusing all the components on Eragon itself so these are production ready so it's not really something that you have to worry about like it's just good fro prototype and I have to redo the whole thing once I go to prod you can actually use this in production we do we've been working on these components for probably about a year now this quite a pull requests mostly thanks to peer over there and we have the 11 contributors now but we're really hoping to to get more people building a stuff and on top of this and that's just kind of benefiting from the from the work we already done and being part of the community so this is a sneak peak there is a website coming pretty soon but just to give you more of an idea of what we're hoping to achieve with this so first and foremost and I guess this is where we are kind of right now on on on on the project is we have a very modular component library of react components we also have some specific UX patterns and components to decentralized web a lot of these components are pretty generic like you'd imagine with a kind of react to your tool kit to find like buttons and cards and so on but we also have some specific components to to bukchon which I'm going to show you guys a few of those in a minute and these components are pretty so we've done a lot of optimization for this so especially a mobile use civil difference this should really feel like I can native components and then animations is one thing that doesn't get used by a lot of projects because maybe it's a bit daunting or people don't really know what library to use or what to do so we're hoping to help with that as well we have some preset motion design done here and and and we're gonna have a lot more kind of a user guidance on that it's easily extendable so you can build your own like you don't you don't find the component you need you can just build your own and add it add it to hopefully submit a pull request first and we've tried to go for a kind of a clean clean UI design which you can you can use for your nap without every up looking like Eragon basically you can theme also thing these things pretty easily so if you want to do something looks very different that's that's totally doable and yeah I want to highlight the fact that we really want to do this as a community efforts because yeah it's Lola ecosystem will benefit if we have good kind of baseline components and we're hoping you're going to build your own and it's not just for developers really I'd love to see more designers getting involved so we're actually gonna submit a bunch of bounties both but Devon design pretty soon so if there's any designers in a room as well who want to weave find it's interesting and want to find out more and maybe work with us on these boundaries come and talk to me after that after the talk and I'll I do you guys see the bunny lists I'm product people as well anybody basically who's interested in working on good experiences so a couple of more things about them a react component specific so I think I've gone through most of these already but just to reiterate this is U style components which is a way of styling a theme your react components and they're very simple so you can really go to town on changing the look if you like we target in 60 frames per second native feel and performance so really one optimize how well the stuff promised we have that documentation section on coming on the website so you'll see like API Doc's - basically all these components you'll also have like items on on principles for design designer for dessert designer our systems dealing with latency informing users all that kind of stuff I'm going to show you a quick sneak peek of the of the dev Docs we've got it on you I'd Oregon dog for now but it will it'll be very soon moved to the lorikeets site so I just wanted to give you oh there we go a quick look into what what these some or the documentation looks like so you got code examples here how you use it you have like obvious when you have a code example we have had will have the rendered react component so you can mess around with it just see how it performs you can scale lately you can see how most of these components I think I actually all of them are responsive now so I'll show you in a little bit and a demo on mobile but yeah you can just see how everything works so yeah we're really hoping to make these documentation really thorough so people can really easily start using this and yeah they'll just you'll see you can pick like oh I like this control yes I use it and just just go either straight away so yeah you'll see that there's a bunch of the basic controls already built we'll probably need some more so and the bounces and if you have your own ideas yeah please get in touch with to go to go do a pull request if you if you build anything or just file an issue would you start from there cool so I want to talk a little bit more about mobile I think Mobile is super-important like I was really curious to find like beltram mentioned in the talk yesterday that everyone kind of notice in the back of their mind that yeah actually most of our users probably are using mobile as well but maybe having bill free yet so I think this is this is nice for you guys as well if you use locket you get mobile bro straight out of the box because these components are responsive and really well optimized for performance I'll just show a quick demo of what that looks like so this is our voting up and you can see like the desktop version where you have each row as a card and we just stack them and you'll see how like it just weed yeah we've spent a lot of time trying to think what's the best user experience for mobile as well going from like a wide screen to a small screen and just making sure that you can use all of this stuff for mobile too and I think Mobile is going to be really important for a blockchain in general I think we need better mobile voice and etc but I think we're trying to do our part so focusing in the components making sure that they really usable in mobile too and layouts so I want to talk a little bit about some design guidelines and what we're hoping to achieve here so we are actually here we're hoping to we saw the talk yesterday which she was really great we're hoping to collaborate with more more projects are working on this type of guidelines to just have a better documentation on what best practices are for designing designing in general and then also designing for for a theorem or decentralized systems so we'll have things like dos and don'ts on the website of what you should do what you shouldn't do I think material design guidelines that are amazing so I think so have something like that but more focused towards design sure I see use cases and yeah obviously templates and tools as well I think is super important for designers who are jumping into this space to be able to just go in and download like source files for these things and start messing around and I think it just opens up so much more for contribution so we have the components built-ins designer sketch right now but we have started putting some of this over to figma and framer expert like interactive agency so this is one area we'd be super keen on any designers in the crowd or watching is if if you'd like to kind of get involved in in putting this stuff over to fig more frameworks get in touch so yeah a couple of examples of the more blocks then sorry block change specific components one big thing obviously is dealing with latency because the transactions take a very long time to mine right now even I think a year or two from now they still take a while to mine so we need to somehow make sure that users are aware of what's going on they have they can anticipate how long it's going to take so they can they can do something else in meanwhile or you know they're not blocked and just waiting for things are wondering I what just happened and where did this thing go I'll just show you a quick quick example this is is our finance up so just skipping food through a couple of bits of signing it with me to muscular stuff but when you submit a transfer for instance we think it would be really nice to like just show kind of an optimistic US state straight away of okay we know it's not signed yet but we still want to show you where you are right now so kind of show pending state of right your transactions been mined right now you can roughly see how long you'll take we get from the gas price you sent we'll be able to estimate a rough time because you can it will just save you time like you don't have to try and and Scrabble around for the contract right so you can just see drag laser scanners as well if you like and then once it's mined and we'll just whoops we'll just add it to add it to the page and and yeah it'll just update straight away so trying to keep users in ended up and then just keep them informed of progress all the time so that they don't have to kind of switch around different apps wondering what what just happened and you know where we are basically and similarly to to that we just we just think there's a there's a lot of things we could do for helping users feel more secure and more informed so so for instance things like toasts a we could use for quick confirmations and notifications for more on chain activity so I'll show an example of the toast component that we're just building right now when you have like quick interactions you usually want to confirm to the user that okay what you just did has actually you know something's happened with it so this is probably more we could use this for unchanged stuff as well but I think anything where you just need a quick confirmation of it okay we got it then we have something I'll show you a quick video of like our transactions or notifications panel so all the on chanax easier you do would go to kind of a place where you can always see like this is this is stuff I've been interacted with on chain I can see in one place it'll notify me if the state of of the transaction changes when I get men mind button they fail so we have different states for failure for instance so it's very clear that you can always go to one place and just see what's been going on with your Unchained transactions another thing we've been working on I'm done too much working but I think it's worth plugging I think it's really cool it's more of a developer thing but I'm human readable transaction so so right now I'll show you what that looks like you probably familiar with this kind of scenario where the where you have your meter mask message and it just does make sense so we we propose this new thing called rad spec where you can basically make the transaction human readable so and we working with me to my screen I think and to get this implemented there so right now this works in Aragon we can basically tell the users where they are with so what the actions they're going to do are going to do in in plain English I think this is this is really going to help another thing for decentralized components is theorem addresses the kind of this really long ugly strings right now so we're build this address budget component where you have like a clickable thing where we can show the whole address we can show a smaller version of it especially in mobile you'll see the C the identifier block Ian and and then you'll just be able to click on it and copy this straight lead which is very common use case would just thought we save you a couple of clicks though see you on a task and same with DNS names and so on so yeah another kind of block chain specific component motion we use this library called the react spring a lot so I'm running out of time but basically motion I think is a really important thing of of the user experience that I'm people don't use enough so we're hoping to help you with this should be quick and should be used for helping you focus attention certain things not just for flash but yeah I've got a quick video of what this could look like for instance um for transitions I think it really helps to show the user where things are coming from where you should focus on your your guys and so on yeah I think we almost got into the answer when can I use this we're hoping for an early Christmas so late November ish I think depending on how busy pair is but yeah it's nearly nearly done most of the components are ready to go we just need to work a bit more on the website and we're good so yeah last plug if you're interested in Eragon or governess on the blockchain you should come to Berlin in January we have this amazing conference there called Eric on can go to Eric under one to find out more and that's it thank you much you