Skip to content

Commit 08e0b01

Browse files
authored
Merge pull request #9858 from ethereum/konopkja-design-and-ux-docs
Design and UX in web3
2 parents 6bb2488 + 83b1671 commit 08e0b01

File tree

3 files changed

+83
-0
lines changed

3 files changed

+83
-0
lines changed
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: Design and UX in web3
3+
description: Introduction to UX design an research in web3 space and Ethereum
4+
lang: en
5+
---
6+
7+
Are you new to designing with Ethereum? This is the right place for you. The Ethereum community has written resources to introduce you to web3 design and research basics. You'll learn about core concepts that may differ from other app designs you're familiar with.
8+
9+
Need a more basic understanding of web3 first? Check out [**Learn hub**](/learn/).
10+
11+
## Start with user research {#Start-with-user-research}
12+
13+
Effective design goes beyond creating visually appealing user interfaces. It involves gaining a deep understanding of the user's needs, objectives, and driving factors. Therefore, we highly recommend that all designers adopt a design process, such as the [**double diamond process**](<https://en.wikipedia.org/wiki/Double_Diamond_(design_process_model)>), to ensure that their work is deliberate and intentional.
14+
15+
- [Web3 needs more UX Researchers and Designers](https://akasha.org/blog/2022/10/11/akasha-conversation-09-web3-ux-researchers-and-designers) - An overview of current design maturity
16+
- [A simple guide to UX Research in web3](https://uxplanet.org/a-complete-guide-to-ux-research-for-web-3-0-products-d6bead20ebb1) - Simple guide how to do research
17+
- [How to Approach UX Decisions in Web3](https://archive.devcon.org/archive/watch/6/data-empathy-how-to-approach-ux-decisions-in-web3/) - A brief overview of quantitative and qualitative research and the differences between the two (video, 6 min)
18+
- [Being a ux researcher in web3](https://medium.com/@georgia.rakusen/what-its-like-being-a-user-researcher-in-web3-6a4bcc096849) - A personal view on what it is like being a UX researcher in web3
19+
20+
## Research studies in web3 {#Research-in-web3}
21+
22+
This is a curated list of user research done in web3 that may help with design and product decisions or work as an inspiration to conduct own study.
23+
24+
- [CRADL: Crypto Research and Design Lab](https://project-cradl.notion.site/Crypto-Research-and-Design-Lab-50a7127f34ed4c88ad95c7cedf7fbe36)
25+
- [CRADL: UX in Cryptocurrency](https://docs.google.com/presentation/d/1s2OPSH5sMJzxRYaJSSRTe8W2iIoZx0PseIV-WeZWD1s/edit?usp=sharing)
26+
- [CRADL: Onboarding to Cryptocurrency](https://docs.google.com/presentation/d/1R9nFuzA-R6SxaGCKhoMbE4Vxe0JxQSTiHXind3LVq_w/edit?usp=sharing)
27+
- [Staking survey: Key trends, takeaways, and predictions - Eth Staker](https://lookerstudio.google.com/u/0/reporting/cafcee00-e1af-4148-bae8-442a88ac75fa/page/p_ja2srdhh2c?s=hmbTWDh9hJo)
28+
- [Usability and user satisfaction survey - Ethereum.org](https://lookerstudio.google.com/reporting/0a189a7c-a890-40db-a5c6-009db52c81c9)
29+
- [Usability study: Coverage pools](https://github.com/threshold-network/UX-User-Research/tree/main/Keep%20Coverage%20Pool)
30+
- [Usability study: Multi App Staking](<https://github.com/threshold-network/UX-User-Research/blob/main/Multi-App%20Staking%20(MAS)/iterative-user-study/MAS%20Iterative%20User%20Study.pdf>)
31+
- [2022 DAO Research Update: What do DAO Builders Need?](https://blog.aragon.org/2022-dao-research-update/)
32+
- [ConSensys: DeFi User Research Report 2022](https://cdn2.hubspot.net/hubfs/4795067/ConsenSys%20Codefi-Defi%20User%20ResearchReport.pdf)
33+
- [Bitcoin UX report](https://github.com/patestevao/BitcoinUX-report/blob/master/report.md)
34+
- [Going on Safari: Researching Users in the Metaverse](https://archive.devcon.org/archive/watch/6/going-on-safari-researching-users-in-the-metaverse/?tab=YouTube) (video, 27 min)
35+
36+
## Design for web3 {#Design-for-web3}
37+
38+
- [Web3 Design Principles](https://medium.com/@lyricalpolymath/web3-design-principles-f21db2f240c1) - A framework of UX rules for blockchain based dapps
39+
- [Blockchain Design Principles](https://medium.com/design-ibm/blockchain-design-principles-599c5c067b6e) - Lessons learned by the blockchain design team at IBM
40+
- [Dimensions of web3 UX](https://uxdesign.cc/the-levels-of-web3-user-experience-4f2ad113e37d) - An analysis of different layers of web3 UX and its challenges
41+
- [Web3 Design Patterns](https://www.web3designpatterns.io/)- A curated library of design patterns from real Web3 products
42+
- [W3design.io](https://w3design.io/) - A curated library of UI flows of different projects in the ecosystem
43+
44+
## Web3 Design Case Studies {#Design-case-studies}
45+
46+
- [How to write better web3 error messages](https://medium.com/@JonCrabb/how-to-design-better-web3-error-messages-bd96e12fa582)
47+
- [Defi design tips](https://medium.com/@JonCrabb/defi-design-tips-vol-12-8600f4374714)
48+
- [Deep Work Studio](https://deepwork.studio/case-studies/)
49+
- [Crypto UX Handbook](https://www.cryptouxhandbook.com/)
50+
51+
## Design Bounties {#Bounties}
52+
53+
- [Dework](https://app.dework.xyz/bounties)
54+
- [Gitcoin](https://bounties.gitcoin.co/explorer)
55+
- [Buildbox hackathons](https://gitcoin.co/hackathons)
56+
- [ETHGlobal](https://ethglobal.com/)
57+
58+
## Design DAOs and communities {#Design-DAOs-and-communities}
59+
60+
Get involved in professional community-driven organizations or join design groups to discuss design and research related topics and trends with other members.
61+
62+
- [Vectordao.com](https://vectordao.com/)
63+
- [Deepwork.studio](https://www.deepwork.studio/)
64+
- [Designer-dao.xyz](https://www.designer-dao.xyz/)
65+
- [We3.co](https://we3.co/)
66+
- [Openux.xyz](https://openux.xyz/about)
67+
- [web3trends.org/](https://web3trends.org/)
68+
69+
## Design Systems {#Design-systems}
70+
71+
- [Optimism Design](https://www.figma.com/@oplabs) (Figma)
72+
- [Ethereum.org Design system](https://www.figma.com/@ethdotorg) (Figma)
73+
- [Finity, a design system for Web3 by Polygon](https://finity.polygon.technology/) (Figma)
74+
- [ENS Design system](https://thorin.ens.domains/)

src/data/developer-docs-links.yaml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,3 +246,9 @@
246246
to: /developers/docs/data-structures-and-encoding/ssz/
247247
- id: docs-nav-data-structures-and-encoding-web3-secret-storage
248248
to: /developers/docs/data-structures-and-encoding/web3-secret-storage/
249+
- id: docs-nav-design-fundamentals
250+
path: /developers/docs/
251+
items:
252+
- id: docs-nav-design-and-ux
253+
to: /developers/docs/design-and-ux/
254+
description: docs-nav-design-and-ux-description

src/intl/en/page-developers-docs.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@
2323
"docs-nav-dart": "Dart",
2424
"docs-nav-delphi": "Delphi",
2525
"docs-nav-deploying-smart-contracts": "Deploying smart contracts",
26+
"docs-nav-design-and-ux": "Intro to design and UX",
27+
"docs-nav-design-and-ux-description": "Introduction to UX design an research in web3 space and Ethereum",
28+
"docs-nav-design-fundamentals": "Design fundamentals",
2629
"docs-nav-development-frameworks": "Development frameworks",
2730
"docs-nav-development-frameworks-description": "Tools that make developing with Ethereum easier",
2831
"docs-nav-development-networks": "Development networks",

0 commit comments

Comments
 (0)