Designing User-Centric Web3 Applications
Challenges and solutions for a key barrier to adoption
Contents
Why Web3 founders should care about UI/UX
Challenge #1: Bridging the knowledge gap
Challenge #2: Designing creatively without sacrificing function
Challenge #3: Instilling more product trust
Introduction
For a newbie, using a Web3 application can be extremely stressful. Unfamiliar terms like "gas fee", the complexity of different chains and exchange rates, and the need to remember wallet addresses and hidden charges complicate matters. Negative media coverage of blockchain failures, scams, hacks, and Bitcoin dips further fuels skepticism about the industry.
While developers are working towards Web3 adoption, complex and non-intuitive product designs further hinder progress. Web3 grants users full ownership of their platforms and content, aligning with the vision for a new internet. However, this also presents new design challenges.
Expanding Web3 ecosystems require user interfaces that address confusion and safety concerns arising from unique Web3 features. Blockchain constraints, such as costly media uploads and limited ability to transfer NFT-based assets between apps, restrict options and discourage participation.
Why should Web3 founders care about UI/UX
Similar to any other digital product, Web3 applications should focus on a well-thought-out UI/UX design. While the underlying blockchain technology is important, user-friendly and engaging interfaces are also key for a project’s success and growth.
Expanding user adoption
While blockchain was once exclusive to techies and developers, attracting a wider audience is now a pivotal focus. Intuitive and user-friendly UI/UX will help minimise the need for users to extensively study blockchain terminologies and concepts just to utilise your product.
Standing out from the crowd
Humans are visual creatures. Eye-catching and on-brand interfaces capture people's attention and leave a positive impression. When executed effectively, UI/UX design can give you a competitive advantage over products that have been catering mostly to tech-savvy users.
Building trust and loyalty
Users may initially be skeptical about blockchain-based products, especially if their money is required. Your primary objective is to instil confidence by assuring users that their data and funds are secure. Achieving this efficiently is where your UI/UX design plays a pivotal role.
Challenge #1: Bridging the knowledge gap
Many Web3 applications often assume user expertise, but designers should prioritise clear explanations of unfamiliar features. Interacting with blockchain-based platforms can be daunting for general users, requiring meticulous approaches to ensure ease and comprehension. Users without a sufficient crypto background can easily get confused by blockchain terminologies like “swap”, “gas”, “consensus mechanism”, and “private key”. Explaining seemingly obvious concepts presents a unique challenge in Web3 design, unlike traditional fintech products that require less explanation for basic tasks in today's age.
Decentralised finance (DeFi) products introduce additional complexity, necessitating predictable user journeys and information on fluctuating gas fees. Designing a highly informative interface without overwhelming new users is crucial.
Solution #1: Simple messaging
Intuitive user experiences for beginners rely on simple and clear prompts and communications. You should address the complexity of Web3 jargon for daily crypto operations, such as swapping tokens and on-chain asset transfers. Direct and concise messaging is essential, especially during transaction stages where users face the potential risk of permanent fund loss.
Take the example of transferring assets. Your product should clearly explain why it is necessary to use the appropriate network, like Ethereum, when moving assets to a different wallet in order to prevent irreversible loss of funds.
Some approaches can help tackle this challenge:
Utilise user-friendly prompts, such as pop-ups or on-screen notifications, to guide users effectively
Publish user-friendly guidelines and documentation, summarising each step and linking to relevant technical details.
Provide interactive glossaries for easy reference to Web3 definitions, slang, and jargon. Infographics and animations can also help these terms stick better to the minds of users.
Change blockchain terms to more mainstream version, e.g.:
Swap → Trading or Exchanging
Consensus Mechanism → Consensus Algorithm
Gas Fees → Transactions Fees
Private Key → Secure Key
Public Key → Wallet Address
Cryptocurrency → Digital Currency
Confirmation → Transaction Verification
Immutable → Unchangeable
Permissionless → Open Access
Blockchain Explorer → Transaction Tracker
When a user feels confident in navigating through your platform, you are not only bridging the knowledge gap but also building trust in your product.
Solution #2: Gentle learning curve
To ensure a user-friendly Web3 experience from onboarding onwards, adopt an educational approach to design. Treat users as learners and aim to improve their understanding of not just your product but blockchain in general. Some guidelines:
Minimise the use of blockchain jargon in the UI
Include question mark icons with technical terms that flash the associated definitions
Provide a comprehensive onboarding virtual tour and in-app guidance for new users
Offer educational materials like tutorials and how-to guides within the application
Enhance readability of wallet and transaction hashes using Ethereum Name Service (ENS)
Offer a lightweight version of your product for less experienced crypto users
Challenge #2: Designing creatively without sacrificing function
It has become common for many Web3 projects to attract users with creative designs, captivating animations, and dynamic website flows. The decentralised nature of the industry allows for freedom and flexibility in showcasing creativity. Take for example SushiSwap’s brand identity built around a sushi image.
In the Web3 realm where projects and startups spring up like mushrooms, it is crucial to stand out. Your goal is to create an exciting and memorable experience for users while establishing a strong connection with a specific crypto target audience. However, focusing excessively on image without substance risks diluting the intended user segment and losing valuable networks.
Solution #1: Deep research on competitors and end-users
UX/UI research may require a significant investment of time, but it has the power to make a substantial impact on building customer loyalty and connection. Your study should cover two parts:
Competitor analysis to identify the strengths and weaknesses of your rivals
Customer insights to understand the goals, pain points, and preferences of the target users
Note that tech products cater to diverse customer types. Consider the example of a crypto trading platform. Categorising users based solely on their investment experience as professional traders or newbies is inadequate. Before you build your product’s features, you should segment your potential users according to their trading styles, such as:
Scalpers: They engage in short-term trading, profiting from small price changes by quickly reselling stocks. Typically, their positions are held for seconds to a few minutes.
Day traders: Focused on taking advantage of small market movements, they aim to close all positions within the same trading day. Typically, their positions last less than an hour.
Swing traders: With the aim of capturing short- to medium-term profits, they hold long positions for a period ranging from a few days to several weeks.
Position traders: Their focus is on macro trends and asset growth potential. They buy assets that increase in value over the long run so they are less worried about short-term price fluctuations.
Fundamental traders: They generally hold positions for the long term, considering fundamental factors such as individual performance and characteristics of each asset to estimate their value.
The next step is to design user stories that reflect the needs of various end-users. Consider:
Day traders: I want access to highly liquid assets like futures while viewing portfolio statistics on the dashboard.
Swing traders: I want to have technical analysis tools to find and evaluate trading opportunities.
Position traders: I want to have tools for technical and fundamental analysis to identify the preferred exit points for intended positions. I also like to have the appropriate stop-loss orders as well as a variety of indictors to build quote charts.
Beginners may benefit from features that facilitate buying and selling digital currencies, monitoring portfolio statistics, and tracking open interests on a mobile app. In contrast, experienced ones may prefer a comprehensive market analysis terminal using tablets or desktops to better perceive a range of information.
Once you have a clear idea of your user segment and their preferences, the creativity of your UI/UX design should bounce off from there.
Solution #2: Familiar design conventions
Design in a way that has already been designed. Most users subconsciously have firm expectations for button placements, clickstreams, supported gestures, and so on. Note these key principles:
Apply Web2 metaphors and workflows: Use familiar elements like progress bars and transaction statuses to create a sense of continuity
Follow intuitive UI/UX design credo: Make it easy for users to backtrack, avoid clutter, and adhere to the Law of Locality to enhance usability
Use platform-specific design conventions: Incorporate button shapes, icons, fonts, and other elements that align with your brand to bolster identity
As a Web3 UI/UX designer, you should also consider developing a convenient information architecture (IA) and an intuitive user interface (UI).
Information architecture: Organise content in a way that allows users to navigate effortlessly and find what they need as quickly as possible. This involves conducting competitor analysis, understanding user goals and preferences, designing user personas, and identifying common user scenarios.
User interface: Simplify complex information found in crypto applications, such as domain terminology and detailed quote charts. Create an intuitive UI with each screen serving specific purposes, avoiding overcrowding with unnecessary graphic elements. Use a concise palette with contrasting colours to highlight important information or call-to-actions without distracting users from functionality and content.
Challenge #3: Instilling more product trust
Vague explanations coupled with the difficulty in rolling back or disputing transactions through customer support can erode trust in Web3 products. As such, UI/UX designers face the challenge of effectively conveying the immutability of user transactions recorded on a public ledger.
Web3 design requires additional security warnings to help users avoid accidental loss of assets or risks due to subpar interface. Anticipating user needs and ensuring their expectations align with transactional outcomes are vital for establishing trust in your product.
Solution #1: Educational content
Cryptocurrencies, being relatively new compared to traditional assets, often cause users to stop using certain applications due to fear of the unknown and perceived issues. Web3 UI/UX designers should give significant consideration to the low awareness of the domain and its opportunities.
Some ways to provide educational content throughout the user journey:
Onboarding tutorials that explain key concepts
Readily available instructions for every step
Informative blog within the app or official website
Explanatory visual infographics and tutorials for different features or functions
The benefits of not only your product but also blockchain and digital assets should be communicated through various channels, ranging from landing pages to in-app guides. Highlight how your platform’s transactions do not require intermediaries, making them more cost effective. Or emphasise the enhanced security provided by the blockchain technology that you are using. Your goals are to improve user loyalty, increase retention rates, and reduce churn.
Solution #2: Design for transparency and security
Security of blockchain-based apps should be a top priority for Web3 developers and designers. If your product fails to adequately protect customer information and accounts, you risk not only significant financial losses but also the loss of clients and reputation.
Establishing trust requires safeguarding sensitive data and user funds. In terms of UI/UX, it is about creating a sense of security throughout your app. Some essential actions to take:
Implement security features, such as two-factor authentication, email verification, data encryption, and biometrics
Provide seamless visibility of all network events, such as transaction delays, estimated processing times, fund withdrawals, deposits, and real-time updates of wallet balances
Establish IP address monitoring to promptly alert users in case of sign-in attempts from unknown devices, browsers, or geographic locations not previously identified
Design an easy and quick process for users to instantly block their accounts and prevent fraud in the case of suspicious authorisation
Explain clearly the type of information you collect and the reasons behind it
Use visual elements like padlocks, shields, or seals to indicate secure connections, encrypted data transmission, or trusted third-party certifications
Offer accessible support channels, such as live chat, email, or community forums, where users can reach out with security concerns or report suspicious activities
The basis for fostering trust also involves accuracy, security, and credibility. All these factors tie to transparency. You will need to explore ways to make blockchain easy to understand while being transparent. In practice, this could mean:
Break down all the fees before the user makes a transaction, including gas fees
Show every transaction status, along with an estimated (and mostly accurate) waiting time
Introduce certain security measures, such as blocking from copy-pasting in certain steps
Explain ‘invisible’ security protocols, such as the encryption method
Note that designing for trust and security is an ongoing process that requires collaboration with the design, development, and security teams. Your objective is to make your users feel comfortable and secure while using your product.
Conclusion
As more Web3 projects emerge, having a new standard for UI/UX design is paramount. Blockchain-based apps often introduce new concepts, complex interactions, and unfamiliar user experiences that hamper growth in adoption. While users are attracted to creative product designs, they also need assurance that their assets and personal data are protected. It is impossible to control the trustless, permissionless nature of Web3, but designers can predict what may go wrong and help prevent those occurrences. Getting this fine balancing act done right is an art that still needs to be mastered.