The Design of Blockchain-Based Apps (DApps)

http://www.meetup.com/blockchain-product-design-development/
The Design of Blockchain-Based Apps
Product, Design and Development
January 16, 2019
#blockchainonramp

Blockchain Product Design and Development
What do users care about?
2
Solving their problems right now
with as little thought and cost as
possible.
...not blockchain.

Why this is important: the bigger picture
3
The innovators understand the jargon.
They download the tools. They’ll go
through some hell to make things work.
Early adopters will not.
Design thinking and design execution are
critical to bridge the gap.

Why this is important: the human picture
4
“Blockchain affects the most intimate parts
of people’s lives -- like money, identity and
health.”
-- Sarah Baker Mills, Consensys

Let’s define our design scope
5
User-Facing Design: The design of the experiences
and interfaces for users of our apps and platforms.
Technical Design: The design of the technical systems
which underlie these applications.
Both talk about “design patterns”, which are generalized
and reusable solutions to common problems.
Today’s scope

They are not entirely independent!
6
The principles of User-Facing Design
should drive the technical requirements we
target with our systems.
The available paths provided by the
technical design will influence our
user-facing toolkit (in crypto especially).
Both rely on -- and benefit from -- the
Design Process.

Step 1: The platform’s customers are developers.
Step 2: The developer’s customers are end-users.
To be effective, platforms have to win them both.
Platforms have 2-step product/market fit
7

Designing for end-users is sexy
8

Designing for developers is hard
9

Today we’ll stick with the sexy stuff
10
We’ll focus on End-User Design and User
Experience. Specifically, for the end-users
of apps built on blockchains.
We’ll skip the discussion of Developer
Experience (DevX) but remember that
developers are potentially your users too!
...and we will have to get a *bit* technical.

User Experience (UX)
“The overall experience of a person using a
product such as a website or computer application,
especially in terms of how easy or pleasing it is to
use.”
11

User Interface (UI) != User Experience (UX)
12
Unattractive
but highly
effective.*
Beautiful,
Iconic… and
impossible to
pour.
*Until it all squirts out on you

Usability != User Experience (UX)
13
Usability is achieving a goal
with the maximum:
1. Effectiveness
2. Efficiency
3. Satisfaction
UX encompasses the ENTIRE
experience a user has while
interacting with a product or
service.
Was it delightful?
Will the user return?
Science Art

UX is a journey
UX covers the user’s
experience during their
entire journey from the very
first interaction with a
product to their last.
Along the way, they pass
through lots of interfaces.
14

I stand on the shoulders of giants
16
1. Alejandro Machado
2. Alex van de Sande (Ethereum
Foundation)
3. Sarah Baker Mills (Consensys)
4. Beltran Berrocal
5. Sarah Gregory (Coinbase)

But we’re all still figuring it out
17

About Me
I’m Erik Trautman and I run operations at NEAR Protocol, a
scalable, developer-friendly blockchain on a mission to bring the
technology to a billion devices around the world.
I also care deeply about creating great products, educating people
and building rich ecosystems.
My background is in markets, open-source software development,
startup leadership and education. And general nerdery.
Learn more about NEAR at http://www.nearprotocol.com
18

Roadmap
19
1. The Space We Operate Within
2. General Principles of Design
3. Designing on Blockchain
4. Designing for Trust
5. Conclusion

Roadmap
20
5. Conclusion

What is a “regular” app?
21
Today’s web and mobile apps are generally controlled
by single companies and accessed via a “normal” web
browser or mobile app.
1. The front end (what you see) of the app is served
from a server (probably cloud-hosted).
2. Requests from front end are run on that server.
3. The data from that server and all your interactions
with it flow to the company’s database.
Browser
Server
Database

What is a “decentralized” app?
22
A decentralized app runs almost completely
independently on the blockchain, accessed
via a special browser or extension for yours.
1. The application still needs the front-end
from somewhere (eg cloud)
2. The front end talks to the Smart
Contract using its API (via wallet).
3. The Smart Contract runs code and
stores data on the blockchain network.
Browser
Hosting
Blockchain
Network
Smart
Contract

Centralized
+ Facebook
+ Google
+ Uber
+ Amazon
+ Etc...
Decentralization is a spectrum
...and most “decentralized” apps aren’t fully decentralized anyway [Infura!]
23
Decentralized
+ Augur
+ CryptoKitties
+ FOMO
+ Dexes
+ Etc...

1. Users own their data: It’s not in *our* database.
2. We have to ask permission: Any time we
perform an action on behalf of a user (eg money
transfer), we have to ask them for permission.
3. Actions have costs: We (or users) have to pay
for every action that uses compute.
4. New interaction types: Staking, voting
Key additions in blockchain-based apps
24

...But it’s still design.
25

Blockchain-based apps have new walls
26

Wall 1: Knowledge
Problem 1: Too much education
about blockchain.
Problem 2: Too little education
about blockchain.
It’s a tricky middle ground.
27

Wall 2: Wallets
Usually*
required to get
started with any
blockchain-
based app.
*: Not always
28

Wall 3: Acquiring tokens
29

Wall 4: Managing keys
30
Stored where?
If lost?
Wait, keys?
#findmyphone
How many?

Wall 5: Permissions and Transactions
31

Wall 6: Gas and Speed
32
!?!?

Wall 7: Waiting
33

Ok, let’s get over this.
34https://en.wikibooks.org/wiki/Castles_of_England/Methods_of_Attack

Roadmap
35
5. Conclusion

1. Design Thinking: The state of mind of
approaching problems deliberately*
2. Design Process: The process used to move from
the problem through the solutions.
3. Design Toolkit: Tactics, patterns and best
practices for implementation.
*: Often lumped in with Design Process.
Design has multiple levels
36

1. Don’t slack on your personas: If you don’t know
who you’re building for, you’re toast.
2. Low fidelity, high testing: Don’t forget to iterate
rapidly with real users!
Process matters… and it’s all about #users
37
https://boagworld.com/usability/personas/

Process matters… and it’s all about #users
38
Credit: Sarah Gregory

● The Noob
● The Hardcore
Cypherpunk
● The Technologist
● …
Design for the noob,
create swim lanes.
Who are our users? Well, we do know...
39Credit: Alex van de Sande

General design principles
40
1. Follow expectations
2. Minimize cognitive load
3. Be consistent
4. Don’t let me make mistakes
5. Be unobtrusive
https://blog.fluidui.com/dieter-rams-10-design-principles/

Affordances
41
An Affordance in human-computer interaction is
generally considered to be those “action
possibilities” that are readily perceivable by a user.
Extensions:
1. Make sure there is an obvious choice with
intuitive results… and ideally it is the only one.
2. Don’t explain to people what they shouldn’t
do… don’t let them do it in the first place.
We need protection :/

Users should always feel fully in control of their own
experience, which means providing them a map
and compass, and know what you expect of them.
In Action:
1. Show progress in context of the steps required
2. Show navigation back, forward and out
3. Clearly signal what the “right” choice is
Control and Guidance
42

Users will always seek to minimize their cognitive
load, whether it’s ignoring your careful copy or
failing to understand the simplest new ideas.
In Action:
1. Provide users with options to dig deeper or
customize but ultimately make choices where
necessary for them to reduce thinking.
2. If you must provide choices, reduce them.
3. If you must create steps, reduce them.
Don’t make me think
43

Roadmap
44
5. Conclusion

The user walls
45
1. Knowledge
2. Wallets
3. Acquiring Crypto
4. Managing Keys
5. Asking for Permissions
6. Gas and Speed
7. Waiting

1. Educate Slowly: Reduce education along critical
path and tease it out slowly over time.
2. Educate Unobtrusively: Use small contextual
snippets where possible over long explanations.
3. Educate Optionally: Use “info” popups and
tooltips to allow users to opt into more education.
4. Educate Plainly: Avoid using lingo. Speak the
user’s language for things.
Wall 1: Educational Content
46

1. Allow Multiple: If you hard-code a
single wallet type, you severely limit
user choice.
2. Priming (Part I): Let the user know
to expect a wallet popup and why.
3. Wait: Save for the last minute only.
Metamascara? Roll your own?
4. Limitations: You generally won’t be
able to send wallets meta
information for security reasons.
Wall 2: Wallets
47https://www.useronboard.com/how-sling
shot-onboards-new-users/?slide=61

1. Allow Multiple: Can you allow multiple
currencies to be used?
2. Prime Expectations: You’re giving up
their UX to a partner… preflight their
confirmation or acknowledgement.
3. Wait/Hide: Can your app foot the bill?
Charge in other ways? Security…
Services like Wyre are getting into the fray.
Wall 3: Acquiring crypto
48

Tradeoff between Design and Security.
1. Use Analogies: What is a key? A wallet?
2. Prevent Stupidity: Don’t ever ask for private
keys. Don’t train stupidity.
3. Encourage Multiple: Encourage the creation
of new keys for each app for privacy.
4. Show Consequences: If this NFT is in your
wallet, what does that mean?
Good thing you’re not designing a key system, eh?
Wall 4: Key management
49
https://medium.com/ideo-colab/whats-in-a-wallet-e0ba6348d6f1

1. Prime the User: Let them
know what’s about to
happen and, ideally, get
their affirmative consent
beforehand.
2. Keep Stakes Low: Ask
for the minimum possible
permissions
Wall 5: Permissions and Transactions
50https://blog.hellobloom.io/how-to-make-a-user-friendly-ethereu
m-dapp-5a7e5ea6df22

1. Hide Gas: Do you really
need them to choose their
gas? Can you hide it?
2. Be Opinionated: Show
the expected path.
Assume success but
bracket failure.
Wall 6: Gas and Speed
51

We expect immediacy.
1. Don’t Block the UI!
2. Show Status: Where in
the process are we?
3. Set Expectations
4. Show Liveness
5. Offer Delay: Collect their
email and push to them
when you’re ready.
Wall 7: Waiting
52

Roadmap
53
5. Conclusion

Why this is important: the human picture
54
“Blockchain affects the most intimate parts
of people’s lives -- like money, identity and
health.”
-- Sarah Baker Mills, Consensys

We Are Protectors: Our design
decisions impact how they trust and act
and we have responsibility.
When will they make a bad decision?
Acknowledge that security fails in the
interfaces between apps and when
human behavior makes mistakes.
Designing for trust
55
https://medium.com/design-for-crypto/%
C3%B0app-user-experience-audit-afc11e
4384c3

A few principles from Beltran:
1. Permanency: Clarify when actions
are irreversible
2. Value: Clarify whenever value will
be exchanged or moved
3. Privacy: Note when you’re about to
have correlation risk
...But you still have to make decisions.
Principles of transparency
56

Roadmap
57
5. Conclusion

Sometimes we forget to think macro.
1. Process: The right user-first,
research-driven process is gold.
2. Test: Test, test, test everything!
3. Interoperate: Can you work with
other dapps, contracts, chains or
identity solutions?
4. Rethink tokens: Do you need it? Is
crypto the right solution even?
Zooming out: The best gains can be meta or macro
58

Get out of your user’s way. Rethink
what’s actually necessary.
1. Delay onboarding: Do you need
them to sign up right away?
2. Allow presend: Can you send
someone value before forcing them
to sign up?
3. Foot the bill: Can you monetize in
other ways, removing initial user
permissions?
Reduce steps and remove pain
59
https://medium.com/design-for-crypto/%C3%B0ap
p-user-experience-audit-afc11e4384c3

1. Come to next week’s workshop.
2. Do bounties on
https://explorer.bounties.network/exp
lorer
What can you do? Participate!
60

1. Actually build a DApp yourself.
2. Check out design systems on
https://www.invisionapp.com/inside-design/desig
n-systems/
3. Do more design challenges on https://gitcoin.co
What can you do? Participate!
61

People
1. Alejandro Machado
2. Alex van de Sande (Ethereum Foundation)
3. Sarah Baker Mills (Consensys)
4. Beltran Berrocal
5. Sarah Gregory (Coinbase)
Organizations
Consensys (https://consensys.design), IDEO Colab, Coinbase
What can you do? Follow...
62

Thank you!
63

Let’s chat.
64

Blockchain Primitives
65
#1: Identity
#2: Transactions
#3: Cryptography
● Identity verification
● Universal login
● Wealth ownership
● Item ownership (or access to services)
● Accounts (for users, corps, things)
● IRL identity tracking ● Direct / P2P
● Micro $
● Instant
● Conditional (escrow)
● Verify activity (checkpointing)
● Verify process integrity
● Privacy

More about the wallet
66
A user’s “Wallet” contains the cryptographic key
which allows them to sign (verify permission for)
transactions for a particular account (or accounts).
The wallet typically then propagates that
transaction to the blockchain network (usually by
either running its own node or using a trusted node.
...So every time we have a transaction that needs
permission, it must go through a wallet.
Wallet
Smart
Contract

Wallets unlock accounts not just money
67
Remember -- accounts contain ANYTHING.
The wallet could contain token balances but
also crypto collectibles, identity data or
anything else that’s linked to your account ID.
Any time we want to get something unique
from the user, we need their permission to
access that data from the blockchain on their
behalf.

The Design of Blockchain-Based Apps (DApps)

More Related Content

What's hot (20)

Similar to The Design of Blockchain-Based Apps (DApps) (20)

Recently uploaded (20)

The Design of Blockchain-Based Apps (DApps)