Product Design

Blockchain.com NFT Marketplace

Role

Design Stakeholder

Team Size

6 Stakeholders

Time Frame

2022

Some title text

Some title text

Introduction

In early 2022 NFTs were on fire and all the rage on in the internet and real life. Given the context of time, Blockchain.com wanted to build out a way of viewing and even buying NFTs right from the wallet experience.

Key Goals

In order to build this NFT experience we scoped out the necessary feature set which includes:

A smooth experience for users to view their own NFTs and browse collections

Much like other NFT platforms, we aimed to have a personal collection view of owned NFTs

Build out an in-app NFT marketplace to house various collections

Being able to filter, sort and browse various collection on Ethereum

Provide a way of bidding, selling and transferring NFTs

Transacting is the core of any marketplace, so we set out to do just that much like Opensea or Rarible

Market Research & Brass Tacks

This project required us to look at other industry leaders and do some market research, which consisted of Opensea, Rarible, and the like. We noted the main features and functionality that would be possible for our in-app experience.

Opensea.io Marketplace with a wide array of media types

Rarible.com Marketplace focusing solely on image based NFTs

Component build-out for the NFT marketplace spanning desktop & mobile

Design System

As I continued building out this product, my need for reusable components unique to this NFT world was continuing to fester.

In coordination with our designer who oversees the core design system, I began to build out a dedicated component library for NFTs.

While I did build as much as possible with our wallet core design system, the NFT tailored system helped with speed and efficiency. Even though most of the project was scrapped, we did eventually merge most back into the core design system.

Transactional Design

Originally at the conception of this project, we intended for their to be buying, selling and transferring of items and collections. Even though this part of the product would eventually be removed, I still took the time to build out the screens and flows for each transaction type.

Auto-wrapping ETH for users was one way of simplifying buying & bidding

Stripping Away

At around the 6 month mark, it was an unfortunate end of the road for our marketplace product as we would be scaling back to only view-only model back into the wallet.It is at times like this that I act fast and pivot effectively, which is what I did. Immediately archiving and sun setting my work rolling into the view-only designs. I was able to salvage some of the prior work which helped with timing and efficiency.The end result was a very limited flow that allowed users to import and view their owned NFTs right from the wallet.

The deconstructed NFT experience in-app to view & import owened NFTs.

Also crafted explainer UI to guide users when landing on the empty state.

Some title text

Final Thoughts

Prior to this project, my usage of NFT platforms was basically non-existent so I learned a lot on how this all works via using other platforms and from other stakeholders. During my time with this project, we built out a nearly complete NFT marketplace where you could bid, sell and transfer NFTs.

Personally I also was able to build out a new design system and also adapt quickly to the changing demands of the business for our view-only product offering.

While I hope to one day see an NFT marketplace design come to fruition, the learning and experience was worth every pixel. #WAGMI