Proposal: Redesign the User Interface of Safe's Home screen

The Safe landing page is incredibly busy, with no clear information hierarchy or guidance on what the most valuable call-to-action may be.

Among the existing calls-to-action, the Safe Home screen offers the following user actions:

  1. View assets

  2. Meet the new Safe (which is usually the place for “Mobile app download”)

  3. Home (Main Nav)

  4. Assets (Main Nav)

  5. Transactions (Main Nav)

  6. Address Book (Main Nav)

  7. Apps (Main Nav)

  8. Settings (Main Nav)

  9. What’s New (Main Nav)

  10. Help Center (Main Nav)

  11. Read-only (appears as a CTA despite the fact that it’s unavailable to the user)

  12. Connect wallet

  13. View all transactions in the queue

  14. Use transaction builder

  15. Use Wallet Connect

  16. Dodo

  17. DAOhaus

  18. Drain Account

  19. Request Finance

  20. Ramp

  21. Explore Safe Apps

  22. Support Chat, (lower right)

That nets out to twenty-two distinct paths that a user may take once they are connected to the Safe dapp, which is suboptimal for both the user and Gnosis Safe:

  1. The user is overwhelmed with options, and is more likely to become frustrated as they navigate the UI searching for the feature they truly need.

  2. Safe is not able to create or capture maximum value as they would otherwise, primarily due to a theoretically higher bounce rate, lower conversion rate among users, and possibly even lower retention.

Safe Improvement Proposal:
Validate the above hypothesis through user research paired with robust analytics. Subsequently, rank the most valuable user flows across Safe’s user profiles – accounting for unit economics, cost of acquisition, customer lifetime value, etc. Leveraging the data available, redesign the UI so that it highlights the highest-value user flow(s), reducing the amount of friction for the user, and removing any existing duplication of features. Any call-to-action which is low-value for users to be redesigned in accordance with the updated information hierarchy, and/or hidden within the main navigation.

3 Likes

Hey zkt and thank you for taking a closer look at our dashboard.

I agree, that there surely is room to optimize the dashboard UX and reduce the number of calls-to-action. After all, this is only v1 of the Dashboard. For new and inexperienced users, the current version is undoubtedly a bit overwhelming. Ideally, we personalize the dashboard further (as we do now with the listed Safe Apps) and make it more customizable, to allow the dashboard to be the most useful entry point for every user of our very heterogeneous user group. We would like to give more power to the user to self-determine what is valuable to them, instead of opting for metrics that are not applicable and/or do not (yet) play a role for us as an open-source and free-to-use interface.

2 Likes

@zkt If you have some references for good dashboard implementations that are compatible with our use case, I would love to take a look.

1 Like

Hey @jomoormann – appreciate that. I don’t believe these examples are going to be mind-blowing for you, however two examples did come to mind – one of which is web2, and one which is web3. However, both of them have essentially the same underlying architecture from a UI standpoint:

Betterment robo advisor / wealth management fintech co:

For me, the key common elements that are missing from the SAFE interface are:

  1. A clean list of assets or accounts which the user can view at a top level, which is organized vertically in the center of the screen, allowing them to scroll down and review all assets and click into any of them as they see fit.
  2. A primary CTA in the top right corner
  3. Clear information hierarchy, showing the category of assets (Cash, investments, Net worth, etc. - for Betterment, and then for Zerion: Tokens, NFTs, History, Assets, etc.

They allow the user to focus on one thing at a time, vs. taking all of the information in at once.

Does that help?

Zerion: