UI/UX challenges of Web3 and Dapps

With the next generation of the web (Web3) we observe a progressive transition of traditional centralized web apps to decentralized apps (Dapps). They can natively interact with blockchain technologies and unlock endless new ideas and innovation. Interacting with Dapps today can often lead to uncertain and frightening actions which lead to frustration and skepticism. We’ll deep-dive into Web3 and Dapps fundamentals and how we got there, clear up confusions and explore how we can improve user experiences to help bringing Dapps closer to people.

Transcript

1. Glenn Reyes @glnnrys
   UI/UX challenges of
   

   Web3 and Dapps
   Workshop
   

   View Slide

2. Glenn Reyes
   @glnnrys
   

   

   🇵🇭 living in 🇦🇹
   
   
   Independent Software Engineer
   
   
   

   Gotten into Web3 through
   @enzyme
   fi
   nance
   
   
   🤍 React, GraphQL, Design Systems
   

   🚴 Sports & 🎸 Music
   

   View Slide

3. Agenda
   1.Intro to Web3 & Ethereum Virtual Machine (EVM)
   
   
   Blockchain, Dapps & Ethereum
   

   2.Intro to Wallets & Native Payments (Transactions)
   
   
   Intro & Setup MetaMask
   
   
   Public & Private Keys
   

   3.Interacting with public Dapps
   
   
   Opensea, Uniswap, ParaSwap, Lenster, Enzyme, etc.
   

   4.Understanding the tech stack behind Dapps
   

   5.Identifying UI/UX challenges
   

   6.What can we do today?
   

   View Slide

4. Questions?
   

   View Slide

5. What is a blockchain?
   

   View Slide

6. View Slide

7. What is Ethereum?
   

   View Slide

8. Ethereum is the community-run technology
   powering the cryptocurrency ether (ETH) and
   thousands of decentralized applications.
   

   View Slide

9. What are Smart Contracts?
   

   View Slide

10. A "smart contract" is simply a program
    that runs on the Ethereum blockchain.
    

    View Slide

11. Read — Query a node on the network
    
    
    Write — Send a transaction
    

    View Slide

12. What is Web3?
    

    View Slide

13. New iteration of the
    

    World Wide Web
    

    View Slide

14. Web3 Architecture
    

    View Slide

15. View Slide

16. Dapp
    

    View Slide

17. Decentralized App
    

    View Slide

18. Questions?
    

    View Slide

19. Wallets & Transactions
    

    View Slide

20. View Slide

21. Interacting with public Dapps
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. Understanding the tech stack
    of Dapps
    

    View Slide

28. Ethereum
    Data
    Solidity
    Logic
    Hardhat
    EVM Smart Contracts Ethereum Development Environment
    Ethereum Tooling
    MetaMask
    Wallet
    Identity
    

    View Slide

29. Ethereum
    Data
    Solidity
    Logic
    Hardhat
    EVM Smart Contracts Ethereum Development Environment
    Ethereum Tooling
    MetaMask
    Wallet
    Identity
    Vite
    React Development Environment
    Frontend Tooling
    React
    User Interfaces
    Frontend
    BACKEND
    FRONTEND
    

    View Slide

30. github.com/glennreyes/react-dapp
    

    View Slide

31. Why nobody uses really Web3 yet
    Identifying UI/UX challenges
    

    View Slide

32. The entire process is hard to understand
    Wallets, Setup & Transactions
    

    View Slide

33. View Slide

34. Transactions aren’t instant … yet
    

    View Slide

35. etherscan.io
    

    View Slide

36. View Slide

37. View Slide

38. What can we do today?
    

    View Slide

39. Work to improve UI/UX of transactions
    • Sharding
    
    
    • Divide network into smaller independent networks
    
    
    • Allows to process transactions in parallel
    
    
    • Layer 2 Solutions
    
    
    • O
    ff
    -chain or side chains - less congestion & better transpaction speed
    
    
    • ✅ Upgrading to Ethereum 2.0 — “The Merge”
    
    
    • September 15, 2022
    
    
    • Proof of Work 👉 Proof of Stake
    
    
    • Less energy consumption by ~99.95%
    
    
    • Improving network infrastructure
    
    
    • Improve Ethereum network infrastructure
    
    
    • Increase number of nodes
    
    
    • Improve connectivity between nodes
    

    View Slide

40. https://tinyurl.com/better-web3
    Ideas on what we can do
    today
    

    View Slide

41. https://tinyurl.com/better-web3
    -
    feedback
    Please help me improve
    

    this workshop 🙏
    

    View Slide