Simplifying web3 | NFT trading — UX Case Study
Owning an NFT was once as challenging as riding a bicycle to the top of a mountain.
What you will learn
- Introduction | General Overview
- Hypothesis
- Design Thinking | Thought Process
- Design Process
- Conclusion
To better understand this case study, let’s briefly review the web3 | NFT landscape.
General Overview
NFT has become a hot topic since 2020, and we all know why! “The fastest way to riches” While it may seem easy, it is not as simple as we imagined. Many people, including myself, found it difficult to trade NFTs, not because they didn’t know how, but because they couldn’t afford to do so — from the high transaction fees (Gas Fees) to not wanting to lose their money on rug projects.
Although OpenSea is a multi-chain marketplace, it was built on Ethereum Blockchain, so, to buy or sell NFTs on it, you should have an Ethereum wallet, similar to SolSea, Magic Eden, and Solanart that were built on the Solana ecosystem (you must have Solana to access these marketplaces).
A brief history of NFT
This case study uses several blockchain/NFT terms, so let’s learn their meanings
- What is a Smart Contract?: A smart contract is a self-executing contract, with the terms of the agreement between buyer and seller being directly written into lines of code. The code and the agreements contained therein exist across a distributed, decentralized blockchain network. (examples are; ETH, Sol, Polygon, etc.)
- What is a Marketplace?: A marketplace simply means a place/site where NFT traders connect, buy and sell their assets
- What is a Multi-Chain Marketplace?: A multi-chain marketplace here refers to an NFT marketplace where users can easily transact NFTs but with different tokens
- What is a Wallet?: This simply refers to the place we store our crypto/NFT assets, also known as “Vault” (Examples are; Metamask, Phantom, etc.)
NFT was first created in May 2014 but got its full potential in 2020–2021.
Unlike cryptocurrencies that are fungible, NFT is simply a non-fungible asset, or a uniquely identifiable asset, which is a part of the blockchain system that is associated with a particular digital or physical asset. The ownership of an asset/NFT is recorded in the blockchain system and can be transferred by the owner, via a smart contract (i.e. ETH, Sol, Polygon). An NFT trader purchases an asset using smart contracts in his wallet, these NFTs are also stored in his digital wallet and moved from his digital wallet to another person’s digital wallet.
Hypothesis
There is a high drop-out rate towards the end when it comes to the payment section where users connect ETH to purchasing an NFT
Problem statement
How can we improve the whole experience where we can give users knowledge/tutorials before committing to a purchase?
Solution statement
Goal: To design a platform that is transparent with additional fees so it won’t be a diversion to the conversion rate on NFT trading.
To redesign a platform that is transparent on all the information and guide users from entering the platform to purchasing an NFT so it can lower the drop-off rate and elevate the conversion rate on NFT marketplace towards checking out.
— I once had a creative block about solving the major NFT problems
Name of Author: Yahaya Bilyamin Muhammad
Portfolio: Personal Website Or Behance
Design Process
In most cases, I can break down large tasks/case studies into smaller, simpler steps for easier comprehension
“A design process is a tool that helps you break down large projects into smaller, easier-to-handle stages”.
Below is a detailed diagram of my Design Process for this Case Study
Discover
This is otherwise known as ‘Empathy’, the first step in design thinking & process. This is to help us understand the users better. With empathy, I was able to conduct and document detailed research and UX best practices to get a personal grasp of users’ pain points and needs
Research
In my empathy survey, I was able to carry out my research in segments; Qualitative & Quantitative research analyses.
Qualitative Analysis is research carried out in the fields i.e
- Contextual inquiry
- User interview
- Ask an expert
Quantitative Analysis is a research type that is usually done in the office, seat, or over the phone (internet). Examples are
- Competitive analysis
- Survey and questionnaires
- Analytics
- Web search
But for this project, I was able to make do with a few
User Interview
After finalizing what I wanted to solve in the web3 space, I met with a few NFT traders and potential users to understand their pain points and empathize with them. Having human interaction, outside your comfort zone, can help boost your idea of how people feel while using a product.
Using this module gave me a peak idea of users’
- Pain points
- Grief
- Needs
- How they interact with products and
Ask an Expert
It is important to speak to experts in a particular industry; I wanted to learn more about the industry I was working in, hence the reason I found the need to ask an expert who is more vast in the industry. This helped me understand better what the users need.
Examples of questions asked;
How long have you been in the industry?
How many marketplaces have been used?
How many crypto wallets have you used so far?
What exactly has been the reason you stayed this long?
What are your pain points in the industry
Web Search
It was important for me to search the web for an insightful outcome (positive and negative results), with this behavior, I was able to identify the following pain points;
Users prefer to spend their entire time on a particular site, rather than shuffling between multiple sites
Users feel safer when they connect their crypto wallet to one particular site
Nft traders feel exhausted each time they have to use a different NFT marketplace because of the limited networks (Crypto asset); One can only connect to Opensea with an ETH Smart contract (network) or Magic Eden which requires Solana.
Define
At this stage, I was able to deduce crucial information from people I interviewed about their goals and pain points in the NFT/web 3.0 space, If there are things they feel should be included or reduced to help facilitate the usage of web 3.0 products. After my Discover stage, I was able to interview more than 10 persons “User Interview” and “Ask an expert” including “Web search”. But below, I created personas for just two users; an Expert and a regular user
Persona
After careful research on the need for this product, and solving issues concerning NFT trading, persona helps me document the users’ key touchpoints, goals, and pain points.
User I
Meet Aminu, a web 3.0 expert with over 4 years of experience in DeFi, GameFi, VR experience and NFT, and web 3.0 community management from Nigeria, West Africa
User II
It was an interesting chat with Kasey, an NFT enthusiast I met on LinkedIn. He showed his keen interest in trading NFTs despite being a full-stack developer, he can switch between these two industries. Kasey shared his pain points and goals, which are similar to the first person I interviewed.
Empathy Mapping
I used an Empathy Mapping method to get a complete grasp of the users’ behaviors and decision-making process. An empathy map is a simple, easy-to-digest visual that captures knowledge about a user’s behaviors and attitudes. It is a useful tool to help
User Journey Map
After my rigorous research, it was time to deeply express the users’ pain points, challenges, and improvements using the Customer Journey Map, a diagram that visually illustrates the user flow through my site from beginning to end.
Ideate
The ‘Ideate’ phase is a phase I used in generating ideas in sessions which includes; brainstorming and user-flow
Ideation is a creative process where designers generate ideas in sessions (e.g., brainstorming, the worst possible idea). It is the third stage in the Design Thinking process. Participants gather with open minds to produce as many ideas as possible to address a problem statement in a facilitated, judgment-free environment.
Brainstorming
I used the ‘Brainstorming’ method to generate ideas to solve clearly defined design problems in my project.
Card Sorting
To better assess and determine the way information is grouped, labeled, and organized on the project, I was able to use the Card Sorting process.
Card Sorting is a method used to help design or evaluate information architecture.
Information Architecture
To help users locate information and complete tasks more effectively and sustainably, I incorporated Information Architecture into my organization, structure, and labeling of content
Information Architecture is the process that focuses on the organization of information within digital products.
User Flow
By analyzing my detailed Information Architecture, I was able to create a User Flow diagram to illustrate how the product can be easily utilized by the user
User flow is a chart or diagram showing the path a user will take in an application to complete a task
Wireframe
We are now ready to visually showcase the products and solutions we offer to the NFT industry as a whole. The process began with a Low Fidelity Wireframe to a High Fidelity Wireframe (Lo-FI & Hi-Fi), which are just sketches of my design, then to visual designs and prototypes
A wireframe is a diagram or a set of diagrams that consists of simple lines and shapes representing the skeleton of a website or an application’s user interface (UI) and core functionality.
Low Fidelity Wireframe
Low fidelity wireframe is the first visual representation of my idea
High Fidelity Wireframe
High fidelity wireframe is a realistic prototype that closely resembles the final design of a project
Visual Design & Prototype
A prototype is a product built to test ideas and changes until it resembles the final product. You can mock-up every feature and interaction in a prototype.
Design System
Having a detailed design system (Typography, Iconography, Color Guide, Spacing, Auto Layouts, and Components) helped me to facilitate my design journey
Image Presentation — Marketplace / Homepage
Project Marketplace
Preview / Buy NFT
Go to Profile
Connect Multiple Wallets — View recently connected
Confirm Wallet Connection
My Collections
Unlist Asset / Edit Royalty Fees
Confirm Edit
Testing
After a completed visual design and prototype, I carried out usability testing through a variety of UX testing methods which includes card sorting, surveys, interviews, and observation this is done to collect information and feedback about usability and overall user experience from a couple of users during the design process
Feedback gotten from testing users is as follows:
Positive Feedbacks
The has improved my stay on NFT landing pages
Finally, I can connect with multiple wallets and find all my assets in one place
Being able to edit my already listed NFT royalty fees is keen to me, and I appreciate this improvement
I love the Multi-Chain feature this site provides
Negative Feedbacks
I am already used to on-chain marketplaces like SolSea and Opensea, switching to other marketplaces hasn’t really been my thing
This is really new and I don’t want to risk my money
Prototype Testing
The goal of my prototype testing is to test and validate ideas and my design. This stage is the final stage before handing off to the engineers
Go to prototype (Note: Only a few screens are responsive
Thank you for taking your time to read my Case Study; I will appreciate your criticisms and suggestions, and I am available for the position of UX Designer
Contact Info
Email Address: yahya.bmuhmmad@gmail.com
