Designing for Web3
It is universally held that the new age of the Internet is design-led, but there is as yet no universal consensus on what constitutes the design frameworks and principles for Web3. This article is an attempt to strike a harmony between design that works and that we should strive for as we go about building the Internet we Deserve.
At Cope, when designing products for Web3, we have always aimed to strike a balance between good UX and Web3 differentiation. Often, the balance is hard-won requiring us many rounds of mood-boarding and ideation. All of this came to a culmination when we set about building Finity, a design system for dApps.
While ideating the design system, we tackled some hard questions -
- Should a user know he is using a Web3 application or should Web3 be the invisible layer powering an experience?
- Even if Web3 is invisible to the user, should we still differentiate for Web3 design?
- How do you set about building Web3 design differentiation?
- Should we or should we not use principles of good Web2 design in Web3?
- How important should aesthetics be in the overall engagement we aim to create?
Answering these questions required us to don our philosophers’ hats and understand what designing for Web3 means to us, what designs work well for users, and where Web3 differentiation and aesthetics fit into the overall user journey.
Here’s presenting our conclusions and the broad design principles that these conversations have led us to.
TL;DR: What we realized is that Web3 design is about imbibing the Web3 spirit through a focus on transparency, community, and decentralization, prioritizing the user need for security, adopting an educator’s mindset, and striking a balance between Web2 familiarity and Web3 differentiation. In other ways, designing for Web3 is about having your users’ back in the now and in the long-term.
Emphasizing on accessibility and inclusion over FOMO
We have all been guilty of this!
Ever since we joined the crypto world, our attitudes and how we communicate have shifted. Take a look at what many call crypto-Twitter, and if you are at an early to intermediate stage of Web3 understanding, you will get a clear sense of what users experience when faced with crypto-chatter.
The lingo, the technicalities, and the overall Web3 attitude mark a culture shift for most people and the general feeling this evokes is one of exclusion. Most brands create a hype trail for their applications and technology, making matters too technical for the average person to follow. And this has penetrated, whether by fluke or intention, into our Web3 design culture.
The alternative? Lead with empathy.
Leading a design process with empathy means adopting a beginner’s mindset and understanding the realities of the people you are designing for. Therefore, conducting interviews, building user personas, and mapping user journeys are the absolute musts to undertake at the early stages of a design process.
For instance, before each project, we figure out the different user types for our product based on factors such as understanding of Web3 (beginner/intermediate/advanced), skillset (tech/non-tech), expectations (security, accessibility, etc.) and parameters like gender, age (Gen Alpha, Gen Z, Gen Y, or all), etc. This information flows into our user journeys, the architecture of our interfaces, and our content.
Another line of enquiry is to determine the existing metaphors and mental models that users are familiar with from Web2. We are often told that Web3 requires new mental models to orient oneself to. While this is largely true, considering that the tech is too complex for even old-timers to understand at times, using familiar frameworks help make the transition easier.
The idea here is to give users a sense of security and familiarity by developing a recognizable workflow. Think about how Apple designed their touch-screen iPhone. They referenced the weight and friction of everyday objects while building out the user interactions, such as the swipes and prolonged taps, which we now see with modern phones today.
For even better utility for your application, you can take human-centricity a step further and also design for user extremes.
💡 For a read on how user averages can tell you the wrong user story, check out this article.
Further, how you communicate and tell the story of your product should be at the forefront of design. The principle to abide by here is to put the value at the forefront of our messaging.
A product is much more than the sum of its individual parts. In Web3, the value of a product or application is determined by the real and abstract value it brings to users’ lives. Most people still have no idea how Web3 can provide value in our lives. The challenge here is to hide the complexity of Web3 and focus on what really matters for the user.
So, ask yourself questions like “What are you trying to solve with the product?”, “How is your product solving the problem?”, and “Why should the user care?”.
Evaluating your application from such a lens helps create powerful messaging that resonates with users and helps you focus on true value and impact than generating hype and FOMO.
Adopting an educator’s mindset
Web3 is still young. This means that much of the technology and values that will define Web3 of tomorrow is being built today. This presents a learning curve for beginners as well as experts. This curve will remain a part of the user journey as the product and the technology in which it is founded evolves.
The onus to educate users constitutes a design problem. Education should, therefore, be weaved into the whole user experience of interaction with the product.
It can start with a truly effective onboarding that gives users just the bare details of getting the job done without overwhelming them with all the features of the product. If you have a complex product and a more varied audience, you can create distinct onboarding flows depending on their understanding and the product’s utility. Use videos and helpful animations to get users to become familiar with the product.
Strong content serves as a great agency for education. However, effective content can only be built if you have a good user understanding.
For instance, if you have predominantly a non-tech audiences, reduce the cognitive load on your users, trim down the technical jargon for more laymen messaging, and where simpler explanations are not possible, use explainer tooltips, glossaries, and documentation. For technophiles, however, it is not necessary to skip the technical lingo. Stick to familiar terminologies and incorporate the right detailing to serve their information needs.
An example of content well-done is the Metamask intro video on its home page.
The best way to imbibe education into the fabric of your application is to question yourself -
- Is the application allowing users to learn their way through the platform, features, and tasks in an intuitive way?
- How and what hooks have been enabled to guide the user through the learning curve?
- Do the language and visuals feel familiar and welcoming to the user rather than exclusionary?
- Is the application catering to the audience it is built for?
- Is adequate, task-focused, and easily-searchable information available for users to refer to?
Building true Web3 Differentiation
Web3 marks the new age of the Internet not because it is founded on blockchain technology but because it imbibes the tenets of blockchain — decentralization, immutability, trustlessness, uncensorability, community ownership, and transparency. While it may be argued that the blockchain should remain an invisible layer powering an application, it is also important to offer to users the flavor of these very values that made them switch to a Web3 experience.
So, the way to build true Web3 differentiation, therefore, lies in absorbing these principles into the design process.
Let your user know about product security
Security remains a fundamental concern for users in the digital age. To build that trust, you need to be more transparent about the security measures taken to keep their identities and finances secure. Build helpful and clear documentation on security protocol and fail safes and notify users of security audits.
Don’t keep your users guessing
In Web2, every time a user concludes a transaction, they are notified that the transaction has been successful and that the money has been debited. Users should be able to expect the same level of transparency from your application.
Give users a fair expectation of gas fees, platform charges if any, the conversion of the payment in fiat, and how much time it would take to complete a transaction before they initiate a payment. Once a transaction is complete, let your users know the status of transactions along with details like the sender’s and receiver’s wallet addresses and the breakdown of the transaction including gas fees and other charges.
What’s more, with the rise and fall in crypto value, users look for the latest stats in blockchain applications. To welcome, reassure, and to send trust signals to early-stage crypto traders, applications can make use of simple UI and messaging. Some helpful features that can take the guessing out are visualization trends over time, tables with sorting features, and local currency conversions.
Prevent your users from making irreversible mistakes
Mistakes are all too-common in Web3. In fact, as users adopt to the new mental models of Web3, and as the space grows, mistakes become part of its growing pains. Through design, many of these mistakes from forgetting wallet passwords to making wrong transactions to getting scammed can be avoided.
You can do this by calling out irreversible actions, educating on measures users can take to prevent security risks, and giving useful currency conversions in fiat especially during large transactions. You can also build friction, such as by using swiping or sliding gestures to initiate transactions instead of single-tap, using double confirmations, etc. to bring more mindfulness into irreversible actions.
Encourage community participation
At the heart of Web3 is a community of self-sovereign individuals communicating ideas and co-owning and contributing to the making of a borderless digital economy. Your product is a great gateway to get users to become excited about Web3 and participate in community building. But to generate the feeling of community, there needs to be a shared purpose. The brand purpose can be a good catalyst here but it needs to be meaningful, identifiable, and true to the target audience.
Using gamification, social incentives, and in some cases, through tokens, users can also be encouraged to contribute and interact in a meaningful way and benefit from network effects.
Play with aesthetics
Web3 is being known as the industry with space for experimentation and creativity. And for good reason.
The Aesthetic-Usability effect states that users often perceive aesthetically-pleasing design to be more usable. Aesthetics influence how users perceive a product at first-glance, and this first impression plays a crucial role in their desire to explore and probe deeper into that product experience.
Aesthetics also allow a point of differentiation by allowing an application to stand out from an endless sea of platforms that look more or less the same. In Web3, it is possible to create a recognizable brand with unique colors, gradients, animation, and 3D components, without worrying too much about design trends, as long as each component is guided by a purpose and does not impede the user experience.
Final Thoughts
Designing for Web3 is essentially designing for the future. Yet, despite the onus on design, the framework and rules for web3 design are still very much at an experimental stage. While this presents a lot of room to navigate, it is only through trial and error and applying tried and tested practices of good design can one expect to create better and more effective designs for their users.
