Introduction: Turning Frustration into Innovation

It's 2021, I'm deep into the world of cryptocurrency—fascinated by the promise of decentralized finance, but equally frustrated by the complexity of the tools that were supposed to help me navigate it. One particularly draining experience involved trying to transfer Ethereum between two wallets. The process took nearly 15 minutes because I miscalculated the gas fees, and worse, the transaction failed without any clear reason.

That incident sparked a question that became the foundation for this project: Why does managing digital currency have to be so complicated?

This project represents my attempt to answer that question by redesigning a cryptocurrency wallet app with the user in mind. The goal was to create an experience that prioritizes simplicity, transparency, and trust—values that are often overlooked in this evolving space.

The Problem

The crypto industry is filled with apps that either overwhelm beginners with jargon or fail to provide advanced users with the tools they need. Most of the current wallets on the market face issues such as:

• Poor navigation and unclear action flows, particularly when sending/receiving crypto.

• Complicated fee structures that confuse users, leading to frequent transaction failures.

• Lack of trust due to missing or confusing security measures.

• Low adoption rates from beginners, who feel overwhelmed and intimidated.

The challenge was clear: How can we design a crypto wallet that bridges the gap between novice and expert users?

Research & Discovery

To fully understand the users, I conducted extensive qualitative and quantitative research:

User Surveys & Interviews

I distributed surveys to 100 participants who were either current crypto wallet users or had tried and abandoned one. I followed this with one-on-one interviews with 10 users from different backgrounds—crypto novices, casual traders, and experts. Here’s what I found:

Screenshot from a user-interview with a casual trader.

Key Findings:

1. Security Concerns:

   • "I don’t feel confident using these wallets because the security features are hard to find and even harder to understand. Why isn’t two-factor authentication more common?"

   • "Biometrics would make me feel safer. I can’t be expected to remember all these passwords and seed phrases."
     

   Onboarding Barriers:

   • "Setting up the wallet was a nightmare. I had no clue what a private key even was, and the app just threw me in without explaining it."

   • "After a week of trying to figure it out, I just gave up. It wasn’t worth the headache."
     

   Transaction Transparency Issues:

   • "I’ve paid more in gas fees than the actual amount I was transferring, and I didn’t know until after I hit send. Why isn’t that more clear upfront?"

   • "I don’t even know if my transactions are successful half the time. It just says 'pending' forever."
     

   Expert Feedback on Multi-Wallet Management:

   • "Switching between my wallets is a pain. I need to open each one separately, and it’s impossible to keep track of all my assets."

   • "There should be a way to easily toggle between wallets in one place. It’s way too fragmented right now."
     

   • 
     

   

   some of the questions I asked during the interviews
   

Screenshot of the User Journey map we came up with insights from the JTBD interviews. See full version here

Application of Findings

The insights gained from the JTBD interviews informed the design of the Bonadocs widget. By embedding interactive testing features directly into the documentation, the widget addresses the key pain points identified in the research. It helps developers like Alex test smart contracts in real-time without leaving the documentation interface, leading to a more efficient and productive workflow.

Solution Development and Testing

Design Process

After identifying the pain points and desired outcomes from the JTBD interviews, I set out to create the Bonadocs widget. The goal was ambitious: to embed a seamless, interactive testing environment directly within the Lido documentation. This meant enabling developers to test smart contracts in real-time without leaving the page. But we knew it wouldn't be easy. We faced several uncertainties right from the start.

Initial Challenges

Our team grappled with several questions as we embarked on this journey:

• Would embedding a widget within documentation disrupt the existing user experience?

• Could we make the interface intuitive enough for developers to use without a steep learning curve?

• How would we handle complex transaction parameters within the widget?

• Would querying the mainnet directly from the documentation be feasible and secure?

<Include screenshot of moodboard>

Solution Development

To tackle these challenges, we used affinity diagramming to organize and prioritize the feedback we received from the initial round of usability testing. By clustering similar pieces of feedback, we identified common themes and critical pain points.

Screenshot of an affinity diagram

With these insights, we moved into the rapid prototyping phase. Leveraging the existing design system from the Bonadocs team, we quickly developed low-fidelity prototypes to explore different design solutions. Rapid prototyping allowed us to test these solutions with users early and often, making it possible to iterate and refine the designs efficiently.

Screenshot of a typography system that is part of the Bonadocs design system which was available to me and enabled to prototype rapidly (rapid prototyping).

rough sketches of the widget

low fidelity wireframes for querying a method in a smart contract

moodboard

First explorations of the high fidelity ui

Userflow Reel

Screen record of the first UI exploration flow.

Usability Testing: Round Two

With the refined prototypes, we conducted a second round of usability testing. This round focused on validating the improvements and gathering further feedback. The key enhancements included:

1. Expanded View with Parameters: Allowing developers to enter transaction parameters directly within the widget.

2. Mainnet Query Option: Enabling real-life simulations by querying the mainnet, which required wallet connection.

3. Simplified Wallet Connection Flow: Adding an indicator to show whether the wallet is connected or not.

4. Method Descriptions: Incorporating an info tooltip to describe method parameters.

5. Const Transaction Params View: Introducing a tab view for const transaction parameters like From (address), Gas, and Gas price.

6. Read/Write Method Indicators: Clearly distinguishing between read and write methods.

During this second round of testing, participants praised the enhanced widget for its ease of use and the ability to test methods directly in the documentation, especially with real-life simulations on the mainnet. Here are some snapshots of their feedback:

These insights and feedback guided our final round of refinements, ensuring the Bonadocs widget was optimized for usability and productivity.

Userflow Reel – Revised

A screen record of the revised userflow.

Key Features and Their Impact

1. Mainnet Query Option

Feature Description: The Bonadocs widget includes an option to query the mainnet directly from the documentation. Developers can connect their wallets and run real-life simulations, which are critical for accurate testing.

Value and Impact:

• Realism: Testing on the mainnet provides developers with realistic results, ensuring their smart contracts work as intended in a live environment.

• Trust: Businesses can trust that their smart contracts are thoroughly tested and reliable before deployment, reducing the risk of costly errors.

• User Experience: The seamless integration of wallet connection and mainnet queries enhances the overall user experience, making the testing process more streamlined and efficient.

2. Adding Array Properties

Feature Description: The widget allows developers to add array properties, which can carry tuples of parameters. This feature is visible in the method parameters section, where developers can input complex data structures required for their smart contract methods.

Value and Impact:

• Flexibility: This feature supports the testing of complex smart contract methods, accommodating various data structures and ensuring comprehensive testing.

• Productivity: Developers can efficiently input and test complex parameters without leaving the documentation, improving workflow and reducing errors.

• Scalability: By supporting arrays and tuples, the widget can handle more sophisticated use cases, making it suitable for a wide range of smart contract applications.

3. Switching Between Method and Transaction Parameters

Feature Description: The widget provides an intuitive interface for switching between method parameters and transaction parameters. This is crucial for developers to accurately simulate different aspects of smart contract execution.

Value and Impact:

• Clarity: Clearly separating method and transaction parameters helps developers understand and manage the different aspects of their smart contract tests.

• Ease of Use: The intuitive interface reduces the learning curve, making it easier for developers to get started and achieve their testing goals.

• Efficiency: By organizing parameters logically, the widget minimizes confusion and potential errors, leading to more accurate and reliable testing outcomes.

Impact

Industry Recognition

Selected as part of the maiden Consensys fellowship program, showcasing the innovative approach and value of the Bonadocs widget in the web3 space.

Adoption by Key Players

Now actively used and supported by prominent teams such as Arbitrum, Superfluid, Compound Finance, Optimism, Base, Paycrest, and others, signifying its relevance and effectiveness in enhancing developer experiences.

Pioneering Web3 DX

We’re breaking new ground in web3 developer experiences with features like the playground, docgen, and widgets, which are unparalleled in the industry, offering a comprehensive solution that supports both the development and distribution of protocols.