MELD is a startup that has developed a non-custodial wallet. The web application begins with core wallet functionality, gradually introducing more complex features such as Staking (to lock up assets to earn periodic rewards) and Supply & Borrow (enabling users to provide tokens as collateral in order to request loans).
When comparing crypto wallets like MetaMask, Nami, and Phantom, it becomes evident that each wallet is designed to support specific blockchains, each associated with its own native token. These tokens are primarily used to pay transaction fees (gas) and may also provide additional features such as swaps or exchanges.
For seasoned crypto users, handling multiple assets, performing swaps within a blockchain or between different blockchains, and taking advantage of trading opportunities are routine activities. However, these processes can seem complex and intimidating to newcomers, particularly those who are used to fiat currencies. The key challenge is to present cryptocurrency in a way that is approachable for the average user while still addressing the requirements of more experienced users.
Additionally, user management in the Web3 space is fundamentally different from that of traditional web applications. Instead of having comprehensive user profiles, we only have access to wallet addresses, which limits the available user data. This core difference necessitates a thoughtful and user-centered design strategy to create a product that is intuitive for both novices and experienced users, effectively bridging the gap in understanding within this intricate environment.
The main stage is divided into three uneven columns. The central column serves as the primary display area, showing the main card where users can view selected content. To the left, users can see an overview of their assets, while the right column provides relevant information and actions related to the selected asset.
By default, the right column displays an overview, but when a user clicks on an asset, both the main card in the central column and the information in the right column update to reflect the selection. If the user initiates any action, a drawer slides in from the right, covering the right column and preventing other interactions. This consistent behavior across the web application creates a familiar and intuitive user experience, guiding users on expected interactions even as they perform a variety of tasks.
The visual interface is organized around a central main card, smaller cards, accordions, and buttons. An exception to this design is in the Supply & Borrow section, where the side columns appear as black monoliths, breaking the layout into distinct information blocks. Cards within Wallet and Stake display varying levels of information, general or specific, depending on the context.
Though users requested a dark mode, light mode was initially planned but never implemented. Information hierarchy is established through careful use of typography—size and weight are key in prioritizing information. Given the often overwhelming amount of information in crypto, organizing data without overloading users’ cognitive capacity was one of the primary challenges in the interface design.
This example illustrates the wireframe analysis conducted during our daily design meetings, where we collaboratively describe and discuss workflows to ensure alignment and progress on our tasks. By utilizing wireframes, we can effectively explore various UI patterns, identify potential pain points, and establish validation checkpoints within the flow. This process allows us to detect errors early and prepare a comprehensive map for high-fidelity prototypes.
This workshop focused on gamification and explored several carefully selected ideas based on the Octalysis framework and specific business goals. Participants were given a budget, represented by "money," to allocate towards prioritizing various gamification mechanics. From this process, we developed a proposal for mechanics involving rewards, points, and badges, which is still in the early stages of design.
One of the most intriguing ideas that emerged was the decision to move away from traditional points systems. Instead, we proposed a logarithmic progression of performances as the core mechanic, directly aligned with business goals. This approach would serve as the engine for growing the user profile, ensuring progress feels meaningful and motivating. The overarching objective was to design a scalable solution that effectively encourages users to engage in desired actions while maintaining alignment with business objectives.
Animated example of how some of the interactions work in the application. Staking in MELD gives you an NFT as a receipt, but this NFT also works as the main card. This transformations gives an extra in the smoothness of the interaction inside the product.
