Lion Blau
A PORTAL TOWARDS WEB3 NATIVITY
PORTAL was a web3 hot wallet designed for the new and advanced crypto user. As a cross-chain mobile wallet, it provided a rich user interface for interacting with smart contracts and augmented experiences of dealing with blockchain-based dApps.
The web3 ecosystem is in its nascent stage: currently being built by crypto-native developers and builders, it is inaccessible to non-crypto native users. Portal will enable users to easily access web3 by activating web2 UX best practices and fundamentals, like usefulness, usability, accessibility, and enjoyability, with effective onboarding processes and by-now basic features that fulfill users' expectations in using an interconnected, digital product. In order to create a product that delivers an effective portal to the iteration of the internet, the entire UX process was followed through: from studying blockchain technology and cryptography, to contextually observing current wallet usage, from user research to user testing, with the aim to create a web3 experience of web2 standards.
Reconfiguring and augmenting UX for the future
In light of the experiential novelty that blockchain-based internet usage engenders, it was essential to conceptualize the differences between the already solidified web2 user attitudes and behaviors and their potential future transformation in web3. This exercise enabled me to imagine what a practical web3 experience might need in terms of the necessary augmented implementations regarding a mutation of user behavior. Through contextual analysis and research, I compared traditional web2 usability heuristics and their most common or high-level ways of performance with their current changes in an effective web3 human experience. We might call this part and parcel of Human-Decentralized Computer Interaction--a fundamental step in understanding the product's context of existence and beginning to carve out potential paths to follow.
Design Principles for decentralization & web3
Certain product design fundamentals crystallized that web3 products must follow to more effectively access users' web2 mental models, tangibly actualize the underlying decentralized and distributed technology's value for the user, and reach across the divide currently observable between web2 and web3 native users. These range from education to user interface design and exist concerning the current state and needs of the network in the early 2020s, where lingo, ecosystem purpose, and dynamics of applications are still vastly inaccessible.
-
Enable and support blockchain and web3 literacy
-
Allow for different levels of data exposure according to need and level
-
Focus on visual and experiential consistency across a single and all applications
-
Transparency of transactions to clarify all actions and data (from @Beltran)
-
Manage the time and wait of users interacting with smart contracts
-
Make use of web2 design patterns with "similar" applications and utilities
-
Offer guidelines, help, knowledge base, and support throughout usage
-
Design for trust (from Sarah Mill's Blockchain Design Principles)
Flows
These are the first two flows that built the ground for Portal. Interestingly, by closer inspection, one can see two distinctly web3-native interactions appear: approving and signing transactions represented with key and signature emojis. Additionally, external links direct to block explorers and other blockchain-based features.
.avif)
Interacting with smart contracts on the blockchain by approving and signing transactions with bottom sheets
I have designed different iterations for users to interact with smart contracts and decentralized applications on the blockchain. Whether they want to send cryptocurrency to other wallets, approve actions on-chain, sign transactions while interacting with DeFi protocols for, e.g., swapping, or simply log in with their keys to web3 social media protocols such as Lens, contextual bottom sheets open up to guide the user through job completion.Certain web3 design fundamentals were crucial at this stage to offer the new user the felt security needed and offer customization of, for instance, so-called gas fees. Furthermore, by providing contextual help, the user is guided with confidence throughout these actions.
Signing transactions for dApps
Customizing Transaction Fees
Sample transactions for swapping tokens with Uniswap implementation
I have included a "Kill Switch" on the top right of the dashboard for users to rapidly isolate their wallet from any interaction and permissions given to the blockchain. That way, when the user receives a notification that a widespread and dangerous scam is ongoing, the user can set in motion the necessary actions to be safe.
The user can choose which network they are interacting with dApps from inside the browser. An icon on the top right nav bar opens the network sheet.
Kill Switch
Since the last bull run in 2020/21, scams and wallet drains have exacerbated, and smart contracts such as revoke.cash have begun answering to user needs of revoking allowances given to DEXs and other protocols.
Portal's browser includes bookmarks and shortcuts to last visited dApps and websites. The user can personalize the browser homepage to, e.g., show current gas prices and recent on-chain bounties
.avif)
Portal's browser includes bookmarks and shortcuts to last visited dApps and websites. The user can personalize the browser homepage to, e.g., show current gas prices and recent on-chain bounties