EXPERIMENTS

Preface

Last week, Cam’s experiment pushed on styling and bringing in retro-inspired design language into the wallet. This week, I expanded on his designs, thinking through more user flows around chain switching, connection/personal/transaction requests, wallet pages, and flatter/modern styling rooted in the tactile nature of retro design.

The Journey

Process:

During the exploration phase, our team’s design process follows the double-diamond design thinking process. On a daily basis, I explore many designs and then synthesize to converge on 1-2 solutions. The next morning, I present the designs to the whole team where we walk through our thinking and design decisions. We align on those principles where we can, pose areas of curiosity, and I design the next iteration, leading us closer to the final design. This week, I generated 3 versions of the dub wallet that improved in functionality and polish after each iteration.

V0

I started with the designs and derived some principles from what we found appealing:

• Have as few layers and layouts as possible
• Balance static vs dynamic/contextual parts of the wallet
• Two sizes: default and expanded
• Retain tactile feeling of buttons

These principles helped ground future design iterations.

V1

Separating the network and the connect buttons in the wallet

Drop-downs for chain switching Example of a connection request (condensed and expanded) Sub-menus for seeing ETH, NFTs, transaction history and settings

V2

With V2, I took feedback from team and aimed to improve the design/experience to feel more cohesive.

I explored chain switching through a hover menu with a more modern, native feel than a drop down. This way the user can vertically switch between chains and horizontally switch between spaces in the browser, establishing the spatiality.

One challenge with the occasional request is that the wallet grows and shrinks even in the default view. To solve this, I kept the space used for prompts in the same size when there’s no request and added some dynamic information into it such as shortcuts or gas.

Also, users want to see how much ETH they have in a wallet at a glance, so I added that to the top of the wallet.

Side Panel for wallet switching and Teenage Engineering-inspired wallet design

V3

In V3, I added textures and patterns for a harmonious blend between retro/hardware and modern/software elements.

Design Questions (in order of importance)

Through these explorations and iterations, I found additionally key questions to answer through our designs.

1. Static vs Dynamic areas

   How do we indicate different parts of the wallet to different types of actions (ex: top is for quick glance, middle is for information, bottom is to take action)?

2. Utility of the Screen

   In the area above the buttons, what do we show users when there is no request? Shortcuts? Gas? Pending Requests?

3. Pending Requests

   When a user gets a connection request from a page but temporarily backs out of it, how should we bring the user back to the request?

4. Showing wallet/chain in tabs

   When/how should we indicate what wallet or chain a specific tab is connected to?

   When to show chain that the wallet is on on the tab itself

5. Hold to confirm transaction

   With requests such as personal signatures or transaction signatures, how can we add healthy friction to reduce accidental clicks and encourage caution?

6. Connected Wallet vs Viewing Wallet

   How do we indicate that a wallet is currently being used vs in viewing more obviously?

Next steps:

As the team wraps up restructuring the code base, I hope to flesh out complete user flows with this design by next Wednesday to implement in our browser. The next experiment will be video heavy to give a detailed picture of the UI/UX/feel of the product.