Index

Marketplace

A landing page that also serves as the main storefront view for the Marketplace app, containing a variety of collectibles offered by both the brand and other users. The storefront is the primary page for users to browse and discover collectibles available for purchase.

Content presented on this page is split into sections, and each section contains a range of collectibles matched by type, theme, or other relevant criteria.

Sections are not fixed — their order, contents, and other parameters are subject to periodic adjustments based on market research, stats, and ongoing A/B testing.

The storefront should also be subject to personalization as soon as feasible and when enough data is acquired so that the collectibles presented become relevant to the interests and spending habits of the individual user, resulting in a different offer for each logged-in user.

Sections

The design preview contains versatile section types that should be understood as a baseline for future adjustments and updates. These can be used as-is without changes or can serve as a starting point for introducing unique section types.

<aside> <img src="/icons/light-bulb_lightgray.svg" alt="/icons/light-bulb_lightgray.svg" width="40px" />

Implementation tip: Ensure there is a hassle-free way to edit the order, details, and contents of sections to enable low-effort changes to the storefront. A solution that allows pushing changes to production while skipping staging would be a significant business benefit.

</aside>

Pre-designed sections feature the following building blocks:

Block Name Display Description/Requirements
Header Always Max 24 characters. Used to mark where a section starts in the UI and what it contains. For example, “Trending Auctions” or “Notable Collections.”
Header Icon Optional 16x16 [px] icon displayed next to the header and used to accent a section with graphics. Should be used sparingly and intentionally.
Timer Optional A progress bar with a timer expressed in DD/MM/SS format, used to introduce time-based and urgent offers, e.g., “Flash Sales.”
Method A method used to display collectibles within the section:
• Big Stack — display 3 collectibles or collection snippets as larger tiles.
• Scroll Stack — display 4 or more collectibles or collection snippets in a slider.
• Table — vertical list of 5 or more collectibles or collection snippets with additional information shown.
Table Header Always — only for the “Table” method When the Table method is used, the table view should feature a Table Header.

Aside from the standard sections and mechanics, there is also a special section type for full-screen banners. While this section type is very situational (e.g., used for a logged-in user instead of a hero), it should be possible to use it on a page alongside regular sections.