Preface
This week, I worked on designing higher fidelity designs for our wallet. First, we moved from a retro design to a flatter, more modern wallet that is still rooted in retro and tactile interactions Second, we settled on only two states and two heights for the wallet Third, we removed any non-essential features that we weren’t planning on implementing in the near future
Visit the following link to see the full gallery of wallet designs and user flows: https://tiny-thunder-24f.notion.site/Hello-Wallet-Gallery-e04002007c7b418f99b3c4d5346243bd
Areas to Build On
Pending Requests and Pending Transactions:
We currently have two different tabs for transactions: One for active transactions and one for past transactions. However, this mental model starts to break when thinking about pending transactions. In internal testing, when a user confirms a transaction in the queue tab and wants to check on the pending request, they go back to the queue tab. We can place the pending transactions in the queue tab, or we can consolidate everything related to transactions into one tab. We need to test this with users to know what works best.
Making requests more active:
The current pending and transaction requests look a lot like an online transaction confirmation page. However, we can definitely grow add more intentional delight to this experience.
Transaction History and Browser History:
In the dub browser, you’ll be able to see both your wallets’ sign/transaction histories and your browsing history. Instead of making them two separate things, we want to create a one stop shop for all of your internet browsing: both web browsing and blockchain interactions. I need to explore this in the coming weeks.
The Display Real Estate:
In the center of the wallet is a black box. Inspired by small displays in hardware products such as calculators, Macbook touchbars, and Teenage Engineering products, we wanted to use this real estate to provide context, ground the user in their activity, and add character to the wallet. Currently, we show connection requests in the display. However, we’re now asking what else we can add to the display. For example, we’re going to prototype using the display to show what state of a transaction the user is in (Review, Transaction Pending, Confirmed). We could also show shortcuts and widgets. Future designs will explore all of these ideas.
Toggle Transaction Spend info:
When looking through Transaction History list, users were split on whether the list should show only the value sent for the transaction or the total amount (value + gas). We settled on creating a toggle to see the fees in the total amount, similar to what Airbnb does when showing listing prices with and without fees.
Icons:
Our current tab icons are from the Apple SF Symbols library, mostly used as placeholders. During testing, the icons were a major source of confusion. We’ll be working on custom icon designs that clearly indicate that the tabs are for tokens, NFTs, Transaction History, and Request Queues.
Next Steps
In the coming week, I’ll be polishing designs as Cam builds it out in parallel, testing with more users through Figma prototypes and the full browser. I will also be going back to interaction design in SwiftUI to infuse delightful micro-animations into the experience