LI.FI
LI.FI NFT Purchase Feature
LI.FI is a protocol that allows users to trade across various blockchains, venues and bridges. The task involved integrating into the product a new feature for NFT purchases.
LI.FI NFT Purchase Feature
LI.FI
LI.FI is a protocol that allows users to trade across various blockchains, venues and bridges. The task involved integrating into the product a new feature for NFT purchases.
LI.FI NFT Purchase Feature
LI.FI
LI.FI is a protocol that allows users to trade across various blockchains, venues and bridges. The task involved integrating into the product a new feature for NFT purchases.
LI.FI
LI.FI NFT Purchase Feature
LI.FI is a protocol that allows users to trade across various blockchains, venues and bridges. The task involved integrating into the product a new feature for NFT purchases.
Overview
Timeline
July 2024
Role
Product Designer / UI
Project type
Take-Home Challenge
Responsibilities
Product Design
UI
LI.FI Products & Features
API to swap, bridge, and zap across all major blockchains and protocols
Enables trading across all DEX aggregators, bridges, and intent-systems
↑ Newsletter Subscriptions
A widget interface for swapping, bridging or crypto-native checkout experiences.
Ensures Best price execution for any swap/bridge
The Task
"Imagine LI.FI's new feature enables customers to purchase an NFT using any token on any chain. Your task is to create an NFT purchasing flow. Pick any existing NFT marketplace and show your preferred checkout experience."
"Imagine LI.FI's new feature enables customers to purchase an NFT using any token on any chain. Your task is to create an NFT purchasing flow. Pick any existing NFT marketplace and show your preferred checkout experience."
"Imagine LI.FI's new feature enables customers to purchase an NFT using any token on any chain. Your task is to create an NFT purchasing flow. Pick any existing NFT marketplace and show your preferred checkout experience."
Current State & Possible Improvements
Current State & Possible Improvements
Current State & Possible Improvements
Current State & Possible Improvements
Before Li.FI integrated their widget into Opensea and Metamask you'd have to swap or bridge your tokens via other third party solutions.
Before Li.FI integrated their widget into Opensea and Metamask you'd have to swap or bridge your tokens via other third party solutions.
Before Li.FI integrated their widget into Opensea and Metamask you'd have to swap or bridge your tokens via other third party solutions.
Before Li.FI integrated their widget into Opensea and Metamask you'd have to swap or bridge your tokens via other third party solutions.
Current sub-optimal UX
Current sub-optimal UX
Current sub-optimal UX
Current sub-optimal UX
Despites the great improvement the integration brought, the experience is still somehow clunky for many reasons such as:
On Opensea's Wallet:
widget sizing
bridiging/swapping hidden inside Opensea's user wallet
opensea's wallet calls it a swap while what is actually happening is a bridge
you cannot choose the bridge you prefer.
On Opensea's Wallet:
If you use the integration in metamask, you can swap, but if you want to bridge you cannot do it inside the wallet, it takes you to the metamask portfolio website, so there's a heavy change of context.
Despites the great improvement the integration brought, the experience is still somehow clunky for many reasons such as:
On Opensea's Wallet:
widget sizing
bridiging/swapping hidden inside Opensea's user wallet
opensea's wallet calls it a swap while what is actually happening is a bridge
you cannot choose the bridge you prefer.
On Opensea's Wallet:
If you use the integration in metamask, you can swap, but if you want to bridge you cannot do it inside the wallet, it takes you to the metamask portfolio website, so there's a heavy change of context.
Despites the great improvement the integration brought, the experience is still somehow clunky for many reasons such as:
On Opensea's Wallet:
widget sizing
bridiging/swapping hidden inside Opensea's user wallet
opensea's wallet calls it a swap while what is actually happening is a bridge
you cannot choose the bridge you prefer.
On Opensea's Wallet:
If you use the integration in metamask, you can swap, but if you want to bridge you cannot do it inside the wallet, it takes you to the metamask portfolio website, so there's a heavy change of context.
Despites the great improvement the integration brought, the experience is still somehow clunky for many reasons such as:
On Opensea's Wallet:
widget sizing
bridiging/swapping hidden inside Opensea's user wallet
opensea's wallet calls it a swap while what is actually happening is a bridge
you cannot choose the bridge you prefer.
On Opensea's Wallet:
If you use the integration in metamask, you can swap, but if you want to bridge you cannot do it inside the wallet, it takes you to the metamask portfolio website, so there's a heavy change of context.
The general take is that the "purchasing an NFT" flow does not feel like a regular "purchasing a product experience" + we don't get a lot of clear feedback along the way of our purchasing experience.
The general take is that the "purchasing an NFT" flow does not feel like a regular "purchasing a product experience" + we don't get a lot of clear feedback along the way of our purchasing experience.
The general take is that the "purchasing an NFT" flow does not feel like a regular "purchasing a product experience" + we don't get a lot of clear feedback along the way of our purchasing experience.
Why should the user be guessing what next steps are? Why does it need to be context switching and performing other actions for achieving his primary goal?
As usual, the lack of similarity with non web3 mental models and design patters and UX is one of the most common drawbacks for crypto mass adoption.
Why should the user be guessing what next steps are? Why does it need to be context switching and performing other actions for achieving his primary goal?
As usual, the lack of similarity with non web3 mental models and design patters and UX is one of the most common drawbacks for crypto mass adoption.
Why should the user be guessing what next steps are? Why does it need to be context switching and performing other actions for achieving his primary goal?
As usual, the lack of similarity with non web3 mental models and design patters and UX is one of the most common drawbacks for crypto mass adoption.
Why should the user be guessing what next steps are? Why does it need to be context switching and performing other actions for achieving his primary goal?
As usual, the lack of similarity with non web3 mental models and design patters and UX is one of the most common drawbacks for crypto mass adoption.
Hyphotetical scenario
Hyphotetical scenario
Hyphotetical scenario
Hyphotetical scenario
1. A User wants to buy an NFT that is on the Polygon Network and needs to be paid in MATIC
2.The User is connected to the Ethereum Network and has sufficient ETH for the operation
3. User has no sufficient MATIC in any chain to perform the operation
1. A User wants to buy an NFT that is on the Polygon Network and needs to be paid in MATIC
2.The User is connected to the Ethereum Network and has sufficient ETH for the operation
3. User has no sufficient MATIC in any chain to perform the operation
1. A User wants to buy an NFT that is on the Polygon Network and needs to be paid in MATIC
2.The User is connected to the Ethereum Network and has sufficient ETH for the operation
3. User has no sufficient MATIC in any chain to perform the operation
1. A User wants to buy an NFT that is on the Polygon Network and needs to be paid in MATIC
2.The User is connected to the Ethereum Network and has sufficient ETH for the operation
3. User has no sufficient MATIC in any chain to perform the operation
Purchasing an NFT Flow
Purchasing an NFT Flow
Purchasing an NFT Flow
Purchasing an NFT Flow
Given the previous scenario I set up a basic flow with a possible solution and some basic Edge Cases.
Given the previous scenario I set up a basic flow with a possible solution and some basic Edge Cases.
Given the previous scenario I set up a basic flow with a possible solution and some basic Edge Cases.
Given the previous scenario I set up a basic flow with a possible solution and some basic Edge Cases.
First Sketches & Proposed Solution
My main drive and goal with the proposition was to reduce context switching and complexity while giving feedback to the user at every stage.
A way to do this was to integrate the whole process inside of Metamask (or similar) wallet, without requiring the user to leave the wallet and go to other websites for bridging assets. We should also use the language that would be used in an online e-commerce store, e.g.: "payment method", "purchase", and make the payment method selection as easy as possible.
First Sketches & Proposed Solution
My main drive and goal with the proposition was to reduce context switching and complexity while giving feedback to the user at every stage.
A way to do this was to integrate the whole process inside of Metamask (or similar) wallet, without requiring the user to leave the wallet and go to other websites for bridging assets. We should also use the language that would be used in an online e-commerce store, e.g.: "payment method", "purchase", and make the payment method selection as easy as possible.
First Sketches & Proposed Solution
My main drive and goal with the proposition was to reduce context switching and complexity while giving feedback to the user at every stage.
A way to do this was to integrate the whole process inside of Metamask (or similar) wallet, without requiring the user to leave the wallet and go to other websites for bridging assets. We should also use the language that would be used in an online e-commerce store, e.g.: "payment method", "purchase", and make the payment method selection as easy as possible.
First Sketches & Proposed Solution
My main drive and goal with the proposition was to reduce context switching and complexity while giving feedback to the user at every stage.
A way to do this was to integrate the whole process inside of Metamask (or similar) wallet, without requiring the user to leave the wallet and go to other websites for bridging assets. We should also use the language that would be used in an online e-commerce store, e.g.: "payment method", "purchase", and make the payment method selection as easy as possible.
