This portfolio is under construction — be patient :)
← Back to work

QUADRATO

Web3 NFT Product Design Interaction Design

NFT protocol democratising fractional ownership standards on Solana

Role Lead Product Designer
Timeline 2 months · 2023
Platform Web · Solana
Tools Figma, Midjourney
Quadrato

The Product

A revolutionary digital platform that translates a complex NFT protocol into an intuitive experience for creators, developers, and collectors. It redefines how we perceive digital assets, offering infinite variations and new ways to interact with collectibles. Developed in just three weeks, the final product delivers a fresh, versatile ecosystem built for exploration and experimentation.


The Problem

NFTs exist in a web2 world

Currently, most digital assets rely heavily on technologies that require centralised infrastructure. As a result, the vast majority of them fall short in their attempt to provide a trustless environment.

NFT projects have short-life

A significant percentage of projects that launched an NFT collection did not survive long enough to provide the promised services. While many were able to generate initial engagement, they lacked efficient tools to keep track of user feedback.

Lack of shared resources

The current NFT standards across different blockchains lack composability, making it difficult for tools built on top to easily integrate with other projects at the same level. Furthermore, existing protocols lack scalability to accommodate new features required by the community.

The Solution

A protocol that enables custom standards definitions

Generalised metadata architecture — metadata structures can be defined by anyone.

Authorisations on metadata

There are different types of authorities available to manage assets, both for users to manage their items and for creators to maintain the value of their projects.

Composability at its best

The protocol allows for high interoperability between various standards built on top, enabling developers to access metadata and verify parameters directly on-chain.


NFTs Web3 dapp

on Solana

Our team faced a tight deadline to create a solution for the NFT market and participate in the "Grizzlython" event on the Solana blockchain. We rose to the challenge and developed a MVP — Web3 Dapp on Solana that allows on-chain editing and creation of fungible tokens. This solution is unique to Solana blockchain and provides unparalleled flexibility and customization for NFTs. Using Solana's fast and efficient blockchain technology, we were able to deliver a user-friendly and functional Dapp in record time.

Note:

This article does not pretend to explain the behaviour of the dapp from a technical point of view, but rather to give a presentation of the dapp with a strong focus on design.

Warrior bear and flower vase NFTs

The Proposal

Quadrato metadata program

Is the main contract that allows for the management of Roots, Extensions, and Metadata. An asset owned by a user is defined by the SPL token, the Root, and the metadata instances.

Root

There can only be one root. Associated with one SPL token, and it contains the SPL token's address.

Metadata instances

Store information about the asset, and an infinite number of instances can be associated with a single Root/asset.

Extensions

Store metadata instance data structures. Each metadata instance derives its structure from an extension and can only store data following that structure.

Quadrato protocol architecture diagram

The Target Audience

Our primary target audience for our product was the artists and creators of the Solana ecosystem and the jury of the event. However, we recognise the infinite applications of NFTs and the potential for widespread adoption in the future.

Therefore, our goal was to address the needs of all users involved in crypto-space and NFTs, especially young people around the world, and encourage them to contribute to and enrich the protocol. Our solution offers unparalleled flexibility and customisation for NFTs, making it ideal for both experienced and novice users.

8.5M+
NFT wallets on Solana
$0.00012
Cost of minting an NFT using state compression
32.0M+
NFTs on Solana

Benchmark

This benchmark aims to analyse competitors and similar projects on the Solana blockchain with similar functions, purposes, design, and look & feel. Although these projects still use Web integration and aren't fully on-chain like our product, we stand out by offering a unique protocol that goes beyond buying and selling. Our platform empowers creators and artists to build their own customisable collections with flexible standards, allowing them to showcase their full imagination.

01 / 03
Metaplex

Metaplex is a revolutionary project that utilises Solana blockchain technology to transform digital art and collections. It offers a complete ecosystem with tools to create, sell, and trade customisable NFTs. Its decentralised marketplace and community-driven approach drive innovation and the growth of digital art. Metaplex is a pioneer in the future of digital art on the blockchain and probably the most used as a standard.

Still a web2-web integrated dapp.
Metaplex NFT creation UI Metaplex — Anyone can be a creator
02 / 03
Magic Eden

Magic Eden is one of the most widely used marketplaces in the field of NFTs, especially one of the most common in Solana. Although our project is not based on a marketplace, Magic Eden serves as a study for its functionalities, modern style and as a general marketplace idea and marketplace explorer.

Still having the same problem.
Magic Eden — Shy Ones banner Magic Eden — NFT grid
03 / 03
Rarible

Rarible is another major marketplace used for buying and selling collectibles (NFTs). It offers a wide variety of options and incorporates graphic and functional codes that require in-depth study. However, as a multichain marketplace and web-integrated platform, it doesn't fully meet the needs of our project. It is also not very flexible when it comes to creating your collection, as it lacks personalised options.

Limitations in functionality and operability.
Rarible — MutantApeYachtClub Rarible — second screenshot

User Flow / Showcase #1

In this case, the user is not creating a new SPL token, but rather utilising one from their own collection. The goal is to enhance the token's functionality by adding various standards that serve different purposes and use cases. The main task at hand is to review the details of the token and incorporate additional utilities to optimise its value as an NFT.

User flow diagram
Figma prototype — full flow overview

Screens

Landing Page Quadrato landing page
Explorer Explorer
Connecting Connecting
User's Assets User's Assets
Asset detail Asset detail
Standards Explorer Standards Explorer
Standard detail Standard detail
Asset detail after adding standard Asset detail after adding standard

Concept

We meticulously studied the typography, drawing inspiration from various references and benchmarks within the Solana blockchain ecosystem, including Wormhole, Star Atlas, and others. Our focus was on maintaining consistency throughout the web dApp, aligning elements such as colours and component structure with the overall concept.

Typography

We meticulously studied the typography, drawing inspiration from various references and benchmarks within the Solana blockchain ecosystem, including Wormhole, Star Atlas, and others. Our focus was on maintaining consistency throughout the web dApp, aligning elements such as colours and component structure with the overall concept.

Chakra Petch Bold 401234567890
Header
Inter Regular 241234567890
block text
IBM Plex Mono Medium 181234567890
Subtitles
IBM Plex Mono Medium 161234567890
Button
IBM Plex Mono Regular 161234567890
Menu
IBM Plex Mono Regular 141234567890
Button
IBM Plex Mono Regular 121234567890
Details

Color

We are looking for a range of colors that complement the project's concept, evoking futurism, trendiness, deep space, and above all, high contrast and vibrant colors in line with the world of Web3 and NFTs.

Greyscales using along the website
#333333
#4F4F4F
#828282
#BDBDBD
#E0E0E0
#F2F2F2
Main colours
#EB5757
#F2994A
#FFC000
#F2C94C
#219653

Component set and specs

This is a brief description of the main components used in the dapp — intended to provide an idea of how everything was conceived: specially structured and consistent.

Component set and specs diagram

Micro-interaction

Subtle animations and transitions reinforce feedback throughout the dApp — hover states on NFT cards blur the background and surface metadata, buttons respond with colour shifts, and wallet connection triggers a smooth modal slide-in.

Effects

Glassmorphism is used sparingly for overlapping panels, paired with drop shadows and glow accents on interactive elements to maintain the Web3 dark-theme aesthetic without sacrificing readability.


That's it for now!

Feel free to connect with me for any Web3-related discussions, proposals or feedback.