[Music]
so I'm going to going to do just a quick
overview on how to how to apply design
into contracts so first what what I'm
doing here I mean what's what's my job
here what of course you know know the
designer is the guy that came comes
after Fabian done his job and just make
it prettier right so I I don't really
see it that way I think that the purpose
of the interface of course is to
translate the code into what the user
user sees so in the same way the purpose
of the interface designer is to be some
sort of translator between the developer
and the end user so I think it's
important that the purpose of the
designer is to be the guy that tries to
connect the two words and in order to do
that you need to do something that
designers don't like really to do which
is understanding the code and
understanding what's going on under
under I mean of course it's not the job
of the designer to develop but if he
doesn't understand what he's designing
he he will not be doing a very good job
at designing anything so here's an
example so the first time that Chan came
up with this code we are talking and we
are exchanging ideas this was the the
first layout of the of the purchase
function and you might notice that I
mean just looks like something we we saw
but there is this one detail which is
the buyer was set at the contract uh
when the contract was created which made
the my job needed that the way that
someone would interact with the contract
was the seller would announce the price
of blockchain the buyer would answer him
look I want to buy your stuff and then
the seller would deploy would get the
contract the address from the buyer
deploy the contract and communicate the
address of the contract back to the
buyer and then the buyer needs to send
the money to a contract which in some
sense might make sense and there are
some advantages to it but it creates a
lot of problems it makes the the the
interface a lot more complex ated and
and creates a lot of problems like what
if the buyer NE never answers back what
what if the buyer disappears then you
have to add some way to refund so if you
need to refund anyway so why do you need
to create the seller in the beginning so
that's why now we we decided that the
seller just puts the the seller doesn't
Define who the buyer is the buyer
defines himself by actually giv the
money so if the buyer doesn't deposit
the money he's not the buyer which makes
sense and simplifies my job because now
the seller deploys the contract with
already the price information so the way
that he communicates the price is via
the contract and then all he has to do
all the buyer has to do is send money to
the contract which makes more it's
easier for both of them and simplify the
what we need to do so now take let's
take another look at the contract and
that's all the functions that the
interface has to do so you have to
imagine that interface needs to be able
to abort to confirm the purchase to
confirm the received so it's probably
something that we need four buttons and
we need to add somewhere you can add the
address of the contract so you can
interact with it but before we go there
and try to design it on Photoshop let's
try to think about let's try to simplify
it so if you remove it you see that
those are the functions and those are
the modifiers of the functions and if
you try to rearrange them you notice
that we have have like three states and
we have three two states and they can be
in three conditions and there's only one
function that you can actually do
meaning that um you have to remember
that a d can know who the other person
is so in a d has can ask for an access
asking for the user look who who are you
give me the address of your if account
so I can recognize you meaning that the
app knows if she's talking to she it is
talking to the seller the buyer or
anyone
else meaning that actually what happens
is that if you and since the states are
doesn't happen all the time it means
that there always only one single
function you can do so if there is no
buyer and it's if there's no buyer then
the seller can abort the purchase or
anyone else can confirm the purchase if
there is a buyer already then the seller
can refund and the buyer can confirm
Rees and everything else is just a state
that is actived meaning that actually we
don't need to design the whole app we
can realize that the app is just a
button we don't need to do the whole app
with a buying and selling actually the
our whole design process is that it is
is realizing that the app is a single
button which is kind of cool because Don
tap Scott was talking about how how the
next Uber could actually be the car that
owns itself and it's doing like the
transactions and this is a very nice
example of a button that holds the money
itself so which I think I think it's
kind of cool and takes me to the second
point which is you shouldn't try to
design too try too to do too much when
you're trying to design a dep so of
course this is a great app we could
think about how the other the ways you
can build a Marketplace you can build
amazon.com you can can be on eBay
trustless eBay you can add search
functions but you don't need to do it
right now actually since it's a very
decentralized tool tool set if you just
build a single button and allow other
people to use your button that might be
a bus a viable business model because
you might like charge a few cents for
people to use your button and of course
they can deploy their own contracts if
you want but that's your job to to
convince them why they should you be
using your contract that they have to
pay which is interesting because you can
imagine a web where instead of you going
to Amazon and Amazon builds the whole
page maybe Amazon has a single card that
it's from another another developer and
it's a it we think less about big
portals and think about bunch of
components that can work together in the
new web now a third point which is a
more design oriented thing is just when
we are we are talking about depths we
want to be able to distribute them on
the on on a bit torrent like Network and
ipfs and swarm so fonts the fonts you
use should be open source that you can
distribute them those are some great
example of of Open Source fonts we use
Source s Source sense Pro for meth and
for most of our apps sometimes mon but
those other are great I kept Li bar
there because it's my favor favorite ENT
I love
ents and my fourth point is that use
grids that applies to everything that
the designer makes we use this little
grid here which is kind of weird if you
say if you take a look at it but it has
we use 32 pixel by
18.4 why do I use a height of 18.4 for
the simple reason that it allows me to
have hexagons on my grid which is nice
because it allows you to centralize
circles which is something that is
always cool with with with some designs
and also we use 32 32 pixels because
it's a divisor of 320 480 960 1,24 which
is and a bunch of other sizes which if
you which are great for mobile which are
great for multiple screens finally test
test test always test what whatever you
do so normally when I first started I
always used whoever is in the office as
the first the best test is just grab
someone who's not working your project
show something and ask him a dumb
question like okay what is this that you
are seeing and never never answer to him
just let him answer you but since I work
from home now which made that kind of
complicated I was forced to find other
other sites that would allow me to do
that which I found a great some great
like usability Hub I highly recommended
in Vision I high recommended so for for
example in our design process uh instead
of building a document saying what the
interface should look like we build an
Invision document that has all the
screens linked and I can show you I can
show the developers I can show some
users so they can all they have to do to
understand how interface Works they
click click click around and they they
will be able to to to to see to see how
the app is going to feel like this is a
great tool for for exploring everyone
and the next next thing I always use is
usability Hub which is a great way to do
quick design tests so this was the first
design of the ALF one Miner which is a
CPP tool for allowing a quick quick one
button mining which is a great tool but
it the first design was very kind of
nerdy and complicated and and I
suggested a new design where part of it
we removed the few buttons like the CPU
mining it doesn't make sense and we just
have one button that's called start
Mining and we've Dr rewards because
that's actually what people want and one
of in the process of convincing that
this design made sense because I think I
think it felt like it made it made sense
but sometimes you need some number so I
run it run it in a usability test which
is a way that you can have 20 people
like clicking your design around from
all over the Internet and I just ask
them look this is a this is some some
app that uses your CPU and gives you
money so I want you to turn the app on
and try to collect your winnings and you
can see that on the first app people
were like clicking around they had no
idea where what it was and they couldn't
get to the next point and on the second
version everyone was mostly clicking
just on those two buttons and we were
able to switch the overall rate of
people having success in the first try
on the first click from 30% only to 70%
only which I think it's a great it's a
great success and shows how how
important it is to to test it constantly
and sometimes you can test just logos
for example this is the first logo for
mist and of course you can see that's a
wave inside Diamond so I I think it's so
obvious I almost didn't test it but I
decided to test it anyway and that's how
the internet described it it's just like
a diamond with a shape with purple and
then I maybe there no not enough details
so I asked people to write substantives
I I I made a second version with more
details and then everyone just told me
okay so this is uh wave monting with
water ice I don't know I'm confused so I
decided to oh maybe I just should add
some some smug to it and then I okay
what is this now and then oh it's a
messy scary confusing cold blue sharp
and then then I could see that this was
not the right approach for the icon so I
decided maybe since maybe you can go to
Iceberg Iceberg there's this idea of the
Deep Web and maybe an iceberg is cool so
what is this and everyone say uh uh
nothing that's some app
thing so I kept trying I kept like
making other designs and I think this
one was was better and people start
think that there's an iceberg there is
like an iceberg with a magical M thing
and that's that was finally the the
latest iteration of the log I had
multiple iterations between them and
they they were like oh it's a magic
diamond mounting with an iceberg Cho
inside so which is which is more what I
was going for in the beginning and
finally the last point I want is keep
the user in control of his data that's
something we don't do on the current web
that we can totally do on the on on the
decentralized web and so just in my for
example we allow the user to I was as I
was telling in the beginning the user
can just tell the app who he is so the
user starts all apps anonymously and
then he can choose one account to review
himself and it's a great way that the
user you don't need to maybe you don't
need to have a login password
information on on your app you don't
need to keep allo that information on
and the app site maybe all you need to
do is ask for the browser for it to show
you some sort of of of proof of
ownership of a public public key and
your app will be simpler and it will be
a better experience for the user because
the app can he can keep his private data
on his own browser so I think those are
the six things I wanted to to tell about
how to design for for the new app
[Applause]
[Music]