The Home Screen design and layout is currently made for mobile as well as only a limited number of applications. The layout makes it hard to find and navigate to the apps you want to use. The current browser has a lot of friction when trying to submit apps to into the browser as there is no automated way of doing so.
An improvement could be opening up the browser window and making the best use of the space at hand.
Allow for automatic submissions of apps
Enable the ability for users to add, remove and re-order apps for faster app navigating
Allow users to favorite the apps they use the most
Enable shortcut keys for quick access to apps
2. App Store
Currently there is no App Store but many in the community as well as on Blockstack Core have talked about the need for an app discovery mechanism such as this.
Solutions and/or enhancements
Think out goals and then requirements for the app discovery mechanism and then start capturing ideas on an inspiration board.
App Store with a layout similar to the apple App Store.
App dashboard where users can use traditional filtering for quick app discovery
3. Navigation
The current navigation seems to be working now that we have simple and self-explanatory icons over descriptive text. But the placement may need to change depending upon the layout of the rest of the content. If there is a Home screen, App Store, etc. Whether or not the browser becomes a stand alone application and to what extent. As of this second I personally feel they could be a bit larger and fit better into the over all feel of the UI.
Solutions for making the navigation more usable could be to pull the elements to the edges of the window allowing for better use of space.
4. UI Design
The current state of the UI is still in a bit of disarray as opposed to cleanliness, utility app feel, etc. Although it's in a better state than it's previous predecessor, the UI is still a bit ad hoc as the design was created based upon a much different set of requirements than what we see today. The flat UI design works well but currently lacks depth with a wrapper/bounding box and box-shadow. This is discussed further in the Profiles section of this review.
Some solutions for a much better UI experience could go in two different routes visually;
Flat UI design. ie. Airbnb, etc.
Traditional generic UI design. ie. Chrome, Firefox, Safari, etc.
Both directions work but I personally feel that going down a new, modern path of flat UI design is where we are headed and will assist in being a market separator.
One additional piece that will make a difference is to ensure that the UI stay neutral in feel, functionality and color. In doing so it will allow for greater focus on apps, profiles, etc.
5. Type
Currently there are a few to many variables in the total type set. Although we've transitioned over to a simpler type style, Lato, and have applied it throughout both the browser and the brand, there remains a wide variety of type sizes and weights. In doing this the UI can become quite untidy.
Reduction and better consistency throughout the browser will allow for better legibility resulting in a better experience through faster navigation throughout the product.
6. Color
Currently we are in transition when it comes to the overall color of the browser. There has not been time to do a proper retouching of color based upon future goals/requirements of the browser. The color has quickly transitioned to neutral and a simple black and white color call was made for quick application of the neutral theme.
7. Use of neutral space
Again there is a lack of proper use of neutral/negative space throughout the browser's UI. As previously mentioned, this is a result of the design requirements changing from mobile design back to desktop.
Once a more defined set of requirements are complete, there will be an opportunity to address this wrapper/bounding box and box-shadow issue for desktop.
8. Profiles
The profiles are currently a bit off from what the approved design was to be. There are some card like features such as a bounding box with box-shadow that have not yet been applied as well as the new colored background to provide depth and emphasis on the white card like feel seen below..
This layout may change of course with upcoming transition to a fully native Blockstack Browser/App.
9. Multiple usernames
Currently the multiple username process is broken. It is difficult to understand how things work. Also, there could be better wording around the ID navigation as well. Currently the ID nav link says "IDs" which is ok if you were to click on the button and then see multiple ID's. But the user only sees one and is expected to click "More" to view more than one ID.
Once the user navigates to the multiple ID's view, there is limited information on each ID. It would be nice to see the ability to choose a different view, compact and extended that would allow for a broader view of the ID's but also allows for a compact quick view.
10. Wallet
The current wallet is simple and easy to use for the most part. But it would be nice to see a more traditional wallet with all the "copy" paste functionality we are accustom to in wallets like "Coinbase", etc.
11. Support - Live?
Currently we have a support button that takes the user to the Blockstack Forum where they can learn more. As this is fine for a quick fix it would be a much better experience for the user to easily and quickly get a response. Adding intercom capability would be a very nice feature with the addtion of a possible "in app FAQ".
12. Advanced Settings
Again the current state of settings was designed for a simple mobile view while following the previous button system for quick deployment in the super fast redesign. It would be a much nicer experience to list out all the settings where the user can simple scroll down the page, find what they want and execute what they wish. ie. Onename, Google Chrome, Spotify
13. Global enhancements for better UX
Overall providing a feeling of self or ownership would be a nice touch to the application, subliminally signifying a self-sovereignty. This will also evoke a more social application feel.
14. Messaging, on-boarding & copy
Currently the browser has had a round of simplification of copy, on-boarding and messaging which has resulted in a much greater experience than before. On-boarding via it's own page would allow for more space to provide clear instructions and messaging so that the user understands all implications of the on-boarding actions they are making. The current copy within the browser could also be more simplified in language for the layman and where need be, sectioned out more technical/advanced language for the developers.
Blockstack Browser Review
1. Home Screen
The Home Screen design and layout is currently made for mobile as well as only a limited number of applications. The layout makes it hard to find and navigate to the apps you want to use. The current browser has a lot of friction when trying to submit apps to into the browser as there is no automated way of doing so.
Solutions and/or enhancements
2. App Store
Currently there is no App Store but many in the community as well as on Blockstack Core have talked about the need for an app discovery mechanism such as this.
Solutions and/or enhancements
3. Navigation
The current navigation seems to be working now that we have simple and self-explanatory icons over descriptive text. But the placement may need to change depending upon the layout of the rest of the content. If there is a Home screen, App Store, etc. Whether or not the browser becomes a stand alone application and to what extent. As of this second I personally feel they could be a bit larger and fit better into the over all feel of the UI.
Solutions for making the navigation more usable could be to pull the elements to the edges of the window allowing for better use of space.
4. UI Design
The current state of the UI is still in a bit of disarray as opposed to cleanliness, utility app feel, etc. Although it's in a better state than it's previous predecessor, the UI is still a bit ad hoc as the design was created based upon a much different set of requirements than what we see today. The flat UI design works well but currently lacks depth with a wrapper/bounding box and box-shadow. This is discussed further in the Profiles section of this review.
Some solutions for a much better UI experience could go in two different routes visually;
Both directions work but I personally feel that going down a new, modern path of flat UI design is where we are headed and will assist in being a market separator.
One additional piece that will make a difference is to ensure that the UI stay neutral in feel, functionality and color. In doing so it will allow for greater focus on apps, profiles, etc.
5. Type
Currently there are a few to many variables in the total type set. Although we've transitioned over to a simpler type style, Lato, and have applied it throughout both the browser and the brand, there remains a wide variety of type sizes and weights. In doing this the UI can become quite untidy.
Reduction and better consistency throughout the browser will allow for better legibility resulting in a better experience through faster navigation throughout the product.
6. Color
Currently we are in transition when it comes to the overall color of the browser. There has not been time to do a proper retouching of color based upon future goals/requirements of the browser. The color has quickly transitioned to neutral and a simple black and white color call was made for quick application of the neutral theme.
7. Use of neutral space
Again there is a lack of proper use of neutral/negative space throughout the browser's UI. As previously mentioned, this is a result of the design requirements changing from mobile design back to desktop.
Once a more defined set of requirements are complete, there will be an opportunity to address this wrapper/bounding box and box-shadow issue for desktop.
8. Profiles
The profiles are currently a bit off from what the approved design was to be. There are some card like features such as a bounding box with box-shadow that have not yet been applied as well as the new colored background to provide depth and emphasis on the white card like feel seen below..
From issue https://github.com/blockstack/blockstack-browser/issues/928
This layout may change of course with upcoming transition to a fully native Blockstack Browser/App.
9. Multiple usernames
Currently the multiple username process is broken. It is difficult to understand how things work. Also, there could be better wording around the ID navigation as well. Currently the ID nav link says "IDs" which is ok if you were to click on the button and then see multiple ID's. But the user only sees one and is expected to click "More" to view more than one ID.
Once the user navigates to the multiple ID's view, there is limited information on each ID. It would be nice to see the ability to choose a different view, compact and extended that would allow for a broader view of the ID's but also allows for a compact quick view.
10. Wallet
The current wallet is simple and easy to use for the most part. But it would be nice to see a more traditional wallet with all the "copy" paste functionality we are accustom to in wallets like "Coinbase", etc.
11. Support - Live?
Currently we have a support button that takes the user to the Blockstack Forum where they can learn more. As this is fine for a quick fix it would be a much better experience for the user to easily and quickly get a response. Adding intercom capability would be a very nice feature with the addtion of a possible "in app FAQ".
12. Advanced Settings
Again the current state of settings was designed for a simple mobile view while following the previous button system for quick deployment in the super fast redesign. It would be a much nicer experience to list out all the settings where the user can simple scroll down the page, find what they want and execute what they wish. ie. Onename, Google Chrome, Spotify
13. Global enhancements for better UX
14. Messaging, on-boarding & copy
Currently the browser has had a round of simplification of copy, on-boarding and messaging which has resulted in a much greater experience than before. On-boarding via it's own page would allow for more space to provide clear instructions and messaging so that the user understands all implications of the on-boarding actions they are making. The current copy within the browser could also be more simplified in language for the layman and where need be, sectioned out more technical/advanced language for the developers.