Devcon4 web3 design decision framework

Web3 Design
Initial results of the research for the Web3 Design System
that teach how to make sense of Web3 user problems and how to solve them
Decision Making Framework
Web3 Design System is a project by Decentralized Design Lab / Beltran Berrocal & Aqeel Mohammad / http://bit.ly/web3DS / 2018.10

Community Driven Insights
WEB3 DESIGN SYSTEM
Aragon
Balance
Coinbase
Colony
ENS
Ethereum Foundation
eWasm
Gitcoin
Maker DAO
Metamask
MetaTX
MyCrypto
Status
Wallet Connect
0X Protocol
+ more
+

PROBLEMS
What is a
token?
Why can’t I send
a TX right after
the other?
How do I find
these projects on
the other
internet?
Gas price?
Gas limit?
Gas amount?
How do I know I can
trust this dApp?
Where’s my
data?
How do I get
Involved?
Why should I care about
decentralization?
Why do I need a
digital Identity?
Where’s my
money?
Why does gas
cost vary at
different times?
Can you reset my
private key?
How do I get my
money back?
What is a
Private Key?
Where should I store
my Private Key?
Why do I need
a plug-in?
Why do I have
to pay Gas?
What is a browser
plugin?
How do I
get ETH?
Why is this TX
taking so long?
Who is getting
the gas fees?
What is a
blockchain?
How does gas
work?
Privacy?
Pseudonymity?
WTF is commit
and reveal?
WEB3 DESIGN SYSTEM
What’s
MetaMask?

PROBLEM SPACE

PROBLEM SPACE
What is a
token?
Why can’t I send a TX
right after the other?
How do I find
these projects
on the other
internet?
Gas price?
Gas limit?
Gas amount?
Can I trust
this dApp?
Where’s my data?
How do I get
Involved?
Why should I
care about
decentralization?
Why do I need a
digital Identity?
Where’s my money?
Why does gas cost vary
at different times?
Can you reset my
private key?
How do I get my
money back?
What is
a Private Key?
Where should I store
my Private Key?
Why do I have
to pay Gas?
What is a
browser plugin?
How do
I get ETH?
Why is this TX
taking so long?
Who is getting
the gas fees?
What is
a blockchain?
How does
gas work?
Privacy?
Pseudonymity?
WTF is commit
and reveal?What’s
MetaMask?
How am I supposed to
remember these long
decimals?

SOLUTION SPACE

Gas
WEB3 DESIGN SYSTEM Questions
Why do I have to pay gas?
Why does gas have
varying costs at
different times?
What is gas? Gas
price? Gas limit?
Who receives these fees?
The EF? The dApp?
GAS

SOLUTION SPACE
● hide or abstract away complicated technical problems
● optional degrees of centralization

SOLUTION SPACE
● Use analogies with mechanisms users already knows

SOLUTION SPACE
● Use analogies with mechanisms users already knows
● Start with the why
● Explain the benefits of a feature, not how it works

Problem Space
Gas
WEB3 DESIGN SYSTEM
● Novel experience.
● Concepts and terminology around Gas are counter intuitive
● Variations in Gas prices for identical actions is not conducive
to mass adoption use cases
Emerging Patterns
● Abstract gas interactions for new users
(Universal Logins, Relayers, Meta-tx, etc)
● Give modular options for advanced users
(MyCrypto, Metamask, etc)
● Gas Stations - Need ways to standardize gas across the ecosystem

Key
Management
WEB3 DESIGN SYSTEM
Can you reset my password?
What is a seed phrase,
password, mnemonic?
KEY MANAGEMENT
Questions
Best way of backing up
the private key?

Problem Space
Key
Management
WEB3 DESIGN SYSTEM
● Disrupts the on-boarding flow
● People do not backup or know where or how to backup keys
● Confusion between password and private key
● Lack of recoverability
Emerging Patterns
● Progressive tiered security models
● Disposable keys that the user’s do not have to backup
● Multi-device private keys on local wallets

Transactions
WEB3 DESIGN SYSTEM
Why is this TX taking so long?
Where is my money?
TRANSACTIONS
Questions
WTF is a NONCE?

Problem Space
Transactions
WEB3 DESIGN SYSTEM
● Do not understand the relationship between TX, Wallets,
Blockchain, and etherscan
● Make mistakes of sending the same TX multiple times
● Confused by “signing” a transaction, it’s a new interaction
pattern
Emerging Patterns
● Give human-readability and transparency to TX’s
(Natspec / Radpec)
● In-App history of TX’s with appropriate context
(TX State indicator)
● Transaction queue managers for multiple-TX’s

WEB3 DESIGN SYSTEM
Other insights
• Everybody says that the Mobile version will be fundamental
for mass adoption ... but they are developing for the Desktop
• Exception: Complex interactions and those with inherent risk
(like staking, security tokens) are best suited for the Desktop
• Designers need to be involved in the development process
since the beginning, from the creation of the smart contracts
Designer <> Developer Workflow
Mobile vs Desktop

JOIN THE CONVERSATION
http://bit.ly/web3DS
WEB3 DESIGN SYSTEM
http://discuss.conflux.network/t/web3-design-systems-components-and-guidelines-for-better-dapp-ux

Devcon4 web3 design decision framework

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Devcon4 web3 design decision framework

Similar to Devcon4 web3 design decision framework (20)

Recently uploaded

Recently uploaded (20)

Devcon4 web3 design decision framework