01
Overview
For NFT investors, finding the next successful project is often a challenging and time consuming process.
Investors pour hours and hours just to scour numerous social platforms and websites for the latest project news and updates. All the while, they have to constantly avoid clicking on fake scam links and following false information to keep their investments safe.
So what if they could discover, learn, and invest in new projects from a trusted source all within the same, unified platform?
For NFT investors, finding the next successful project is often a challenging and time consuming process.
Investors pour hours and hours just to scour numerous social platforms and websites for the latest project news and updates. All the while, they have to constantly avoid clicking on fake scam links and following false information to keep their investments safe.
So what if they could discover, learn, and invest in new projects from a trusted source all within the same, unified platform?
For NFT investors, finding the next successful project is often a challenging and time consuming process.
Investors pour hours and hours just to scour numerous social platforms and websites for the latest project news and updates. All the while, they have to constantly avoid clicking on fake scam links and following false information to keep their investments safe.
So what if they could discover, learn, and invest in new projects from a trusted source all within the same, unified platform?
Duration
3 months
Team
Solo - Design Challenge
Role
UX Research
UX/UI Design
Branding
Prototyping
User Interviews
Usability Testing
02
Design Challenge
How might we design an NFT marketplace that allows investors to confidently find new, trustworthy, & valuable projects?
How might we design an NFT marketplace that allows investors to confidently find new, trustworthy, & valuable projects?
How might we design an NFT marketplace that allows investors to confidently find new, trustworthy, & valuable projects?
03
Seeking to Understand
I conducted secondary research and spoke with real NFT investors to understand the space and their pain points.
I spoke to 5 real NFT investors with varying expertise and gathered numerous notes during my user interviews.
A few key user interview quotes stuck out to me:
“I try to do as much homework as I possibly can to get as much information, because there’s a lot of bullshit out there.”
“There are so many scams all the time so it’s very dangerous and scary.”
“It was a very long time before I decided to buy my first one.”
“Look for a history on Twitter, LinkedIn, work portfolio”
“Bet on the team”
“It’s all about joining a community and believing in it.”
Using affinity mapping to organize all my notes, I synthesized these top 3 user insights that would ultimately guide my designs:
I conducted secondary research and spoke with real NFT investors to understand the space and their pain points.
I spoke to 5 real NFT investors with varying expertise and gathered numerous notes during my user interviews.
A few key user interview quotes stuck out to me:
“I try to do as much homework as I possibly can to get as much information, because there’s a lot of bullshit out there.”
“There are so many scams all the time so it’s very dangerous and scary.”
“It was a very long time before I decided to buy my first one.”
“Look for a history on Twitter, LinkedIn, work portfolio”
“Bet on the team”
“It’s all about joining a community and believing in it.”
Using affinity mapping to organize all my notes, I synthesized these top 3 user insights that would ultimately guide my designs:
I conducted secondary research and spoke with real NFT investors to understand the space and their pain points.
I spoke to 5 real NFT investors with varying expertise and gathered numerous notes during my user interviews.
A few key user interview quotes stuck out to me:
“I try to do as much homework as I possibly can to get as much information, because there’s a lot of bullshit out there.”
“There are so many scams all the time so it’s very dangerous and scary.”
“It was a very long time before I decided to buy my first one.”
“Look for a history on Twitter, LinkedIn, work portfolio”
“Bet on the team”
“It’s all about joining a community and believing in it.”
Using affinity mapping to organize all my notes, I synthesized these top 3 user insights that would ultimately guide my designs:
04
Defining the User
I created personas to humanize and define the users that I will be designing this product for.
Taking the learnings from my user interviews, I developed user personas to understand who I will be designing this product for:
Josh Nifty, the NFT expert and early adopter.
Josh is pretty familiar with the NFT and crypto scene and has a large disposable income to invest with. He thoroughly does his homework and secures his investments to avoid scams.
Curious George, the new NFT investor.
George is relatively new to the NFT space and wants to try his hand at investing. He’s curious and interested in learning about how NFTs, Web3, and cryptocurrency works
I created personas to humanize and define the users that I will be designing this product for.
Taking the learnings from my user interviews, I developed user personas to understand who I will be designing this product for:
Josh Nifty, the NFT expert and early adopter.
Josh is pretty familiar with the NFT and crypto scene and has a large disposable income to invest with. He thoroughly does his homework and secures his investments to avoid scams.
Curious George, the new NFT investor.
George is relatively new to the NFT space and wants to try his hand at investing. He’s curious and interested in learning about how NFTs, Web3, and cryptocurrency works
I created personas to humanize and define the users that I will be designing this product for.
Taking the learnings from my user interviews, I developed user personas to understand who I will be designing this product for:
Josh Nifty, the NFT expert and early adopter.
Josh is pretty familiar with the NFT and crypto scene and has a large disposable income to invest with. He thoroughly does his homework and secures his investments to avoid scams.
Curious George, the new NFT investor.
George is relatively new to the NFT space and wants to try his hand at investing. He’s curious and interested in learning about how NFTs, Web3, and cryptocurrency works
05
Defining the MVP
Marketplaces are complex systems and throw in new Web3 technology, and it really is no joke to build without defining a minimum viable product (MVP) first.
I decided to only focus on designing just 3 critical user flows that would allow investors to at least start investing on the platform. (Due to the time constraints, selling and creating NFTs would have to come after MVP.)
Sign In Flow:
All investors must be signed in by connecting a third party Web3 wallet in order to access their crypto funds and purchase an NFT.
(Unlike traditional marketplace where you access your account via an email and shop with a credit card, your account is automatically recognized if you have a Web3 wallet connected.)
Purchase a New NFT (Minting an NFT) Flow:
Investors enjoy discovering and investing in new project collections or drops that have not been created yet (like investing in a stock pre-IPO). This flow allows investors to be the first to purchase or mint a brand new NFT in a collection.
Purchase an existing NFT (Buy or Bid) Flow:
Once a collection of NFTs has been minted into existence, investors start buying or selling. I focused on just the buying flow for the initial MVP and ensured that investors could either place a bid or buy now.
Selecting and prioritizing key features based on user stories:
I considered a long list of user stories and selected only a few key features to include in the MVP.
Key design features include:
Prioritizing project details including mission, roadmap, team, FAQ, updates, and comments so investors can learn about the project without leaving the site.
Adding live gas indicators (gas are transaction fees that are constantly changing every minute) so users are not caught off guard by high fees.
Adding verification checks so users can trust the projects and creators they invest in.
Adding helpful guides and tips in appropriate locations so even new investors can learn how things worked in this new space.
Marketplaces are complex systems and throw in new Web3 technology, and it really is no joke to build without defining a minimum viable product (MVP) first.
I decided to only focus on designing just 3 critical user flows that would allow investors to at least start investing on the platform. (Due to the time constraints, selling and creating NFTs would have to come after MVP.)
Sign In Flow:
All investors must be signed in by connecting a third party Web3 wallet in order to access their crypto funds and purchase an NFT.
(Unlike traditional marketplace where you access your account via an email and shop with a credit card, your account is automatically recognized if you have a Web3 wallet connected.)
Purchase a New NFT (Minting an NFT) Flow:
Investors enjoy discovering and investing in new project collections or drops that have not been created yet (like investing in a stock pre-IPO). This flow allows investors to be the first to purchase or mint a brand new NFT in a collection.
Purchase an existing NFT (Buy or Bid) Flow:
Once a collection of NFTs has been minted into existence, investors start buying or selling. I focused on just the buying flow for the initial MVP and ensured that investors could either place a bid or buy now.
Selecting and prioritizing key features based on user stories:
I considered a long list of user stories and selected only a few key features to include in the MVP.
Key design features include:
Prioritizing project details including mission, roadmap, team, FAQ, updates, and comments so investors can learn about the project without leaving the site.
Adding live gas indicators (gas are transaction fees that are constantly changing every minute) so users are not caught off guard by high fees.
Adding verification checks so users can trust the projects and creators they invest in.
Adding helpful guides and tips in appropriate locations so even new investors can learn how things worked in this new space.
Marketplaces are complex systems and throw in new Web3 technology, and it really is no joke to build without defining a minimum viable product (MVP) first.
I decided to only focus on designing just 3 critical user flows that would allow investors to at least start investing on the platform. (Due to the time constraints, selling and creating NFTs would have to come after MVP.)
Sign In Flow:
All investors must be signed in by connecting a third party Web3 wallet in order to access their crypto funds and purchase an NFT.
(Unlike traditional marketplace where you access your account via an email and shop with a credit card, your account is automatically recognized if you have a Web3 wallet connected.)
Purchase a New NFT (Minting an NFT) Flow:
Investors enjoy discovering and investing in new project collections or drops that have not been created yet (like investing in a stock pre-IPO). This flow allows investors to be the first to purchase or mint a brand new NFT in a collection.
Purchase an existing NFT (Buy or Bid) Flow:
Once a collection of NFTs has been minted into existence, investors start buying or selling. I focused on just the buying flow for the initial MVP and ensured that investors could either place a bid or buy now.
Selecting and prioritizing key features based on user stories:
I considered a long list of user stories and selected only a few key features to include in the MVP.
Key design features include:
Prioritizing project details including mission, roadmap, team, FAQ, updates, and comments so investors can learn about the project without leaving the site.
Adding live gas indicators (gas are transaction fees that are constantly changing every minute) so users are not caught off guard by high fees.
Adding verification checks so users can trust the projects and creators they invest in.
Adding helpful guides and tips in appropriate locations so even new investors can learn how things worked in this new space.
06
Early Designs
Keeping the key user stories, I designed a MVP with early sketches then built out low-fidelity mockups in Figma.
Keeping the key user stories, I designed a MVP with early sketches then built out low-fidelity mockups in Figma.
Keeping the key user stories, I designed a MVP with early sketches then built out low-fidelity mockups in Figma.
07
Testing Early
I conducted a quick guerilla usability testing to catch design issues early.
Testing early with just three users, I was able to ensure that my early user flow screens made general sense and didn't cause major frustrations.
Two key learnings here included:
Issue: For new users, it was a little difficult to understand NFT terms and processes.
Improvement: I ended up adding more helpful tips and resources.
Issue: For investors, the project information was very important but the project collection pages felt too crowded.
Improvement: Redesign the visual hierarchy and add more white space to the layout.
I conducted a quick guerilla usability testing to catch design issues early.
Testing early with just three users, I was able to ensure that my early user flow screens made general sense and didn't cause major frustrations.
Two key learnings here included:
Issue: For new users, it was a little difficult to understand NFT terms and processes.
Improvement: I ended up adding more helpful tips and resources.
Issue: For investors, the project information was very important but the project collection pages felt too crowded.
Improvement: Redesign the visual hierarchy and add more white space to the layout.
I conducted a quick guerilla usability testing to catch design issues early.
Testing early with just three users, I was able to ensure that my early user flow screens made general sense and didn't cause major frustrations.
Two key learnings here included:
Issue: For new users, it was a little difficult to understand NFT terms and processes.
Improvement: I ended up adding more helpful tips and resources.
Issue: For investors, the project information was very important but the project collection pages felt too crowded.
Improvement: Redesign the visual hierarchy and add more white space to the layout.
08
Iterate and Continue Designing
After incorporating the feedback from my guerilla usability tests, I updated my sketches and started creating grayscale wireframes.
Here, my designs were slowly coming to life and the visual hierarchy of the content became clear. I continued to focus on iterating these wireframes to improve content readability and organization before adding color.
After incorporating the feedback from my guerilla usability tests, I updated my sketches and started creating grayscale wireframes.
Here, my designs were slowly coming to life and the visual hierarchy of the content became clear. I continued to focus on iterating these wireframes to improve content readability and organization before adding color.
After incorporating the feedback from my guerilla usability tests, I updated my sketches and started creating grayscale wireframes.
Here, my designs were slowly coming to life and the visual hierarchy of the content became clear. I continued to focus on iterating these wireframes to improve content readability and organization before adding color.
09
Defining the Brand
Coming from a marketing background, I know that having a brand identity is essential and even more important when building a cohesive product.
And in order to breathe life into my wireframes and turn them into high fidelity mockups, it was critical to incorporate and define a brand visual style.
The Curio Brand Mission is to inspire curiosity, learning, and transparency.
I created Curio because of the word curious that I would use to describe investors in the NFT space. You have to be bold and curious to learn how to get started in this new space. There’s so much new technologies, innovations, and discoveries to explore.
But at the same time, there’s a lack of trust because of rampant scams. So I wanted Curio to also embrace honest transparency to help guide these curious investors.
Brand Visual Style Guide:
After creating the brand personality, I put together a moodboard with visuals that inspired the brand visual style.
Using the psychology of colors, I picked bright yellow to inspire curiosity and black to root the brand in honest transparency. The white is like a blank canvas that could soak up the multitude of colors and creativity that NFTs could be.
As for the typography, I selected round sans serif fonts for a friendly, encouraging, and positive presentation.
Coming from a marketing background, I know that having a brand identity is essential and even more important when building a cohesive product.
And in order to breathe life into my wireframes and turn them into high fidelity mockups, it was critical to incorporate and define a brand visual style.
The Curio Brand Mission is to inspire curiosity, learning, and transparency.
I created Curio because of the word curious that I would use to describe investors in the NFT space. You have to be bold and curious to learn how to get started in this new space. There’s so much new technologies, innovations, and discoveries to explore.
But at the same time, there’s a lack of trust because of rampant scams. So I wanted Curio to also embrace honest transparency to help guide these curious investors.
Brand Visual Style Guide:
After creating the brand personality, I put together a moodboard with visuals that inspired the brand visual style.
Using the psychology of colors, I picked bright yellow to inspire curiosity and black to root the brand in honest transparency. The white is like a blank canvas that could soak up the multitude of colors and creativity that NFTs could be.
As for the typography, I selected round sans serif fonts for a friendly, encouraging, and positive presentation.
Coming from a marketing background, I know that having a brand identity is essential and even more important when building a cohesive product.
And in order to breathe life into my wireframes and turn them into high fidelity mockups, it was critical to incorporate and define a brand visual style.
The Curio Brand Mission is to inspire curiosity, learning, and transparency.
I created Curio because of the word curious that I would use to describe investors in the NFT space. You have to be bold and curious to learn how to get started in this new space. There’s so much new technologies, innovations, and discoveries to explore.
But at the same time, there’s a lack of trust because of rampant scams. So I wanted Curio to also embrace honest transparency to help guide these curious investors.
Brand Visual Style Guide:
After creating the brand personality, I put together a moodboard with visuals that inspired the brand visual style.
Using the psychology of colors, I picked bright yellow to inspire curiosity and black to root the brand in honest transparency. The white is like a blank canvas that could soak up the multitude of colors and creativity that NFTs could be.
As for the typography, I selected round sans serif fonts for a friendly, encouraging, and positive presentation.
10
High Fidelity Mockups
With the brand visual style properly defined, I could breathe life into my grayscale wireframes.
I started by building Figma UI components and variants for commonly used elements and logging all colors and typography in my library. Keeping my work organized was key as I knew there would be additional iterations.
From there on, building the high fidelity mockups was cake since the visual design was already pre-determined.
With the brand visual style properly defined, I could breathe life into my grayscale wireframes.
I started by building Figma UI components and variants for commonly used elements and logging all colors and typography in my library. Keeping my work organized was key as I knew there would be additional iterations.
From there on, building the high fidelity mockups was cake since the visual design was already pre-determined.
With the brand visual style properly defined, I could breathe life into my grayscale wireframes.
I started by building Figma UI components and variants for commonly used elements and logging all colors and typography in my library. Keeping my work organized was key as I knew there would be additional iterations.
From there on, building the high fidelity mockups was cake since the visual design was already pre-determined.
11
Prototyping
Building a realistic prototype ready for user testing means paying attention to the small details like interaction animations.
Once all the high-fidelity screens were designed, connecting the screens logically and adding small interactions were key to making a realistic prototype ready for user testing. I meticulously went through the user flows and added small interactions like hover states to buttons.
Building a realistic prototype ready for user testing means paying attention to the small details like interaction animations.
Once all the high-fidelity screens were designed, connecting the screens logically and adding small interactions were key to making a realistic prototype ready for user testing. I meticulously went through the user flows and added small interactions like hover states to buttons.
Building a realistic prototype ready for user testing means paying attention to the small details like interaction animations.
Once all the high-fidelity screens were designed, connecting the screens logically and adding small interactions were key to making a realistic prototype ready for user testing. I meticulously went through the user flows and added small interactions like hover states to buttons.
12
Usability Testing & Iterations
With this prototype, I conducted a round of user testing, improved the design based on user feedback, and checked my results with a second round of user testing.
I tested with 10 unique NFT investors of varying experience over 2 usability tests. The primary goal was to check the 3 critical flows for function and ease of use.
My first round of testing with the prototype revealed a few critical issues and my second round of testing resolved or drastically improved the results.
Key Design Improvements Based on User Feedback:
Users could not tell the individual cards could be clicked on for more information before purchase.
Improvement: Add a hover interaction to encourage clickthrough.
Usability Test 2 Results: 40% improved
2. The Bid on Any button function was unclear and not very visible.
Improvement: Fix color contrast and add a help tip
Usability Test 2 Results: 100% improved
3. Placing a bid could not be completed and the final frame remained stuck on loading.
Improvement: Resolve the final prototype animation effect screen.
Usability Test 2 Results: 100% resolved
With this prototype, I conducted a round of user testing, improved the design based on user feedback, and checked my results with a second round of user testing.
I tested with 10 unique NFT investors of varying experience over 2 usability tests. The primary goal was to check the 3 critical flows for function and ease of use.
My first round of testing with the prototype revealed a few critical issues and my second round of testing resolved or drastically improved the results.
Key Design Improvements Based on User Feedback:
Users could not tell the individual cards could be clicked on for more information before purchase.
Improvement: Add a hover interaction to encourage clickthrough.
Usability Test 2 Results: 40% improved
2. The Bid on Any button function was unclear and not very visible.
Improvement: Fix color contrast and add a help tip
Usability Test 2 Results: 100% improved
3. Placing a bid could not be completed and the final frame remained stuck on loading.
Improvement: Resolve the final prototype animation effect screen.
Usability Test 2 Results: 100% resolved
With this prototype, I conducted a round of user testing, improved the design based on user feedback, and checked my results with a second round of user testing.
I tested with 10 unique NFT investors of varying experience over 2 usability tests. The primary goal was to check the 3 critical flows for function and ease of use.
My first round of testing with the prototype revealed a few critical issues and my second round of testing resolved or drastically improved the results.
Key Design Improvements Based on User Feedback:
Users could not tell the individual cards could be clicked on for more information before purchase.
Improvement: Add a hover interaction to encourage clickthrough.
Usability Test 2 Results: 40% improved
2. The Bid on Any button function was unclear and not very visible.
Improvement: Fix color contrast and add a help tip
Usability Test 2 Results: 100% improved
3. Placing a bid could not be completed and the final frame remained stuck on loading.
Improvement: Resolve the final prototype animation effect screen.
Usability Test 2 Results: 100% resolved
13
Final Prototype
After resolving two rounds of user testing and improvements, users were able to complete the MVP critical flows with no major issues and thus, my project came to an end.
You may find the final, clickable prototype below.
IMPORTANT NOTES:
Not everything is clickable. Click around the white space and items highlighted in blue are clickable.
Only the Azuki and Shinsekai Portal collections are viewable. Within Azuki, you can view only Azuki#639.
Due to Figma prototype limitations, there is a known bug where scrolling on the collection pages may get stuck unless your mouse is hovering over on the page margins.
I enjoyed working on this major design project and it seems users enjoyed it too. One user and NFT investor commented that this should be made into a real product!
Go ahead, click around! Best viewed on desktop. Press R to restart.
14
Challenges & Learnings
After resolving two rounds of user testing and improvements, users were able to complete the MVP critical flows with no major issues and thus, my project came to an end.
I’ve enjoyed the design process, but it was no easy feat. I had been told by a mentor that a marketplace would be too difficult of a project to take on initially, but I'm glad I did it!
Below are some challenges and learnings that I experienced:
Without having a ton of prior knowledge in the NFT space, I had to really immerse myself.
This meant spending days learning not only about NFTs, but related Web3 technology, cryptocurrency, and cyber security.
I did all of this while conducting UX research to understand my user challenges.Perfectionism is a struggle.
I can spend all day tweaking my visual designs and still not be 100% happy with it. Having a set goal in mind and time-boxing my work is critical to keep this at bay.Conducting usability tests alone is difficult.
I had to multitask the best I could while tracking the user’s cursor, listening and jotting feedback notes, reminding users to think out loud, and note potential solutions.
For future learnings and advanced testing, I would love to enlist help and set new metrics such as tracking user flow completion times.Organizing and keeping a design system, no matter how small, can save a ton of time.
Changes are unavoidable and having an organized library of assets is a lifesaver.Interaction limitations in Figma prototyping software.
I wanted to implement a second sticky menu bar and a scroll to top button to help users navigate long pages. I found a hacky trick that worked but made the scrolling a bit tricky in the project’s about section. So unfortunately, the UX was not ideal within this Figma prototype.
