MetaMask / metamask-extension

:globe_with_meridians: :electric_plug: The MetaMask browser extension enables browsing Ethereum blockchain enabled websites
https://metamask.io
Other
11.71k stars 4.79k forks source link

Document usability studies on: Redesign of account types' signification #22740

Open raulmono opened 5 months ago

raulmono commented 5 months ago

In a year's time accounts in MetaMask will be very different. There will be smart contract accounts, accounts created by snaps, non-EVM accounts, NFT accounts, account groups (and much more!). It’s important we consider the design for these new account types across all three clients (mobile, extension, portfolio) before we start building all of this. The scope for this redesign will be the redesign of account components across the whole user journey from onboarding to sending a token, which will involve: account setup, account details, accounts list, and transactions. This will also focus on extension and be limited to SRP accounts, imported accounts, accounts created by Snaps, and NFT accounts.

raulmono commented 4 months ago

The research study was completed and got 7 responses testing the onboarding concept, account details, token sending, and signification of account types. We got plenty of insights to keep iterating on accounts signification redesign.

This is what we tested:

These are the results: https://app.usertesting.com/workspaces/2016915/study/5006563/metrics

A brief summary of the findings by Will Kim

People do not have a firm grasp of what Smart Accounts are

Participants were the most clear about MetaMask account options, much less so about the other categories on the page

We should add some sort of link or hover ability that explains the difference in account types

6/7 participants do not know what Snaps are

Participants do not have a firm understanding of passkeys

Creating a Smart Account flow was relatively easy for all participants to complete

Benefits of Smart Accounts over SRP or Hardware wallet accounts

Not all participants selected their new Smart Account to send a test transaction

Most participants said it was easy to tell the differences between their accounts

No major issues with the account details page

At this point, it seems that the areas we could focus on are:

  • Explaining Smart Accounts and other account types (either in page or linked externally)
  • Explaining what passkeys are
  • Reassessing categories (maybe a card sort test)
AlexJupiter commented 4 months ago

Will has documented the findings here.

Next steps for @raulmono :

raulmono commented 3 months ago

Here are a few iterations based on findings considering upcoming changes and explorations by the Core and Assets teams regarding new components, interactions, and information architecture proposed to the main wallet view.

Overview of the main wallet multiverse:

Accounts Multiverse.png

Based on the potential new main wallet view and in collaboration with Rag, Amanda, and Yanrong, I came up with some iterations to signify account types:

Other ideas.png

These range from adding the account tag beside the account picker to proposing a sidebar panel to navigate between accounts.

Account tag

Combine actions.png

Accounts sidebar panel

Combine actions (1).png

The latest iteration consisted of a less radical change, including:

Example:

Latest iteration.png

All these designs can be found here in Figma.