The Problem

Imagine you see an ad for a digital product and visit their website to sign up, only to be greeted with a request to "Connect your wallet." This scenario poses a challenge for the average Web2 user unfamiliar with cryptocurrency beyond its investment aspect. This situation highlights a crucial user experience issue in Web3 solutions and forms the basis of this case study.

—

Defining the Solution

Ethereum and DAPPs

Ethereum is a programmable blockchain that goes beyond simple payments. Instead of just conducting transactions like Bitcoin, it uses Smart Contracts — code that governs digital assets. When using Ethereum, you execute transactions that enable services to interact with your assets, allowing for a wide range of activities, from transfers to DAO voting.Decentralised applications (DAPPs) utilise these smart contracts to enable diverse activities.

Enter Quill

Quill is a BLS Wallet browser extension designed to facilitate engagement with emerging web3 solutions by leveraging Ethereum layer 2, enabling fast and low-cost transactions. My challenge was to create a product that appeals to users with varying levels of Ethereum literacy. With this in mind, I established several design benchmarks:

• Transparency: All financial data should be easily accessible, establishing trust through straightforward design.

• Accessibility: Actions and prompts should be intuitive to prevent confusion, especially for users with minimal Ethereum experience.

• Simplicity: Using wallets should be as straightforward as current online payment systems, with a focus on user education.

Research

I tested several wallets on the market, deriving several insights and opportunities from the collected data.

1. Giving users clear, concise information on the status and value of their tokens will enable them to engage more confidently with dApps.

2. Streamlining user interactions with simplified language will engage users with Ethereum's broader technology, helping them become more inquisitive and knowledgeable.

3. Maintaining a consistent design language throughout the journey will reduce friction and improve users' overall experience.

4. Simplifying dApp prompts into human-readable blocks will give users more confidence when initiating actions with third parties.

The Users

Based on the research, I developed three critical personas for the target markets:

• Knowledgeable: Familiar with the underlying technology, using competitor products and heavily invested in the technology, making multiple transactions daily.

• Artist: Interested in the concept of digital ownership, technologically literate and engaged, not familiar with NFTs.

• Enthusiast: Willing to be involved but needs to understand the tech, has some investments, makes less frequent transactions and is unsure about using tokens.

—

Designing the Solution

Defining the Journey

The design process began with detailed wireframes of all user journeys with simplified layouts, establishing clear guidelines for the following flows:

• Onboarding: How do users sign up for Quill, and what are their entry points?

• Wallet view: How can a user interact with their wallets and tokens?

• Transactions: How can a user send and receive tokens?

• Connecting a wallet: How does a user connect a wallet to a DAPP?

• DAPP interactions: How does a user interact with DAPPs, including prompts for the DAPP itself, such as permissions?

• Authentication: How does a user secure their wallets? How can they sign in or recover them?

Seeing what sticks

After completing the wireframes, I moved on to low-fidelity designs, translating the blueprint into a basic user interface, allowing for broad experimentation and quick iteration. The goal was to maintain a simple, un-opinionated design while developing an interactive prototype before committing to high-fidelity designs. With the prototypes in place, I initiated user testing, research, and iteration cycles to pinpoint our users' exact needs. This process led to a streamlined onboarding experience, focusing on detailed, step-by-step guidance while highlighting the benefits of Quill and Ethereum. Additionally, I refined the presentation of wallet-specific information for users.

Refining the concept

Before progressing to a high-fidelity prototype and final design solution, I developed several concepts to establish Quill's look and feel. These concepts were concise snapshots, rather than extensive sequences, aimed at simplifying data visualisation without sacrificing detail. Users should be able to quickly grasp the necessary information or know how to access it.After numerous iterations and discussions, I advanced with the concept shown below to the high-fidelity design stage. This design achieved the right balance between detail and clean simplicity, using subtle bursts of colour to highlight the most important actions on the screen.

Onboarding

The first and most crucial feature of Quill is the onboarding process. How does Quill keep users' attention once they download the extension, and how do we create an initial impression reflecting our fundamental values of trust and transparency? The idea was to present users with helpful information about Quill and Ethereum in general and what they can do to stay secure in the world of Web3 while providing a straightforward signup flow.

Visibility of Assets

In the main application, I wanted to create a consistent, single view for consuming various points, such as assets, transactions, and networks. On the left-hand side, users can choose between their available wallets (or view an amalgamation of them), with all associated data reflected on the right panel.Just as important as viewing available assets is seeing a history of how they have been used and with what services and applications. This is consistent with user expectations for similar platforms like banking systems. Quill leans heavily on these established paradigms.

Transactions

Transactions within the Quill interface proved to be one of the more complex workflows to represent. Again, users have certain expectations around clarity here, but unlike a typical bank transaction, an Ethereum transaction has many more moving parts. To this end, it was necessary to provide a branching path for advanced users who want more control and mainstream users who are more comfortable with an abstract view, as seen below. The challenge then became how to represent complex ideas such as a wallet address in a human-readable format.

DAPP Interactions

Chrome popups would facilitate interaction with DAPPs. These popups occur whenever a user acts on a third-party website that wants to interact with their Quill wallets. Similar to a mobile platform, these required more consideration regarding screen real estate. Rather than showing all available data as in the main browser view, an emphasis was placed on providing valuable prompts that users could use to find important information.Another consideration is that this view is primarily a utility for interacting with 3rd party applications, which means that the context is dictated by whatever action a user is already performing. For example, if I initiate a transfer inside a dAPP and Quill pops up to fulfil it, I don't need to see any other information unrelated to my current task.

—

Summary

Looking back on all the work done on this project, it's clear that we are still in the very early stages of establishing a design language and associated paradigms for Web3 technologies. It's an exciting and fast-developing space that Quill can contribute to.This has been a fairly broad look at my design process for Quill. The project was completed over three months, working part-time. In summary, the areas of development were:

• Research

• Ideation

• Wireframing

• Low fidelity designs

• Design concepting

• High-Fidelity prototyping

• User testing and feedback

• Iteration