Pine Protocol: Designing UI for Exciting Marketing and Complex NFTfi Interactions 

Pine Protocol’s mission is to make NFTfi more accessible by offering the best, easiest to use, and most feature rich NFT lending platform available. As a peer-to-peer lending protocol, Pine helps people borrow against their NFTs, or earn yield as APY for providing liquidity in the for of a more fungible token: WETH, or wrapped Ethereum. 

Here’s how it works: 

A person seeking a loan against their NFT stakes the NFT into the smart contract as collateral, and a matched lender adds liquidity in the form of WETH value of an equivalent percentage of the NFT, anywhere from around 50% – 80% typically. So for example, if a user stakes an NFT worth around 1 ETH, they can borrow possibly up to 0.8 WETH. I say “possibly” because as a peer-to-peer lending pool, these terms are set by each party. Borrowers seek lenders with favorable terms and vice versa until there’s a match.

Early Version of the Pine Landing Page

The Problem

Users would often come to the Pine platform owning some assets but have a desire to own another specific asset. Sometimes, many times even, the user would be willing to trade some or even all of their owned assets for a special NFT they would want to acquire. However, this process of selling some assets to get the funds they needed could be difficult and confusing. For example, besides the fact that it would take multiple transactions, borrows, and trades to accomplish, (maybe even outside the Pine platform in addition to some on the Pine platform) it could also be difficult to calculate the results manually in advance of these multiple transactions. 

Additionally, Pine offers a program called “Pine Now Pay Later”, which allows a user to acquire a desired NFT asset and pay off it’s value over time. This works by locking the NFT into smart contract until the agreed upon financing is paid off.

Pine wanted to create an adjacent feature to their primary NFT loans offering: a dashboard that could make it easy to accomplish a bundle of complex transactions and trades in order to acquire a desired NFT also potentially including an option to use Pay Now, Pay Later.

The Solution

The solution was my design which I turned into the feature called “Forest Path”.

“Forest Path” Feature UI

The initial idea was to allow a user to “build” an optimal scenario

But because there would be a limited number of possibilities based on a user’s holdings (which we have knowledge of since the user connects their ETH address to be read by Pine), it was my idea to automate this process. We could detect what assets a user had on their connected public address, ask them what exactly they wanted to acquire, then automatically present them with various options that would fulfill their needs. By simply selecting a presented path, respective transactions would be queued and the user could simply sign them each in succession to attain the desired result with relative ease: the NFT they chose in the first step.

The feature consisted of 3 main portions dividing the screen for easy understanding:

1. assets that the user owned on their address
2. the desired asset(s) chosen by the user but not yet owned
3. options using what they have on their address

Additionally, Pine needed to design an experience around rewards given to their customers.

They wanted to create a fun way to open “Loot Boxes” with various prizes including their Pine Token that would be visually appealing and drive engagement.

Here’s what I came up with.

The original idea from the Pine team involved spinning a wheel. But this concept had very little to do with the Pine brand, which I would describe as a “high tech Asian art style, forest aesthetic.”

Pine Coins -> Pine Cones

Enter the Pineyata

Piñatas are fun, papier-mâché containers usually filled with candy and hung suspended in the air at children’s parties. Kids hit them with usually a stick or bat of some kind taking turns until they bread, spilling candy on the ground when everyone rushes to grab a share of the treats.

Initial Concept of a Pineyata
Illustration of a PineCoin

The 2 x 4 Pineyata Bat 3D Render