Protocol Berg v2: Diogo Ribeiro - Designing Decentralized Storage Without Better UX

Hey. Uh, can you guys hear me? All right. Feeling good. Uh, thank you first of all so much for staying in.

I know there's lunch outside the venue is amazing, but I think we have some or opportunity uh to look at a few things today that may be interesting and I hope that I do a good job of really captivating you guys. But we'll see. Uh I'm a designer. Uh previously I was an engineer but then I quit because it was really hard. So what you'll see today is a process of thinking about stuff that I knew very little about and just looking at them through the lens of someone who just wants to abstract some things really look at things that we want to emphasize and make sure that they're they're usable.

the speakers that came before me today I think did a good job uh rooting us in the narratives the tech also the the need for good UX good products and what I want to do today is just take a different approach and just go a bit more towards the practical aspect I get that a lot of people here are building their own products and what happens when for example you don't have a designer what can you do to improve the products that the end users are going to see. Um, I get all of you use your bathroom, but maybe not everyone knows where the pipes on your house go. And that's how I feel a bit sometimes looking at some some of the tech stacks and the products that I deal with uh daily, which is what the hell is this? What it is is it actually doing how can I surface this to the end user so that it makes a bit more sense. And usually we do not know again where the pipes go but we need to find easy ways to understand what exactly we want to achieve or else we end up getting this like you can poop and wash your hands I think maybe uh but probably it's not the out the intended outcome and I also want to think that you would not like to return to something looking like this.

And especially in a world where attention is a commodity, we need to make sure that our users when they see our products, they see it, they see them looking at their best, even if they obviously have some underlying issues that we cannot circumvent. And this is especially important when you're talking about decentralization and all the tech that we work with because there are some shortcomings that we know that exist. But I think that through great design we can actually bypass them. Uh really assume that they are there but try to make sure that our users not experience the bad parts. Uh and here just to contrast with what you guys is seeing like a Wes Anderson type of uh toilet which is much better but what I want to prove here is that what we're trying to get are is this is the part that we usually do not see but if we don't fix what's in here probably what the user will see there is not going to work like you've seen before.

So essentially I'm proposing we deal with design thinking about two layers of design which is developer UX and user UX. People are usually most most uh worried or concerned about how the product looks to the others outside. But I want to believe that if we do not fix how things look and feel for the builders of the space, they don't have great incentives to build great products um to end with. And there were discussions earlier about adoption and probably time to market. Why why things don't have that adoption?

And I think it's mostly because we're not on boarding people correctly. We're not managing incentives the right way. And we have to look at what products are working. And I'm not talking again about how they're looking visually, um, if they're beautiful, but essentially if the experience to start using them to begin with is working or correct. So what can we do to improve uh developer user experience?

Um there are a set of things that we want that I want to show you guys today and I'm pretty much done talking about in abstract. I'm gonna uh start showing what what I want to show you. Uh but I just want to make a disclaimer that things that you're going to see today I have no association with these products. I'm not endorsing any of them. There are a lot of centralized uh alternatives to decentralized storage that I'll be showing here today.

But I just want to put them side by side so we can look at them and really see maybe how can we do a bit better. And some of these things obviously there are protocol level. So there's not much that we can do other than advocating for change, requesting or being involved uh in them like trying to really change from within. But probably there's also some good things that we can look at centralized options as a guidance on boarding. I think the way we are onboarding currently these uh users or developers because I developers are users of of this of these protocols is not ideal.

We should instead minimize the setup and the the delay delay decisions as much as possible and let devs feel value before asking for tokens. Here I have side by side two products. Um it's Cloudflare and Filecoin. And just the idea of just trying to go to both of these websites regardless if they're good-looking or not. It's evident how easy it is to access.

Oh, sorry. Oh, okay. Okay. Cool. Cool.

Yeah. Not sure if this is going to play the video, but I had videos here that showed that for Cloudflare, it basically just it's just two clicks to get to pricing clarity. So, you essentially have a clear idea of good UX copyrightiting, which enables you to get started and understand how much something is going to cost pretty easily. And whereas with other options, you tend you tend to get into a maze without understanding how how much something costs, how to get started, where are things that you eventually will need. Um, we need to make incentives intuitive and and fair.

Um, incentives, and I'm talking uh not tokconomics. Obviously, some of these protocols require you to have a tokens, but I think that as much as possible, abstraction on some of these uh parts are required in order for users to really understand what they're dealing with. We need to be able to compare apples to apples so that users can make a decision on what to use. And obviously there's the ethical imperative and all of the the advantages that we know of using decentralized storage, but in the end it's all due to how easy it is to use and is it going to cost me more and cost can be effective cost when I'm looking at something like a subscription or even dev time. I'm going to take uh uh uh the first example that I'm going to show today and I took I took a stab at at some some of these products where I have the current state and some suggestions of improvement of of designs and I'm going to run you through them so you can see how they look like.

So first is hard drive uh built on our weave and this is their um pricing uh page which essentially it's uh a great deal of a motivation for someone who wants to use any of this. Um, but what is failing here is that they're not surfacing anything about what's great about uh the the product and and the features and also providing it it in in an UI that's fairly different from what people are used to seeing. So my first approach was doing this and what we're trying to do is just bring in a direct comparison uh so it's easy to see like okay centralized option costs this these are the features this is the hard drive this is what we offer and a clear call to action um also and again I I'm going to really emphasize this correct or at least improved uh UX copyrightiting also goes a long way what are these guys doing like what are the features? Arweave offers permanent uh storage. So you pay once and it's it's get get stored forever.

So why not say it clearly? And in order to compare apples to apples when people look at these different uh products they need to be able to see what Dropbox is going to cost when when we compare scales, right? So it's diffic diff difficult to to tell all of these examples. I'm using like a 100 year uh scale to make sense of all of it. Um but again what we're bringing in is a really recognizable pattern instead of a a complex calculator.

And again I know that we can have calculators still. That's why like you can have a drop down here that still changes the values. But what we want to do this is hard enough for us to try to reinvent the wheel. So just bring in some normality uh and fit in with the rest of the guys that are already bringing in your users. This is a different approach like uh a redesign option to for a redesign which kind of looks uh like something you've seen a million times.

Just try to simplify and really bring in the value that um the value prop that you have for your product. At the end, developer UX is what enables end user UX. If we not make it easier for uh de uh developer to make the choice to use this product, it's really hard for then the end product to look great. Again, if you don't have a designer or someone caring about these, I think there are very or a few easy um points that I would like to mention that maybe when you're building your products, you think about them. And again, some of these things they are very um are things that we don't even think about because they're so normal on all the products, but I think that we we have to think about them when building it.

uh we may not control protocol complexity but we can still shave user experience around it. So how do we improve what users see, feel and trust when protocol constraints exist? Essentially can devs do something and I think yes. Yes, for sure. Uh we adopt UX primitives that help mitigate current limitations and meet user expectations across four pillars.

And these four pillars uh especially for decentralized tech I think are very important and are usually creating a lot of issues at the front. Uh speed designed for perceived performance even if protocol reality lags. What often happens is that things are slow because it's on the blockchain and decentralized uh protocols kind of some of them obviously it it all varies but have this uh thing that we need to create barriers so that users do not feel that it's slow. Uh I have an example here for Bzon. Obviously the the videos I don't know are not working but gladly I have a screenshot here.

Uh and this is what it looks like. Uh the the product loading it takes maybe like six seconds to load the UI. So this is where you where where you are when you first load the the the product. This is um decentralized marketplace. And what can we do in order to not show this because users do not care what is the the infrastructure that it's powering the product.

They really don't give a crap. So when they come to website and see it looking like this, they're they're going to bounce, right? But there are a few things that we can do easily to take this. We're not changing infra. We're just doing applying some UX uh and hiding the problem which is essentially what we did in the sync a few slides back.

We're going to work on optimistic UI progressive disclosure async non-blocking UI stakes or even the concept of hybrid architecture when thinking about these things. So this is an idea of a redesign. So taking what you see in here this example and hiding a few things. So it takes or gives time to load and surfacing only a few. So essentially just hiding a few things like if this is the end of the browser we can just do some sort of like progressive loading putting it slightly lower down the page to give it some time.

Um, another thing that we can do is use a concept of an IBR architecture which is think about a products and really think deep what things need to be stored in a decentralized manner and only those are being uh surfaced that way and everything else can be centralized or be coming from from a different a different method. For example, here we just promoted this banner and just added some content. But this doesn't have to be on chain, right? The things that are important here for this product would be like brands, sellers, and any any any types of products and things like that. Um, another example of a redesign is by using an optimistic UI.

And what what this is is just not breaking the layout which is something that uh in in their case they broke a lot like if you clicked you went to a different page you it was still waiting for things to load. Uh and these days we see all the time using a lot of skeletons and things like that. I would go a bit further just using those types of uh ideas but making it branded uh so that it feels it's not ideal but it's not like super bad which is what we're trying to do which we're just trying to surface a few things but hide the others so that pro products do not suck. um axis. We need to be able to design for observability which is like can I see my stuff by adding status indicators, error messaging and other things that I add an image here of also starashia would gives a good example of this um of we need to give the user previews of what they're going to see and some of these um storage um decentralized storage uh products make it a bit hard to understand if if my uh upload is actually there or not and people are they are used to a certain pattern that reveals those um I have here versal versus pinata which is kind of like surfacing the things that I believe vers is doing interesting like just a visibility of status metrics a code snippet that it's easy for you to just copy and start using and real time feedback with toasts just signaling when something happens.

You drop a file and it actually uploaded. Contrasting the this to Pinata, there there are a few things that they decided on purpose not to to show. For example, that all files are pinned by default uh and which I think would be interesting to add. And again, some of the things we need to make redundant for people to really understand that they can't access it uh and or have trust. And this leads me to the next uh security designed for perceived safety informing users on how their data is protected.

Showing encryption storage region info through like iconography and things like that. Contextual cues uh like tool tips uh term permanence info or any uh protocol specific information that needs to be there uh for them to assess that the the files are secure. It's of utmost importance. um trust will it still be there promote to trust by surfacing redundancy file health dashboards uh like number copies where it's stored decentralization meters UI prompts when user needs to take an action in order to continue having the the file stored these are things that can help us here um and in the end there's a question which is when will the centralized storage be the default And I think that if we are able to improve like whole experience from developers uh to end users will benefit and all of the uh ethical imperatives that based the ideals of decentralization will survive grow strong because in the end no one wants to go and use that toilet from the beginning but everyone wants to access Great great bathrooms. Thank you so much.

Thank you. We do have a couple of questions and a bunch of questions that are for some reason for another session. I don't think we should talk about those. Um so let's do the first uh two ones. um hybrid architectures require a higher maintenance effort.

Uh won't this push push us to rather drop the more decentralized part of the fast for our users uh anyway to counter this? Um I would even add uh that costs even more money but it's kind of like I think a choice right do are you having users at this stage or not? Uh things or can you make compromises? I I would put it that way. Uh honestly.

Yeah. All right. Um and then another question, uh this is pretty product focused and translates fairly well to web two like the stuff you talked about. Uh any ideas for how we could improve, for example, wallet UX, which doesn't translate so well to web two maybe. Yeah.

Yeah, for sure. uh well wallet UX uh I was pre previously lead designer for talisman wallet so actually I know uh of wallets sort of and I think that there's obviously a great transition towards account abstraction and all of that that I think it's already powering a big move in wallet UX uh I honestly I think wallets are pretty far ahead when it comes when comparing to infer like the storage So I'm not sure exactly how the examples that I've showed today can translate directly but what I'm what I'm what I say is uh when we start talking about complex uh um things like private keys um I and in order to on board more users if that's the goal it's all dependent on what what your goal what you want users to do I think that trying to create all of those or more abstractions will help ease of onboard uh And I think that that are the things that I believe could apply for wallets. All right. Um, thank you for that. I think the last three questions uh accidentally ended up here.

Yeah. Um, you can answer them if you if you want, but uh I would don't want to. I don't. All right. How much?