Metabolism Technical Summit - Building Great User Experience

[Applause] [Music] hey dan hey jacob thank you for being here a little bit earlier appreciate that yeah sure um no problem am i live you are live yes welcome to the stuff okay cool awesome um yeah i'll get out of the way for you just in a second but yeah excited to hear kind of about you know building great user experience and everything from you this is our last talk of the the whole set so we've seen 0101 102 103 zora api and uh obviously it's one thing to build everything but then it's another thing to make it usable and make it for humans so i'm excited to hear uh about where to go from there so i'll get out of the way here i'll stop sharing my screen i'll let you take over um but yeah thanks again for doing this team sweet uh um hello um i think i'm live here um i my name's dane and i am a product engineer at sora um so i guess uh what does that mean in the larger thing scheme of things um i'm doing this presentation today called how to build engaging or you know fun or whatever you want to call it user experiences um and you know it's aura in my time there we've crafted um an amazing stack of technology to build whatever really whatever you can imagine on top of it um and i've been fortunate to build a lot of interesting projects um over the last year um so yeah i just wanted to talk about those first and sort of the context that i've been um working in um as a product engineer yeah i come from a design and development background so i've been sort of building websites if you will for quite a long time and one thing that really excites me about the medium is that you know you're you're working with you're building things on a computer for the computer for this network and um yeah i think like having a heavy influence with design has kind of helped guide me towards um what i think is interesting to build as a front end um so um i just want to um sort of step through some different projects um i first off i embarked on this um sort of fun first personal project i guess but um you know we've been obviously iterating over this notion of the decentralized marketplace for quite some time when i came to zora i worked on quite a few auction houses the first project being this doge auction house and yeah and then you know soon after that we sort of took this concept and iterated further on it [Music] by collaborating with um holly herndon and matt dryhurst to create um this auction house for a project a fascinating project that they were they've been working on um creating a voice model of holly's voice and opening that up for the public to build um to use to create audio tracks and so it's a really interesting project we started off auctioning the [Music] voice model itself and then uh yeah just some of the data around that and then we and then there was an open call to the community to create tracks and eventually we built out this experience to showcase them and also to auction them off to raise to raise funds for the dow to further their research um so yeah this was like super exciting because for me um because i represented this intersection of something that i've been passionate about for a long time which is um design specifically an artwork that contextualizes music um i was you know probably like many other people attracted to graphic design at really young age because i got into record collecting and i thought that i really formed this opinion that it was fascinating how the album packaging could really add this extra layer to the music that it was presenting and i feel like now that we've moved into certainly a more culture of hyper media and um you know everything's online we have this really exciting opportunity to kind of think back on that materiality of um you know out like music packaging and translate that over to interactive experiences you know that provide context for artists release releases that labels you know labels whatever you want to call it um and so i think that like again what's fascinating about um you know especially like the music nft ecosystem is that you know more or less the the media is available from any client and so this gives a really cool opportunity to like really in that like kind of push the idea of like what is a music client um and what is what is how do we contextualize um digital audio um so yeah so i think you know like this this holley plus project really um i think leaned into that on multiple access that were really fascinating and of course at the end of the day you know you can listen to the music um and you can listen to in all other different contexts as well you can listen to it at zoro.com you can listen to it i don't know from wherever wherever it's being rendered and so that sort of segues into this notion that you know we have this amazing data registry we have these possibilities for all of these interactions that can happen on chain and um we also have this layer of being able to i guess i'll just use the word publish to publish media to the blockchain has an immutable um sort of content referencing system um and so yeah i think you know that when the interactions happen for instance when these auctions are taking place and there's a lot of activity around them like we saw in doge auction and other you know sort of like high profile auctions um you really get the sense of you know this buzzing network of you know activity and again i might be staying the obvious to everybody here but um again i think that that really presents a unique way to think about how oh how do we render this how do we present this type of activity and how they present the media that's associated with it um so you know another project that i did at zora um and again all all of this work is like collaboration with our team it's just amazing all of the hard work that goes into every different aspect that every team member here um at zora contributes and it's really it's really exciting to be able to kind of play with all of this stuff um at the very most user-facing level so this project was a lot of fun this was a um this was a big mint drop like the sort of 10 000 pfp archetype um and again like we just wanted to sort of really lean into giving the artwork context um and just creating like a real white label like a white label experience for this media because again the media is decentralized you can view it anywhere that there's a render these large marketplaces like openc for example uh foundation whatever um you know they they serve a wonderful purpose as an aggregate and being able to sort of display large amounts of you know or everything um but what's important is to kind of to like separate like the actual artwork the music and um yeah just just like again contextualize it and package it in a more um unique sort of experience and so you know like while this mint was happening it was again it was exciting to see a lot of the activity um we iterated further on this auction house concept with you know whitmap just taking various um high profile collections and creating auction houses around them board apes of course um you know and little design ideas like referencing the christie's logo because uh you know decentralized auctions are very different from um auctions that happen in large um sort of auction houses if you will um yeah and then we build another one for crypto punks and this sort of led to some interesting things where um you know when the war broke out in ukraine we um were contacted and i broke off and worked on this sort of individually but we helped build out you know using using some of the tools that we've built with source tools a fundraising auction and to raise funds to help out people trying to defend themselves um in that country so um you know this was a yet again another fascinating sort of um example of this global network activity um coming together and interacting on a platform um that is displaying and also allowing you to interact with something that's happening at that moment um let's see um yeah so that sort of that leads me to the next phase which um has been we've been iterating on sort of like larger marketplace concepts and something that we've been developing in the last few months is a marketplace specific for nouns and nouns derivatives um and again this is another example of um you know taking this idea of a sort of limited aggregate um of various contracts and highlighting them in a way that um feels like more attuned to not only like the brand but also the attitude of a particular you know grouping of artwork or you know concepts etc so what's fun about this is that again you can go to this marketplace you can get a larger bird's eye view of um all of the tokens we can look at um we can look at like auction history um which again is really fascinating for the primary auctions and um yeah i mean you can also if you own a few you can list them um if you like and you can buy them if they're being sold on chain um with our v3 ask module and this is sort of this is a work in progress definitely um we will be folding a lot more features into it but that it's also been an exciting um project for me in the sense that i've used it to iterate on a template if you will um that i've been cooking up um that attempts to generalize a lot of the functionality the componentry that we've been developing um and so this repo will be linked um it's you know i i i'm building it as an example more so than a de facto white label um template or starter kit if you will um so i just really invite and i'm going to be working on it while this hackathon is running and adding features that i think are interesting building them in ways that seem to make sense you know i project that for other developers might be handy you know really focusing on making a lot of the functionality um i'll just go to the code base a lot of the sort of like the groupings of functionality for instance if i go here and go to a collection um you know something like filtering we see this on a lot of marketplaces that yeah how do we how do we make these filters available um for developers to kind of slot into their projects without having to you know build the whole thing themselves and so a lot of what's going on in this is this repo is um you know just exploring that that notion of you know if you're going to include a filter um sidebar or something like that into some view that you're building in your application um you know like how how does that slot in and um how you know how how many sensible defaults can be included in building out that component tree um you know like how much user configuration do we want to offer do we want to keep this in the context of a template do we want this to be a mpm package that people can easily include into their projects like a plugin for example um and so a lot of these sort of open questions are it's a work in progress and a lot of these ideas are being sort of iterated on and worked through as exemplified in this repo um so yeah i mean i'll just spin around um and kind of talk to what i've been building over the last couple of days um you know one interesting development is this is the additions contracts that we've deployed and the super amazing app um to create them um and i've been having fun creating some for myself and making some music and putting some tracks out and uh yeah it's just it's a it's a really exciting and really interesting way to uh sort of interact with this concept and clearly it is because a lot of individuals have been and groups of people have been using it for many different purposes but um i think for for myself i was wondering how how do we how do we contextualize these additions um in the context of like a sort of general purpose marketplace or a marketplace that you could you could um you know build yourself um and you know one interesting thing obviously is that each every token is exactly the same and so while you know if you go to like a collection um you know all these these are all one ones but whether they're generative or hand-carved each nft if you go to a view like this they're not all the same um conversely if you go to if you're looking at an addition for example um you know they all are they are all the same and so i've been playing around with this notion of like how do i render the contract metadata um i've got this little debug button here i'm pulling down like contract metadata and a lot of the props associated with the um the minting contract um how do i represent that in a way that's interesting that sort of leans a little bit more into you know just just building portable ui around this notion that yes all of these tokens on this contract are identical so maybe i don't want to just look at a grid of four or five hundred or five you know however menu has been minted unless i kind of want to know who's been minting them and i want to see the ens names or et cetera et cetera if somebody's like if the mint is out somebody started listing a few on the secondary market um like with our with our ass module um so yeah so yeah i'm kind of like knee deep in this right now i just took this snapchat as an opportunity to kind of jam a little bit um and specifically focusing on a music player and so if i'm going to incorporate some ideas from this embed product that we released a little while back that has a music player in it and apply that and then of course add the mint button so you can go to this platform whatever it is and for whomever it is and um go ahead and make one of the additions if you mentioned it's still open um so yeah so you know my my method of working is i make a new folder up here i'm trying to keep everything a little segregated um so that perhaps it's a little bit more it's a little bit easier to make that connection between what this is meant to do how it slots into the application and um yeah and again like trying to make things portable um i feel like many developers if you start building certain types of projects just to jump back to this contextualizing music for example if i were to start making a bunch of projects for musicians again um or labels or whatever i'd really just want to have a good place to start so i can really spend a lot of my energy and time focusing on how do i differentiate differentiate this experience visually how do i differentiate it with perhaps like a interesting approach to the user interface um how do i add new features that might be exciting to open source like like a music player i don't know you know whatever the sky's the limit um but we're building all of this on top of um of course our protocol layer and then also the api that we've constructed which is just fascinating so um yeah um so sorry just just checking to make sure i have not rambled on indefinitely um i started a little bit early so kind of lost track of time here clearly i enjoy talking about this this stuff um so yeah i mean maybe i'll just continue to go through the uh um i'll just continue to kind of like go through the repo walk through it and then maybe with what you're seeing on my uh blockseeker.xyz site and sorry excuse me um yeah so where to start um i created a fairly detailed readme i think um but if if nothing is very clear um you tell me um the the one of the sort of interesting concepts behind this approach and this was informed by the nouns marketplace is that you know by default if you go to like collections and then the address for example as a route if you don't white label certain contracts you know this user interface that you're building really could just render any nft collection or nft out there um that exists um and so i think that like while that is an extremely uh fascinating uh i would say concept a fascinating reality um that one could build around um you know you don't want that for everything i guess unless you're really curious if you come up with some really funny design i don't know what and um you just want to see like what what do all these tokens look like um and i've tried that um i started collecting some pretty um interesting um nfts um on the free mints that uh this super cool site mint dot fun exposed um under the pseudonym pseudonym crunkcollector.eath and so you know there's a wallet that has just a bunch of goblins and things like that and i plan to make something kind of fun to to represent that at some point um it's super easy with the um with the api that is demoed to do stuff like this um so yeah it's just like one more layer that's kind of solved and then you get to play around um but uh anyway back to this um so you know this is like here's the landing page let's look at the pages this is the next js app um which is the de facto framework for these types of projects um if you're working in some other framework um kudos to you but all of this a lot of this work just is sort of built in the context of next.js um so yeah let's just like i'll go to my index page and i have my landing composition here and go to compositions landing um here's my uh layout and [Music] i am using my collection filter module filter provider um and i'm essentially hiding everything so it just functions as a lazy loading grid or table uh all of the contract and the keys that i've thrown at it um so and then within that i have my little landing nfts grid and i i've created another component called nft grid and it's right here another pattern that i like to use is um just just taking advantage of the provider book pattern that is so common react um it makes it make it really like i think especially when you're building a lot of apps um and you want flexibility you want to insert a custom renderer for example um you know if you if you use like a provider for all the nft data then of course you don't have to do prop drilling you have to you know you don't have to like drop a bunch of props and map them all out and type them et cetera et cetera it just makes things a little bit more flexible so i as you can see if i jump back to this uh right there's like a lot of code in this repo so a lot of people have contributed to it so uh have fun looking through it um but uh yeah so if i go back here to my landing at ft's i can see that i've actually created like a custom little render and this was to render the the nft data as i wanted to on the landing page here in this kind of style um so yeah so if i go there you can see that i'm using my nfp provider data and then i'm just going ahead and yeah slapping all this stuff together and um you know adding some unique styles where possible now another cool thing that's going on in this repo is that we've been working on a ui library essentially we've built it called zord um it's cool um we've built it on top of vanilla extract which is a really interesting javascript to see it or css and js library um what it does is it actually extracts and compiles um static css like style sheet essentially so it's you've been around a while you've probably used like sas or less or one of these css preprocessors vanilla extract works very much the same way yet the interface is such that it allows you to um essentially like write all of this styling as you would expect in javascript and um one of the really cool innovations that um that is that is um exposed in in this um in this zoroabzord package which is now public um it is in beta there is not we have not created heaps of documentation for it yet um so really here's an example of it in use but there is not a formal readme or anything like that um but i think if you're familiar with css then you might be able to explore this relatively quickly and also it's important to read vanilla extract documents because that takes a little bit of time to uh get your bearings with um especially if you want to start writing custom classes and things like that but what's super cool about this is that um all of your sort of very basic css um uh i guess rules are typed in the components themselves and so if you look here stack this is essentially a div that is a flex column um and i've i say gap margin top padding x padding it started this will probably like this sort of model and pattern might be familiar if you've used utility css libraries like tailwind the bootstrap or you know whatever um it just like the speed that you can compose with this um it's pretty amazing once you get the hang of it it just feels so intuitive to just like start building out components um and then you can start to think about ways to sort of add your own spice on the top if you will and you know we we are we have been conceptualizing sort of strategizing around what a theming interface would look like and um i think that that is something that we're excited to kind of know what users would like um you know to what extent do you want to be able to theme versus like if you're comfortable writing css you can just go in here to you can just create like a global css file make some css variables super powerful it's css at the end of the day and you can create classes you can slap those classes into your um zord vanilla extract elements you can make you can use this global style approach which will make many people cringe if they see this little flag at the end of the style but all i will say to that is that again if you're like me and i enjoy sort of designing and coding together um you know it's kind of like by whatever means necessary until there's some alternatives that you can move and so yeah i don't know you know like here i'm just playing around with colors and [Music] the way things are organized i thought i would make a slide out menu instead of a popover menu like this but the repo is set up in such a way that you can just uh let me go to the menu you can um okay yeah you can pass a prop and you can say pop over or pop out um so you know again who knows maybe maybe i want this to be a pop-up on mobile and a slide-out on desktop or something uh yeah just you know just constantly trying to think about how to uh when you're building something use configuration um as a mode of sort of exploring different layouts and composition design ideas etc um so yeah i um it's not running locally um these are some nfts that i created for the last 8th global hackathon i've been minting my kids on i hope that's okay with him um but i think it's pretty cool so um yeah i i um i guess i'm kind of coming up on my formal time um i am wondering maybe if it is appropriate to open this up for questions um having no audience feedback i feel like i'm talking at a wall um but i know i'm not and i see jacob um dialing in here okay you're here what was i even was i even being recorded it's like there's like 200 people watching it don't worry well we'll see if anybody has any questions um i did see your your uh exclamation point important sins don't worry i'm paying attention so yeah we'll just open it up see if anybody has any questions um over on the live chat um but uh since i know we just had a bunch of calls or a bunch of talks back to back it's possible that uh people are more in the consume than necessarily the engage mode their eyes are just kind of you know it's just so much information i mean i i will never be able to um you know isabella is a powerhouse and i know what she shared with everybody probably got people brains just reeling so um yeah but you know if anybody's around if anybody if i can't answer any questions i'm happy to um awesome well i'm not seeing too much come through on on our end so it might be that people are sort of uh you know happy with what was presented but i think this was awesome i mean it was fun to kind of explore like um what was possible i think somebody asks you know can we use these in our hack and i think like the answer to that is like probably yes because everything you used is sort of like just out there anyway basically yep it is now so yes absolutely um go ahead awesome all right all right great well maybe we'll maybe we'll leave it there um well thank you so much dana i really appreciate you uh you're rolling through that with us and um yeah really awesome to kind of see the the journey as well and and kind of what's possible yeah cool all right well thank you thanks for having me um thank you you too cheers