Making grandma-friendly UX in Web3 & DeFi
Making grandma-friendly UX in Web3 & DeFi
Subscribe to undevy
Subscribe to undevy
Share Dialog
Share Dialog
<100 subscribers
<100 subscribers
The UX in crypto reflects exactly where we are.
It's quite a popular belief that user experience and a lot of technical terminologies are in a lot of cases the reason that is stopping crypto from further adoption. Take a look at the current state of the DeFi, which you might want to consider only if you have a decent amount of money, technical know-how about the blockchain, and the time to keep up with things.
I've tried so many crypto apps, but I've yet to find one that's an all-in-one solution, a crypto-app that has all the required features, can work with a variety of blockchains, and is simple enough to be used by the average Joe. Even if my grandma was interested in crypto, I could not show her an app that would make her comfortable enough to use it because there is no app like this.
Until crypto’s user base consists of tech-savvy grandmothers and grandfathers, it will remain mainly an enigma to the majority of the population. Look at how "quickly" the internet became ingrained in our lives. It only took 30 years to become a part of every generation. Having so little education and developers who focus more on tech than user experience, widespread crypto adoption in its present form would be achievable only when we are these tech-savvy grandmothers and grandfathers.
Adoption should not occur only when we outlive everyone who couldn't use these apps in their current form. UX needs to be improved, and now is the best time to do this.
A typical user journey consists of four main stages. Depending on your app the content of these stages varies but the overall picture is always the same. Users find you and decide whether they need your app. They get onboard and start using it. Then they leave or stay with you.
Each stage could be divided into smaller user flows. We start with the first one: consideration. Here's what you can do to make this stage more user-friendly:
1. Make sure your app is easy to find
2. Create a clear and coherent USP within the first screen of the landing page
https://twitter.com/undevy/status/1553669546023612416
3. Don't use crypto-native jargon, and use simple words. Your app should be enjoyed by millions, not just a few developers
https://twitter.com/undevy/status/1561678184025841665
4. Provide onboarding tips for complex apps
5. Create an unauthorized zone where disconnected users can get as much access as possible (consider creating a demo mode)
The next stage is acquisition. User onboarding needs to be streamlined here:
6. Place the “Connect Wallet” screen within the primary component
7. When the user connects for the first time, show a meaningful signature request
8. Add instructional text to the “Connect Wallet” modal
9. Provide users with a button to switch networks - don't make them go to a wallet to do so
10. Make sure the connected network is prominently displayed
11. Allow the user to change the network from the main button
If there's a feature for creating a wallet consider these options:
12. Consider implementing a wallet creation using Apple/Google accounts (get rid of seed phrases)
13. Use contrast and visual weight to draw attention to primary actions
14. Add timelines/steppers for users to better understand what's happening
https://twitter.com/undevy/status/1550742507369242624
When a user is already connected, there are plenty of scenarios:
15. If there are no funds in the wallet, offer easy on-ramp options (why do you need a user without funds, really?)
16. Show quick links to tokens you have in your wallet on trade functions
17. Replace “balance” with the wallet icon whenever it improves readability
18. Make wrapping and unwrapping tokens invisible
19. Do not mention wrapped tokens unless they are strictly relevant - most users do not understand them
https://twitter.com/undevy/status/1550414622662033408
20. Display APY prominently, and APR in real terms (week/month)
21. Use visual contrast to highlight the key info
22. Show USD equivalent everywhere. Users should know the real value of every transaction/yield they make
23. Multi-chain UIs should show assets regardless of which chain you are connected to. Only make users switch networks when they attempt to perform an action
24. Ensure users have flexibility in withdrawing their tokens, even if smart contracts are required
25. Ensure that tokens are large enough to be read
26. Follow basic accessibility guidelines: high contrast, large text, readable font
27. The vault pages, not the expanding cards, are a better choice if there are many vaults
28. Write informative error messages
29. Make sure safety measures are properly advertised (audits & insurance)
30. Put an "emergency exit" button on anything destructive or margin-intensive
31. The app should include some basic instructions, not just a separate docs page
32. Show “Active Positions” or “My Vaults” in a clear and obvious way
33. Active positions should be at the top of the page
34. For scanning purposes, the deposited amounts should be in a different color
35. Consider using filters if there are many options
Combine multiple transactions into one action:
36. Allow multiple token approvals at once
37. Combine “give permission” and “make transaction” in one
38. Allow users to harvest+restake in one go
39. If manual harvesting is required, put the button at the top of the main page
40. Have a 50% button in the DEX to facilitate providing liquidity
41. Group multiple actions together to show continuous progress
42. Be as clear about fees as possible, explain them in real terms
43. Show fees as a proportion of interest earned
44. Subtract fees when the user presses the "max" button
45. Set a generous default gas amount to ensure the transaction gets through
46. Real-time updates are needed for slower transactions, such as on bridges
47. To humanize and reassure the user, use animations, artwork, and friendly language
48. At every stage of the transaction, provide feedback: authorize, confirm, in progress, successful
49. Establish the most relevant information in the app through minimal user testing. Display the information your user is scanning for clearly, and remove the rest
50. Enable notifications for web3 actions
We’re almost there. The next stage is loyalty.
The app should not be abandoned by users. Moreover, you want them to bring other users to your app. So consider these options:
51. From time to time give rewards (they shouldn't necessarily be worth a lot)
52. Before you can maximize usability for your user, find out what your user wants
53. Collect feedback from your users, process, and analyze it to recognize their needs
54. Instead of waiting for customers to give feedback, be a step ahead by reaching out to them
https://twitter.com/undevy/status/1556987156752637957
55. In order to continually design for your user, user testing must be an essential part of any app
56. Use social media or newsletters to provide value to the customers while subtly reminding your brand to customers
57. When you launch new features that users want, don’t forget to inform them
58. Get testimonials from your most satisfied users and publish them to establish your brand value
59. Provide customer support, and make it as accessible as possible
60. Give users a reason to share their experience and call out to their audience
https://twitter.com/undevy/status/1558830354823356417
Creating the most successful app does not have a holy grail. There is a lot of trial and error involved. Ship it first, then constantly improve it based on user feedback. Despite the fact that every case is unique, there are some similarities and best practices that can be used or at least be inspired by, which is why I created this checklist.
This article was originally published as a Twitter thread and largely inspired by my post on Reddit, my own experience, and the article by Jon Crabb.
https://twitter.com/undevy/status/1563167320276893696
I started as a graphic designer 8 years ago. Then shifted to making interfaces, and now I specialize in UX for the most part. Speaking of crypto, I work on a self-custodial wallet on Solana – Key App, and in my free time, I do some freelance work, mostly mentoring, publishing, and doing reviews of various DeFi and web3 apps.
subscribe://
The UX in crypto reflects exactly where we are.
It's quite a popular belief that user experience and a lot of technical terminologies are in a lot of cases the reason that is stopping crypto from further adoption. Take a look at the current state of the DeFi, which you might want to consider only if you have a decent amount of money, technical know-how about the blockchain, and the time to keep up with things.
I've tried so many crypto apps, but I've yet to find one that's an all-in-one solution, a crypto-app that has all the required features, can work with a variety of blockchains, and is simple enough to be used by the average Joe. Even if my grandma was interested in crypto, I could not show her an app that would make her comfortable enough to use it because there is no app like this.
Until crypto’s user base consists of tech-savvy grandmothers and grandfathers, it will remain mainly an enigma to the majority of the population. Look at how "quickly" the internet became ingrained in our lives. It only took 30 years to become a part of every generation. Having so little education and developers who focus more on tech than user experience, widespread crypto adoption in its present form would be achievable only when we are these tech-savvy grandmothers and grandfathers.
Adoption should not occur only when we outlive everyone who couldn't use these apps in their current form. UX needs to be improved, and now is the best time to do this.
A typical user journey consists of four main stages. Depending on your app the content of these stages varies but the overall picture is always the same. Users find you and decide whether they need your app. They get onboard and start using it. Then they leave or stay with you.
Each stage could be divided into smaller user flows. We start with the first one: consideration. Here's what you can do to make this stage more user-friendly:
1. Make sure your app is easy to find
2. Create a clear and coherent USP within the first screen of the landing page
https://twitter.com/undevy/status/1553669546023612416
3. Don't use crypto-native jargon, and use simple words. Your app should be enjoyed by millions, not just a few developers
https://twitter.com/undevy/status/1561678184025841665
4. Provide onboarding tips for complex apps
5. Create an unauthorized zone where disconnected users can get as much access as possible (consider creating a demo mode)
The next stage is acquisition. User onboarding needs to be streamlined here:
6. Place the “Connect Wallet” screen within the primary component
7. When the user connects for the first time, show a meaningful signature request
8. Add instructional text to the “Connect Wallet” modal
9. Provide users with a button to switch networks - don't make them go to a wallet to do so
10. Make sure the connected network is prominently displayed
11. Allow the user to change the network from the main button
If there's a feature for creating a wallet consider these options:
12. Consider implementing a wallet creation using Apple/Google accounts (get rid of seed phrases)
13. Use contrast and visual weight to draw attention to primary actions
14. Add timelines/steppers for users to better understand what's happening
https://twitter.com/undevy/status/1550742507369242624
When a user is already connected, there are plenty of scenarios:
15. If there are no funds in the wallet, offer easy on-ramp options (why do you need a user without funds, really?)
16. Show quick links to tokens you have in your wallet on trade functions
17. Replace “balance” with the wallet icon whenever it improves readability
18. Make wrapping and unwrapping tokens invisible
19. Do not mention wrapped tokens unless they are strictly relevant - most users do not understand them
https://twitter.com/undevy/status/1550414622662033408
20. Display APY prominently, and APR in real terms (week/month)
21. Use visual contrast to highlight the key info
22. Show USD equivalent everywhere. Users should know the real value of every transaction/yield they make
23. Multi-chain UIs should show assets regardless of which chain you are connected to. Only make users switch networks when they attempt to perform an action
24. Ensure users have flexibility in withdrawing their tokens, even if smart contracts are required
25. Ensure that tokens are large enough to be read
26. Follow basic accessibility guidelines: high contrast, large text, readable font
27. The vault pages, not the expanding cards, are a better choice if there are many vaults
28. Write informative error messages
29. Make sure safety measures are properly advertised (audits & insurance)
30. Put an "emergency exit" button on anything destructive or margin-intensive
31. The app should include some basic instructions, not just a separate docs page
32. Show “Active Positions” or “My Vaults” in a clear and obvious way
33. Active positions should be at the top of the page
34. For scanning purposes, the deposited amounts should be in a different color
35. Consider using filters if there are many options
Combine multiple transactions into one action:
36. Allow multiple token approvals at once
37. Combine “give permission” and “make transaction” in one
38. Allow users to harvest+restake in one go
39. If manual harvesting is required, put the button at the top of the main page
40. Have a 50% button in the DEX to facilitate providing liquidity
41. Group multiple actions together to show continuous progress
42. Be as clear about fees as possible, explain them in real terms
43. Show fees as a proportion of interest earned
44. Subtract fees when the user presses the "max" button
45. Set a generous default gas amount to ensure the transaction gets through
46. Real-time updates are needed for slower transactions, such as on bridges
47. To humanize and reassure the user, use animations, artwork, and friendly language
48. At every stage of the transaction, provide feedback: authorize, confirm, in progress, successful
49. Establish the most relevant information in the app through minimal user testing. Display the information your user is scanning for clearly, and remove the rest
50. Enable notifications for web3 actions
We’re almost there. The next stage is loyalty.
The app should not be abandoned by users. Moreover, you want them to bring other users to your app. So consider these options:
51. From time to time give rewards (they shouldn't necessarily be worth a lot)
52. Before you can maximize usability for your user, find out what your user wants
53. Collect feedback from your users, process, and analyze it to recognize their needs
54. Instead of waiting for customers to give feedback, be a step ahead by reaching out to them
https://twitter.com/undevy/status/1556987156752637957
55. In order to continually design for your user, user testing must be an essential part of any app
56. Use social media or newsletters to provide value to the customers while subtly reminding your brand to customers
57. When you launch new features that users want, don’t forget to inform them
58. Get testimonials from your most satisfied users and publish them to establish your brand value
59. Provide customer support, and make it as accessible as possible
60. Give users a reason to share their experience and call out to their audience
https://twitter.com/undevy/status/1558830354823356417
Creating the most successful app does not have a holy grail. There is a lot of trial and error involved. Ship it first, then constantly improve it based on user feedback. Despite the fact that every case is unique, there are some similarities and best practices that can be used or at least be inspired by, which is why I created this checklist.
This article was originally published as a Twitter thread and largely inspired by my post on Reddit, my own experience, and the article by Jon Crabb.
https://twitter.com/undevy/status/1563167320276893696
I started as a graphic designer 8 years ago. Then shifted to making interfaces, and now I specialize in UX for the most part. Speaking of crypto, I work on a self-custodial wallet on Solana – Key App, and in my free time, I do some freelance work, mostly mentoring, publishing, and doing reviews of various DeFi and web3 apps.
subscribe://
No activity yet