Design Exploration: Cross-Chain Asset Fragmentation
Crypto design systems are underexplored, early stage and often lack proper guidelines. Due to the fast paced environment, edge cases often face design challenges without clear solutions.
At Galaxy, we strive to help crypto mature, with the goal to make it more accessible. Our Venture Platform team conducted a design case study exploring concepts for cross chain asset iconography.
A Cross-Chain Future - Billions of dollars in crypto assets have been exchanged across different blockchains, signaling that the industry is moving to a cross-chain future. The design consequences of this have yet to be thoroughly researched.
A Multi Bridge World - In the example below, USDC is bridged between Polygon and Solana. After this process, the bridged assets are not fungible or interchangeable and thus have different names.
Asset Fragmentation - Multiple bridges between blockchains creates a fragmentation of assets. This results in user confusion and poor UX as there is no standard naming convention for bridged assets.
Fragmentation Challenges - Multiple versions of an asset introduces usability problems for users and developers. How do you choose which one to use? Which one is more secure? Which bridge is faster? The list goes on.
Core Design Components
/01 Asset Icon: Tokens are commonly identified by their icon. A quick glance determines which asset it is.
/02 Prefix & Name: Bridged assets must have a consistent and legible name to differentiate from its peers.
/03 Chain & Bridge: Due to the large variety of bridges and asset chains, they need to be defined.
Wireframing - Given the three core components of a bridge asset, we explored different icon permutations to encapsulate data in a concise way. Below, twenty iterations showcase the individual component designs.
Next, we apply the specific case to the wireframes to discover a fleshed out design. This helps identify potential constraints, layout problems, and determine the best version.
Prefix & Naming Exploration
Icons are not always available, and the asset naming convention enables readers to quickly identify the underlying asset. Twelve different concepts illustrate ways to layout the prefix and naming.
Prefix & Naming Application
We then apply the specific case to the naming concepts to get a fleshed out design. This helps identify potential constraints, layout problems, and help determine the best version.
Chain & Bridge Exploration
Naming Iteration - We are next iterating on concepts to showcase the origin chain and bridge. An icon and name can only encapsulate so much information. A concise description aims to fill these knowledge gaps.
Chain & Bridge Application
Naming Iteration - In the next step, we apply the specific case to the naming concepts to get a more fleshed out design. This helps to identify potential constraints, layout problems and help to determine the best version.
Combining individual concepts can create a huge number of different versions. In the following exercise, we explore different naming structures.
/01 Merging - After breaking down the naming components into individual elements, we can combine different prefix concepts with other naming conventions. This concept highlights the chain after the asset.
/02 Merging - Every concept consists of a combination code representing a pair of concepts that form a new variation. The chain and bridge components can vary in multiple ways.
/03 Merging - Combination code 11-09 is showcasing a concept that is consisting of a separate prefix for the asset, as well as a shifted layout for the bridge and chain. The focus is set on the prefix and asset name.
Icon Selection & Guidelines
Our Winner - After analyzing the individual concepts, we selected an iconography layout that best represents all underlying information. The winner is a ring layout with a badge on the bottom right.
Three main components build the foundation:
Outer Ring: The Bridge
Inner Circle: Asset
Bottom Right Circle: Origin Chain Badge
Iconography - Spacing for the individual components needs to be defined. The origin chain component is 2/5X where X is the width and height of the entire icon. The badge always sits on the bottom right of the icon.
Iconography - The spacing around the asset name and iconography should also follow guidelines. The space between the asset and typography as well as around the icon should be X.
Future Outlook & Considerations
Multi Hop - Assets will traverse multiple chains before reaching its destination. Since assets might be path dependent, it is crucial to encode this property into the iconography.
Assets from Multichain Apps - There is a future where applications natively live on multiple blockchains. How should assets from these applications be depicted given their multichain properties?
Multiple Issuing Chains - ETH only comes from Ethereum, but assets such as USDC are natively issued on multiple blockchains. How should this corner case be handled in the iconography of assets?
Wrapped Assets - Users often get IOU assets when they deposit into a lending protocol, DEX, etc. Are there potential standardizations awaiting? (Think USDC -> cUSDC). Circle's CCTP is the closest solution we have for this today as it lets users, including bridges, burn and mint native assets.