Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing for web 3

Donna Spencer
September 29, 2022

Designing for web 3

As more companies look at opportunities to use web3 to achieve business goals, designers will increasingly need to understand how to design for it. Of course, web3 isn’t just one thing – you might need to design for the metaverse, finance applications, NFT projects and more. Will your existing design skills stretch to this new domain or will you need to work in a different way? In this session we’ll look at the similarities and differences between web2 and web3, discuss what you might need to learn, what challenges you might face and what you might need to do differently.

Donna Spencer

September 29, 2022
Tweet

More Decks by Donna Spencer

Other Decks in Design

Transcript

  1. Designing for
    Web 3
    Donna Spencer, YOW! Perth, Sep 2022

    View full-size slide

  2. About me
    Principal Product Designer at MakerX
    20+ years of design experience
    Author of 5 UX books
    @maadonna
    Linkedin: Donna Spencer
    At MakerX we design and build products for
    ventures and startups.

    View full-size slide

  3. How we’ll do this
    About
    web 3
    Designing in
    transition
    UX
    fundamentals
    Web 3 now Web 3 design

    View full-size slide

  4. About web 3
    A cluster of technologies and ideas
    Decentralisation (and individual ownership)
    Blockchain
    Crypto currencies
    Decentralised finance (DeFi)
    Assets as tokens, including non fungible tokens (NFTs)
    Metaverse
    Decentralised autonomous organisations (DAOs)

    View full-size slide

  5. Designing in transition

    View full-size slide

  6. Mainframe Menus and
    forms
    Keyboard

    View full-size slide

  7. Mainframe Menus and
    forms
    Keyboard
    Software GUI Point and click Usability

    View full-size slide

  8. Mainframe Menus and
    forms
    Keyboard
    Software GUI Point and click Usability
    Accessibility
    Web 1
    Static web
    pages
    Navigation IA
    Centralised
    content

    View full-size slide

  9. Mainframe Menus and
    forms
    Web 2 User-generated
    content
    Rich internet
    apps
    Templated
    layouts
    UX
    Keyboard
    Software GUI Point and click Usability
    Accessibility
    Web 1
    Static web
    pages
    Navigation IA
    Centralised
    content

    View full-size slide

  10. Mainframe Menus and
    forms
    Web 2 User-generated
    content
    Rich internet
    apps
    Templated
    layouts
    UX
    Keyboard
    Mobile Mobile
    navigation
    Card-based
    layouts
    UI
    Gestures
    Software GUI Point and click Usability
    Accessibility
    Web 1
    Static web
    pages
    Navigation IA
    Centralised
    content

    View full-size slide

  11. Mainframe Menus and
    forms
    Web 2 User-generated
    content
    Rich internet
    apps
    Templated
    layouts
    UX
    Keyboard
    Mobile Mobile
    navigation
    Card-based
    layouts
    UI
    Gestures
    Software GUI Point and click Usability
    Accessibility
    Web 1
    Static web
    pages
    Navigation IA
    Centralised
    content
    Web3?

    View full-size slide

  12. Patterns form over time

    View full-size slide

  13. Working from first principles

    View full-size slide

  14. Understand the tech
    New technologies bring new opportunities and
    constraints
    And new mental models

    View full-size slide

  15. Fundamental UX concepts

    View full-size slide

  16. Understand your users
    Your actual individual users, not groups of types of people
    Can’t transfer previous research
    I can’t give detailed design advice, as I don’t know your users

    View full-size slide

  17. How people learn

    View full-size slide

  18. Understand mental models

    View full-size slide

  19. Innovators, early adopters, later adopters
    Attribution: CC BY 2.5, https://commons.wikimedia.org/w/index.php?curid=113543416

    View full-size slide

  20. It is hard to understand
    The concepts are quite different (I think so at least)
    Everyone talks jargon
    Hard to figure out what the use cases are
    Lots of hype
    Talked about as if it’s one thing
    My favourite series - search “freakonomics podcast crypto”

    View full-size slide

  21. User research
    Users for research may be hard to find (which is a warning bell for a product)
    Go to where the users are

    View full-size slide

  22. Negative press

    View full-size slide

  23. People have lost a lot of money

    View full-size slide

  24. Current user experience is awful
    Poor usability
    Complex processes
    Confusing processes
    …and nowhere to turn when things go wrong

    View full-size slide

  25. Poor usability - can I have a filter please

    View full-size slide

  26. Poor usability - can I have a filter please

    View full-size slide

  27. Poor usability - what happens next?

    View full-size slide

  28. Complex processes: 28 steps to get an account to buy crypto

    View full-size slide

  29. 5 steps to set up a wallet, 8 to add it to the browser

    View full-size slide

  30. And another 10 to move coin to my wallet

    View full-size slide

  31. Not to mention writing down the 12-25 word recovery phrase

    View full-size slide

  32. Checking out and paying…

    View full-size slide

  33. Checking out and paying…

    View full-size slide

  34. Checking out and paying…

    View full-size slide

  35. Loads of scams

    View full-size slide

  36. Loads of scams

    View full-size slide

  37. Decentralised means there is no help
    Where do you go when something happens?
    Nowhere…

    View full-size slide

  38. Web 3 design

    View full-size slide

  39. Mental model: Transferring funds
    My bank
    Friend’s
    bank
    Me Friend
    Me Friend
    My wallet Friend’s
    wallet
    Z2DE4…
    RT4PM…

    View full-size slide

  40. Mental model: Buying a digital product
    Me Shop
    Me Shop

    View full-size slide

  41. Mental model: Banks

    View full-size slide

  42. Mental model: Proving ID digitally

    View full-size slide

  43. Mental model: Signing in

    View full-size slide

  44. Match the mental model or the system model?
    Decide whether to expose or hide what’s under the covers

    View full-size slide

  45. Understand appetite for risk
    Innovators Early adopters Later adopters (early - late
    majority)
    Risk-takers (and comfortable) Will tolerate risk Reasonably risk averse
    May have access to finance Usually have access to
    finance
    Carefully assess the value
    High social status / thought
    leadership
    Often connected to the tech Need some information Need more information and to
    see others adopting
    Like being part of a new thing Evangelise the idea Just use the product

    View full-size slide

  46. Help people learn
    Understand where people are
    Understand where we need them to be
    Make the steps as small as possible (even if it means more steps)
    Help them understand what is similar and different
    Expose more and hide less than we might in a mature system, so they can
    learn and develop new mental models
    Provide more feedback and support when an action takes place

    View full-size slide

  47. Choose partners carefully
    When choosing wallets and services, assess the UX
    for their service and use that in your choice

    View full-size slide

  48. Design onboarding

    View full-size slide

  49. Design for trust
    What are people worried about
    What makes you credible
    How are you keeping users data safe
    How are you managing their data or assets
    How are you different from other similar projects

    View full-size slide

  50. Summary
    Web 3 isn’t one thing - you’ll be designing for specific parts of it
    There are not yet patterns of good practice
    The current user experience is terrible
    Understand your users’ mental models and design to connect them and the
    system model
    Design for learning, onboarding and trust

    View full-size slide

  51. Q&A
    You can find me here:
    ● @maadonna
    ● Linkedin: Donna Spencer (mention you
    saw me at YOW!)
    ● Insta: maadonna_m (which is just
    renovations, sewing and cats)

    View full-size slide