Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Design of Blockchain-Based Apps (DApps)

483 views

Published on

Decentralized apps are still apps but there are key differences as well which any app designer needs to understand. Onboarding into a token-based ecosystem. Requesting permission for transactions. Handling wait times and confirmation finality. All of these are unexpected for users and, thus, represent key friction points in their interactions.

In this event, we'll cover the full spectrum of what a designer or product person or developer needs to understand about the unique world of creating decentralized applications. We'll start high level and then make our way into more specific case studies of design interactions.

**About the Blockchain Onramp Series**

Blockchain Onramp is a series of events covering the full spectrum of knowledge necessary to operate effectively within the blockchain ecosystem as a designer, developer or product person. After participating in these events, you should be able to take your functional expertise in any of these areas and apply them to blockchain projects.

We are doing this to provide a key -- and currently missing -- plain-English onramp for people of all functional experience who are interested in building real businesses on this new technology.

The format of each event may differ slightly but they will be a combination of expert talks and discussions with industry practitioners.

Published in: Technology
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

The Design of Blockchain-Based Apps (DApps)

  1. 1. http://www.meetup.com/blockchain-product-design-development/ The Design of Blockchain-Based Apps Product, Design and Development January 16, 2019 #blockchainonramp
  2. 2. 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.
  3. 3. Blockchain Product Design and Development 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.
  4. 4. Blockchain Product Design and Development 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
  5. 5. 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
  6. 6. Blockchain Product Design and Development 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.
  7. 7. 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
  8. 8. Designing for end-users is sexy 8
  9. 9. Designing for developers is hard 9
  10. 10. Blockchain Product Design and Development 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.
  11. 11. 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
  12. 12. User Interface (UI) != User Experience (UX) 12 Unattractive but highly effective.* Beautiful, Iconic… and impossible to pour. *Until it all squirts out on you
  13. 13. 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
  14. 14. 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
  15. 15. Where are we today? 15
  16. 16. 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)
  17. 17. But we’re all still figuring it out 17
  18. 18. Blockchain Product Design and Development 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
  19. 19. Blockchain Product Design and Development Roadmap 19 1. The Space We Operate Within 2. General Principles of Design 3. Designing on Blockchain 4. Designing for Trust 5. Conclusion
  20. 20. Blockchain Product Design and Development Roadmap 20 1. The Space We Operate Within 2. General Principles of Design 3. Designing on Blockchain 4. Designing for Trust 5. Conclusion
  21. 21. Blockchain Product Design and Development 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
  22. 22. Blockchain Product Design and Development 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
  23. 23. Blockchain Product Design and Development 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...
  24. 24. Blockchain Product Design and Development 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
  25. 25. Blockchain Product Design and Development ...But it’s still design. 25
  26. 26. Blockchain Product Design and Development Blockchain-based apps have new walls 26
  27. 27. Blockchain Product Design and Development Wall 1: Knowledge Problem 1: Too much education about blockchain. Problem 2: Too little education about blockchain. It’s a tricky middle ground. 27
  28. 28. Blockchain Product Design and Development Wall 2: Wallets Usually* required to get started with any blockchain- based app. *: Not always 28
  29. 29. Blockchain Product Design and Development Wall 3: Acquiring tokens 29
  30. 30. Blockchain Product Design and Development Wall 4: Managing keys 30 Stored where? If lost? Wait, keys? #findmyphone How many?
  31. 31. Blockchain Product Design and Development Wall 5: Permissions and Transactions 31
  32. 32. Blockchain Product Design and Development Wall 6: Gas and Speed 32 !?!?
  33. 33. Blockchain Product Design and Development Wall 7: Waiting 33
  34. 34. Blockchain Product Design and Development Ok, let’s get over this. 34https://en.wikibooks.org/wiki/Castles_of_England/Methods_of_Attack
  35. 35. Blockchain Product Design and Development Roadmap 35 1. The Space We Operate Within 2. General Principles of Design 3. Designing on Blockchain 4. Designing for Trust 5. Conclusion
  36. 36. Blockchain Product Design and Development 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
  37. 37. Blockchain Product Design and Development 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/
  38. 38. Blockchain Product Design and Development Process matters… and it’s all about #users 38 Credit: Sarah Gregory
  39. 39. Blockchain Product Design and Development ● 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
  40. 40. Blockchain Product Design and Development 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/
  41. 41. Blockchain Product Design and Development 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 :/
  42. 42. Blockchain Product Design and Development 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
  43. 43. Blockchain Product Design and Development 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
  44. 44. Blockchain Product Design and Development Roadmap 44 1. The Space We Operate Within 2. General Principles of Design 3. Designing on Blockchain 4. Designing for Trust 5. Conclusion
  45. 45. Blockchain Product Design and Development The user walls 45 1. Knowledge 2. Wallets 3. Acquiring Crypto 4. Managing Keys 5. Asking for Permissions 6. Gas and Speed 7. Waiting
  46. 46. Blockchain Product Design and Development 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
  47. 47. Blockchain Product Design and Development 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
  48. 48. Blockchain Product Design and Development 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
  49. 49. Blockchain Product Design and Development 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
  50. 50. Blockchain Product Design and Development 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
  51. 51. Blockchain Product Design and Development 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
  52. 52. Blockchain Product Design and Development 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
  53. 53. Blockchain Product Design and Development Roadmap 53 1. The Space We Operate Within 2. General Principles of Design 3. Designing on Blockchain 4. Designing for Trust 5. Conclusion
  54. 54. Blockchain Product Design and Development 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
  55. 55. Blockchain Product Design and Development 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
  56. 56. Blockchain Product Design and Development 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
  57. 57. Blockchain Product Design and Development Roadmap 57 1. The Space We Operate Within 2. General Principles of Design 3. Designing on Blockchain 4. Designing for Trust 5. Conclusion
  58. 58. Blockchain Product Design and Development 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
  59. 59. Blockchain Product Design and Development 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
  60. 60. Blockchain Product Design and Development 1. Come to next week’s workshop. 2. Do bounties on https://explorer.bounties.network/exp lorer What can you do? Participate! 60 https://medium.com/design-for-crypto/%C3%B0ap p-user-experience-audit-afc11e4384c3
  61. 61. Blockchain Product Design and Development 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 https://medium.com/design-for-crypto/%C3%B0ap p-user-experience-audit-afc11e4384c3
  62. 62. Blockchain Product Design and Development 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 https://medium.com/design-for-crypto/%C3%B0ap p-user-experience-audit-afc11e4384c3
  63. 63. Blockchain Product Design and Development Thank you! 63
  64. 64. Blockchain Product Design and Development Let’s chat. 64
  65. 65. Blockchain Product Design and Development 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
  66. 66. Blockchain Product Design and Development 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
  67. 67. Blockchain Product Design and Development 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.

×