Welcome to Detached Digest! This regular publication is dedicated to covering all things related to web3 UI/UX, published exclusively on my profile. Here, you’ll find my latest ideas and prototypes, as well as insights and analysis on the newet trends in the industry.

Who am I?

Hello there! My name is Christian (malandraj), and I am a passionate designer with 4 year of experience in Web3. My expertise lies in creating exceptional user experiences for Web3 projects while promoting a human-centric design culture.

If you would like to learn more about my work, please visit my website.

Week #2

As the week of Web3 research draws to a close, it's time for the customary rundown of the week's ideas. This time around, our main focus has been on mobile wallets, and it's safe to say that we are witnessing a renaissance in the world of Web3 on mobile.

With such exciting developments in progress, I'm eager to see where this industry will be headed in the coming months.

Bringing Apple’s Mission Control to mobile wallets

Taking Control: Managing Connected Apps with WalletConnect

Context

In my opinion, Wallet Connect is one of the most important pillars of Web3 infrastructure. It recently celebrated its 5th anniversary, and its Web3Modal has been widely adopted by almost every app and wallet in the industry.

However, while we can easily connect our wallets everywhere, we may face challenges in managing disconnections, especially for wallets that have to provide global management for Web3 activity.

The concept I am presenting is an Apple-inspired approach that emulates mission control gestures and behaviors to easily check connected apps and disconnect. While not a breakthrough feature with significant benefits for user adoption, it would improve usability by replicating familiar UX.

One aspect that deserves more attention is the idea of providing a lock button to prevent accidental disconnections. This is something I often experience on my iPhone, as I have become a compulsive swiper after several years of use.

Remarks

As the Web3 industry strives towards a refined user experience, integrating gesture-based approaches could play a significant role in creating a more user-friendly environment. By tailoring actions to familiar approaches, we can help reduce the learning curve for users and make Web3 more accessible.

Web3 life in a widget

Enhance Your Mobile Experience with These Four Essential Widgets for Your Home Screen.

Context

Lately, I've observed a shift in the market as it increasingly targets mobile as the primary touchpoint. The imminent mobile wallets war is particularly intriguing to me. What's interesting about mobile apps and wallets is that most of the competition boils down to who can provide the best user experience. While testing more than five mobile wallets, I've noticed that very few invest in the development of widgets, which is a bit disappointing.

Given that much of the activity in Web3 operates asynchronously (such as waiting for a transaction to be approved, a governance vote to pass, or an NFT edition to end), widgets seem like a no-brainer way to keep users informed about ongoing activities without needing to open the app repeatedly.

As an initial concept, I've designed a set of four widgets that focus on:

• Tracking portfolio earnings and losses

• Keeping track of the number of NFT mints

• Checking temporary results for a single vote proposal on Snapshot

• Tracking average gas levels

Remarks

Designing widgets is no easy feat, as it involves handling a broad range of information. During the design process, I had to find a good balance in delivering the most meaningful information for each activity within a small space.

Each widget needs to be well-spec'd out to fit every edge case. For example, the Snapshot widget won't work with different types of voting, such as weighted or ranked votes. Nevertheless, I believe that the effort required to find design solutions is well worth it for a mobile-first wallet. Widgets are powerful tools, and any Web3 mobile experience without them is incomplete.

Conversational Wallets

Revolutionizing User-App Interactions: How Conversational UIs Can Streamline Wallet Activities and More.

Context

In today's world, messaging has become a ubiquitous part of our daily routine. With 90% of people worldwide comfortable with chats and related user experiences, digital chats have successfully educated a vast number of users to recognize buttons, system states, and actions necessary to handle a conversation.

This concept aims to showcase how common wallet activities can be adapted and seamlessly integrated into a simple chat experience.

The prototype presents a use case where users can track the state of a swap made on Uniswap and employ the speed-up audio pattern from messaging apps to increase the gas tip and boost transaction speed.

Some key aspects to consider include displaying only essential information to assist users in checking an activity by answering critical questions:

What’s the purpose of the transaction?

I am swapping ETH for DAI on Uniswap.

Which wallet/account is being used for the transaction?

I might have multiple accounts set on my wallet app, I need to be sure I am on the right address.

How much am I paying?

Displaying the value in dollars helps the user understand how expensive the transaction is.

What’s the current status for the transaction confirmation?

Use dynamic visual components, such as a progress bar, to give a clear idea of the time remaining and network traffic.

Is it taking too much time?

If the transaction is taking too much time, use a 1.5x/2x button to boost the transaction speed. The clicked button state shows the cost of the tip increase.

What if I want to check the transaction on Etherscan?

Provide an external link for a deeper look into the operation on Etherscan.

What’s the estimation time for the operation to be confirmed?

Visualize the estimated time and provide status feedback by using checkmark/cross icons to confirm the transaction has been confirmed.

Remarks

In order to increase user adoption in the Web3 space, it is important to incorporate familiar patterns wherever possible. Conversational UIs provide a great opportunity to achieve this goal by utilizing common language, following established conventions, and utilizing familiar concepts. By doing so, users will feel more confident and comfortable when interacting with on-chain operations.

Final Recap

The second installment of Detached Digest is drawing to a close. Throughout this issue, we have explored three main approaches for enhancing wallet experience:

• Gestures

• Widgets

• Conversations

All of these approaches share a common goal: to simplify the user experience by promoting standardization through established conventions. Reducing the Web3 learning curve is critical if we hope to achieve broader adoption.

Detached is a web3 research project, founded by malandraj, that is dedicated to examining and exploring Web3 UX. Their mission is to offer innovative concepts, ideas, analysis, and prototypes that will help to push the boundaries of Web3 technology.

If you like the idea and want to support the project:

and don’t forget to follow me on Twitter.