/mqdappstore

A Web3 DApp store built using https://www.dappstorekit.io/

Primary LanguageTypeScript

This is a dApp store created using dApp Store Kit. Documentation of the kit is here.

alt text

UX Optimizations & Choices:

  • Accessible search bar: Help users get to their desired app listing faster rather than scrolling through the entire list of apps. On mobile, the search bar is accessible through a click of a button on the bottom right of the screen, a pattern designed for easy finger access.

  • Main menu: While there are many categories of dapps, 3 are chosen to cover >90% of user needs - DeFi, Games and All Apps. This selection could possibly change in the future. As of now, most users are users of DeFi and Games, hence these 2 categories are prioritised for visibility over the others.

  • Displaying of blockchain logos: Strategically placed at various locations, allowing users to get a quick glance of which chains the app that they use are deployed and live on, and providing the context to let them filter apps by chains to narrow the search process.

  • Use of Modal: The pop-up modal comes up whenever a project's button is clicked on. The modal design pattern is chosen over the typical page switching to help users get detailed information of a project while allowing them to switch to other project context quickly. The modal width is set sufficiently wide enough so user focus can retain in the white area.

  • Use of Colors: The dAppStore is designed to be minimal and grayscale to enhance the colors of dApp and blockchain logos. We are used to associate colors with various blockchains, for example red with Avalanche, purple with Polygon and yellow with Binance Smart Chain. Brand colors are deliberately toned down so users can get a context of which chains and dapps they are looking at without additional cognitive load.