MELD Design Diary 01

Ken Olling
MELD
Published in
4 min readNov 24, 2022

The MELD design philosophy is one of the core aspects of MELD product development. We are looking to solve many of the major UX and UI issues in the crypto space over the coming months. At the core of the philosophy is a desire to be better, regardless of success. Nothing is ever perfect or complete, it can and will always be able to be better.

In order to build a better product we need to question and consider new solutions for everything. This does not mean we will throw the baby out with the bathwater, but it can be a painful and sometimes error-prone process. We will make mistakes and we will have successes. Regardless of the outcome, we will evolve.

User Interface

A user interface needs to balance ease of use and benefits to create an experience that has a net benefit for the user. If the interface is very complex and brings little benefit, people will not bother to learn how it works. But if the benefits outweigh the learning curve then you have a successful product.

The MELDapp

The MELDapp is a cross-chain wallet operating as both a non-custodial wallet and an aggregator of wallet extensions such as Nami, Metamask, Trust Wallet, and Core Wallet among others.

The MELDapp is the primary interface to interact with the MELD protocol, it does four major things.

  • Aggregate assets
  • Move assets around
  • Supply to earn a yield
  • Borrow assets

We want the interface to be recognizable and logical to use. This does not mean it will be based on how wallets have been designed in the past.

MELD interface basics

The basic GUI structure

We have divided up the basic interface into activities at the top with Account being an overview. The Wallet is the place where you can get a detailed overview of all of your assets both in the wallet and linked via an extension. Staking is a place to stake many of your assets and generate a yield. Supply & Borrow is where you can supply assets to generate a yield and if you want to borrow against your supplied assets. Then finally Governance for the DAO voting.

In the main interface, we have roughly divided up where the subject is on the left, in this case, your digital assets. Then the adjective is in the middle to show the state and context of the subject and finally, the verb is on the right where you can do something with the subject.

Modality in the interface

The action area (the right panel) is where we introduce modality. The rest of the interface stays the same so the user can see the asset they chose, the details about the asset, and its state then the right-hand area will change to do something like supply or stake.

Example of modal panels.

MELD bar

We are maintaining a red bar at the bottom of the center area both for branding purposes and as a common focus area for common and key actions.

Use of the MELD red bar in the GUI

Dark/Light Modes

Examples of both dark/light mode

Our Design system

As part of the work here, we are building a design system to make it easy for designers and developers to be able to build new functionality and stay within the current design and GUI language.

MELD GUI Logo guide
MELD GUI Elements guide

Ongoing Design Research

Design research on the MELD native mobile app.

We are also working on the mobile native version of the MELDapp and doing GUI work on what it will look like and how it will work. We will share more in this area in the next Design Diary.

--

--