This is part 2 of the public design process of Scatter’s new UI. You can see the first article here.

I’ve come to the following conclusions based on a recent article that I posted which included a prototype of a new version of the UI for Scatter.

Some of my thoughts on this update

People find Accounts/Keys/Tokens terminology very confusing, and frankly I agree with them. What made this worse in the previous design was that there wasn’t a clear hierarchy defining what belonged to what. I’ve gone out of my way to put Keys first as they load accounts and tokens and are the source of all actions for users. When a user logs in, they should be presented with their vault, and the keys inside it along with apps. There are three main focuses for users that I need to target: a. As a wallet, b. As an application browser, c. As a way to manage their blockchain account, including their keys. I’ve created a clear separation between the three sections, and clear calls to action that pertain to each. Hopefully this will mitigate some of the previous confusion. People want to focus on activities and not on passive information. For Scatter this means a bigger focus on Apps and Keys, and less about seeing the current status of money in their accounts. I’ve gone with a 40/40/20 ratio that I think will allow for a more focused experience for users. Information density is important to users and I really missed the boat on this in my previous design iteration. The trend of large, easy to read typography is not popular when it comes at the expense of layout real estate. I’ve toned it down a lot and I hope that the more compact layouts and typography will allow users to see more of their critical information without scrolling or searching. Dropping a new user into Scatter today is asking too much of them. Having a guided flow is a must, with adding keys and adding apps as part of their journey being the end goal.

Take a look at the linked prototype above and let me know if this is an improvement in your workflows. Please leave feedback below.