[Music]
swanik we're going to be jumping into
bootstrapping your dapex but first I
want to ask two
questions who here has struggled to make
a complex crypto app feel simple to new
users and who feels that resource
constraints on their team have made it
difficult to create an ideal user
experience if you face these challenges
you're not alone together we'll be
discussing how we can Implement best
practices to help you overcome these
challenges and bring the next billion on
chain now before we dive into Solutions
allow me to introduce myself you might
know me as the crypto bride about three
and a half years ago I exchanged nft
wedding rings with my now husband on
ethereum mainnet uh we used of course we
overpaid in gas this was before any
layer twos existed but you know what
they say love is
priceless and about me professionally
I've been designing and leading teams
for the past 15
years most recently I led the design of
coinbase Commerce where I help
businesses use crypto payments
now as a defi design consultant I help
businesses that are tackling the same
challenges that you're facing so with
that let's dive in to how we can bring
those next billion on
chain to guide us I want to introduce
you to a framework that I
developed through analyzing dozens of
popular defi apps I call it the DAP
funnel it outlines the key stages people
go through when interacting with
decentralized applications
from their first interaction to
transacting and
Beyond the stages are connect configure
transact and
track each stage represents an
opportunity to either engage people or
lose them let's begin with the first
stage
connect this is all about connecting
with a
wallet as I was doing my research I
discovered that where to start is often
unclear best practice number one make
connect
obvious let me start with what not to do
don't don't mislead with interactive
zero state so here's an example on B you
can see that I can enter an amount to
deposit but the button is disabled and I
don't know what to
do another common mistake is is what we
see here on pancake swap where somebody
comes in wanting to do an action such as
swap but the call to action button says
connect wallet so any kind of benefit to
surfacing this interactivity is negated
by this
disconnect what's better is how Zora and
Lio and a few others are proactively
surfacing the login
screen best practice number two
streamline
options is anyone here designing cross
chain
DBS awesome here's another example of
what not to do don't combine Network
selection with wallet selection it's
just too much information it could be
handled in multiple
steps save time by implementing a
ready-made wallet plugin there's so many
options out there that will simplify
your
onboarding another great option is to
combine the disclosures with your wallet
connect
screen um people who are familiar with
web 2 will likely click on the upper
right corner and they're logged in
account don't do what curve does and a
few others that instantly log out it's
quite jarring disorienting and instead
um offer an interstitial menu this is an
example from arbitrum bridge where
people can access their settings and
other options
rounding out this topic of connect
consider using a pass key this is a
really awesome Innovation that we're
seeing more people adopt um and I hope
to see further
streamline techniques as we move
forward all right moving forward to
configure this step is all about setting
up the transaction it's about selecting
the asset entering an amount and
choosing a network and sometimes
configuring more advanced
options and here the two themes are too
many choices being overwhelming and
using technical jargon can can
intimidate
users let's start with
personalization Pop Quiz do you notice a
difference between the logged out stage
and the logged in
stage if you answered no you are
correct uh this is a missed opportunity
on fortunately on boring Dow's part
where uh it's not suggesting a token or
a
network instead do what unisoft does
here where it's suggesting tokens in my
wallet and even suggesting prior
searches from previous sessions so it
really feels like they know
me another thoughtful approach is
personalizing by Persona so look at here
how blur has two different user types
there's the trader who wants a more
information dense View and The Collector
who wants a more curated
experience similarly similarly on bridge
there's an expert mode um and this is
great great if you feel like you might
be alienating some of your power users
by simplifying too much this way they
can easily access those more advanced
features starting with good defaults
should minim the cognitive load but what
happens when people encounter errors we
need to enable better recovery and
hopefully prevent them let me start with
a great example of error prevention here
on Hop it's suggesting a minimum amount
for me to send so I don't get an insuff
insufficient funds
error be sure to check your error
messages this is a a really great
example of how somebody may have
forgotten to translate this into
something that makes sense explaining
what happened and what the user needs to
do to fix
it and double check that what you're
saying to fix it actually
works instead deep link into the wallet
to overcome that issue recover here as
igen layer does by switching to a
supported Network in this
case I recommend Progressive disclosure
also to simplify the the
interface here on llama swap the
slippage options are visible at all
times which it makes the interface too
cluttered and it can increase the drop
off
right here's another example on beefy
where it's showing the increments from
0o to 100 probably not a widely used
feature and it makes it look a little
messy instead check out how Thor swap
buries those options underneath the m
Max
button so for the items that are visible
in your interface I recommend showing
some education providing more context to
increase confidence in the
transaction so let's avoid using jargon
here's an example from rocket pool where
it's using a term that probably everyone
in this room knows main net but it
doesn't map to an option within most
wallets so instead use straightforward
language
tool tips are a great option to explain
in
detail everything that a transaction it
uh
has I also recommend including a
confirmation screen that gives the user
an opportunity to review all of the
details before moving
forward assuming all the details in that
transaction look good we're ready to
transact this is the core of all
applications um it's where people
authorize access to their funds and
transfer it's critical that people feel
safe
here unfortunately lengthy approvals can
scare and
confuse the best antidote antidote to
that is to convey
progress okay who's used a in this room
probably everyone right it's like one of
the oldest most popular d out there but
unfortunately it uses buttons in a very
non-standard way this is not the best
component for showing a multi-step
transaction you see how they appear and
disappear without any kind of
confirmation what's a better pattern is
what Unis swap does a stepper right it
shows what are the actions that are
required what are the status pending and
confirmed
I also recommend showing in context
feedback through toast messages as
Aerodrome does
here don't misrepresent status so here's
an example from Lio which is
optimistically
presenting modals saying you are
unlocking you are wrapping uh but it's
before I've even had an opportunity to
confirm in my wallet so it's not really
accurate and it reduces my trust in
their
system instead
uh do as as moonwell does which
encourages once I've reached the pending
status to continue using the
application okay this one's a little
controversial but rounding out the
transact phase um let's not do infinite
approvals you see this long scary Red
text uh this you know with the current
constraints we're in right now um May
maybe a lot of this will be solved with
smart wallets uh but until then let's
use exact amounts so that it maps to
what the user entered into the system
and it's also more
secure now the final stage track this is
all about monitoring the status so
people know what happened and what they
can do
next here we observe limited access to
historical and ongoing performance
here are the three stages of the
tracking life cycle in most STS There's
real time ongoing historical let me
break it
down for real time we covered that in
the previous section transact and this
is all about in the moment when you're
investing you receive that feedback
right but on going is missing right we
we want to understand the day-to-day
performance of Investments including
return returns and the yield uh the
patterns we see here are dashboards
notifications um this helps people make
investment decisions what to do
next and then the history we're this is
all about
recordkeeping um of the past
transactions account statements and this
enables
accounting it's critical that we support
each step of this journey in our
debth so how do we support ongoing
performance
tracking let's provide apy history uh
this is an example from a it's very rare
I did not see many of these in my audit
please share examples if you have them
um you know anecdotally a friend of mine
takes screenshots of the apps where he's
invested uh to see whether or not his
apy has gone down which is not ideal
let's also summarize the portfolio
insights this is from Aerodrome a
dashboard that shows kind of the return
and the emissions and other things that
I
earned this is definitely not the best
but I I challenge you to provide better
examples um I want to leave rounding out
this ongoing performance topic I feel
like a missed opportunity here is push
notifications for crypto I think there
are a few Solutions out there but it's
very much lacking um here's an example
from a trafi account I received a an
email notifying me that the yield went
down on one of my accounts um you know
how do we know if we're about to get
wrecked that's that's kind of a core use
case for a
notification um and I I i' welcome some
solutions
there finally raise your hand if you've
ever tried doing taxes on your crypto
it's a nightmare
right uh so on uniswap you could see
that there's transaction history but
this is not a common feature in most
apps and here on dbank you can see an
example of aggregating statuses but
again this is this is a third party it's
a little lagging and it the source of
Truth should be on your dap
itself all right so we covered all of
that woo so here's the big takeaway here
I hope that you can Implement some of
these best practices in your dab today
to enable better adoption and
retention well I'll let people finish
taking their pictures um U please share
your feedback on on X but first I want
to leave you with one final idea what
could we build together if we're
not building in Sil
I propose that we align on web 3 design
standards imagine a world where every
dap developer had access to
plug-and-play components that were fully
user tested responsive open
source right it would enable greater
efficiency you could focus on your core
project area it's a proven model we've
seen this with Android and iOS and also
the very popular bootstrap
framework and finally it's ecosystem
strengthening it would help on board the
next billion because they would become
familiar with the patterns across every
single deck rather than learning bespoke
implementation there are a number of
tools that exist today um you know
they're pros and
cons of the wallet Integrations and sdks
out there you know some of them are
promoting certain wallets or chains um
but I think we need a neutral
community-driven
solution so I'm looking for people to
build this together with me front-end
developers designers researchers please
reach out if you'd like to be a part of
this thank you so much
kapuna great
talk amazing Rebecca okay let's uh ask
some questions uh if you guys have a
question uh you have to you you have to
use the code to post it on the app and I
will read it out okay let's start with
the most voted question so first one is
about using tool tips on mobile what is
this alternative because it's hard to
use to tips on mobile it's a good
question um I've seen different patterns
Implement like a mobile version which
would be like a
modal uh or like a bottom sheet I guess
if it's a native
app okay uh do you think wallet
popups so are this is fair you know
actually I uh what was the stat only
like 10% of the most popular daps
actually do have uh a mobile optimized
experience so definitely it's an
opportunity for us to build more
responsive
libraries um I think you know they
different use cases right there's some
serious traders who prefer desktop um
you know and so my audits were desktop
components but clearly there's uh
definitely a lot of Need For Mobile as
well so sorry this the wallet popups for
approval or but um so the next question
is don't you need product Market fit
before you can consider
uxix oh that is a great question I I
definitely uh agree on that and there's
there there was a really great talk um
yesterday about how to quickly validate
ideas by just really mocking up two
parts of the flow the point of Discovery
and then the point of value
um and then you can decide whether or
not to build the middle of the product
experience so it could save you
potentially a lot of
effort okay the next question is should
user know uh they are using
crypto yeah there um so many great
topics about this uh or talks about this
at this conference specifically uh I
think longer term as we're looking at
onboarding the next billion it's not
necessarily what I shared today it's it
is abstracting it and making it so
simple probably likely
behind um you know a very simple
interface okay um next question is about
using tables on mobile how do you
approach
that there are various options I
guess uh you could either stack I don't
know there I'm not sure if I'm the best
person to share this right now but yeah
they're they're different patterns that
you could look up okay uh when you think
uh when do you think chain obstruction
will be the new normal in
D
chain I wonder if it's a h what's the
hindrance I'm not quite quite sure about
that I guess is
this who wrote just want to somebody
what is hindrance oh yeah like what is
the hindrance
of what is preventing people from
distracting is somebody who asked this
question here
maybe oh okay so this is kind of like
the other question around it
being like all of the uh complexity
being hidden
okay yeah I'm with you I think it
there's that is the future and I think
we'll see a lot of advancements when
Petra is upgraded in q1 so let's stay
tuned I think what I shared today was
focused on the technology that's
available right now what can build today
but that's definitely soon and then
later I think is the standards where we
kind of as a community agree on the best
practices and how to implement common
patterns okay uh next question is should
we be moving towards um embedded wallets
uh inside apps that are less portable or
continue to push in portable horizontal
wallets uh which are not perfectly
suited for each app which are not what
perfectly suitable for each app yeah
like metamask versus um you know the
wallets that you get inside of your
application yeah I I watched one of the
talks about this and I guess like right
now it seems
like there you know wall some wallets
like privy and others that will create
per uh dep but the vision I think is to
consolidate across
okay the focus of this was dap ux not
wallet so okay I think that's uh it for
the time for the Q&A uh thank you very
much Rebecca thank you everybody who
asked questions and uh next uh talk is
in five minutes see you okay