WEB DESIGN

Nfty Pets

An informational website for an NFT startup that sells various animal NFTs.

View Prototype
NFT Thumbnail

Overview

Pets provide some of the greatest joys in our lives which is why Nfty Pets created a series of NFT companion animals. Nfty Pets is an NFT vendor start-up that aspires to help kickstart a new age of digital creation within the NFT market by taking the things we love most about real life and bringing them into the metaverse.

ROLE

UX Researcher
UX Designer

TIMELINE

80 Hours

NFTY Pets Hero Image

Research

Research Goals:

  • Determine why people are motivated to buy NFTs in the first place.
  • Learn more about NFTs and the value people see in them.
  • Understand the process of buying NFTs.
  • Conduct research on NFT competitors.
  • Learn what is most important to buyers when it comes to purchasing NFTs.
  • Determine any pain points that buyers might have when buying NFTs.

‍

What are NFTs?

NFTs are an unexplored area for me, leading me to begin the research process by first conducting some secondary research on them. NFT stands for Non-fungible token, meaning that it’s unique and can’t be replaced with something else, essentially making it a one-of-a-kind trading card, and similar to trading cards, the rarer an NFT is, the higher it is valued.

‍

Secondary Research

I began my secondary research by reading an array of blogs and articles to gain a deeper understanding of NFTs. I gained the following insights:

  • The general lack of understanding regarding NFTs is the most significant hurdle for new consumers.
  • The core NFT consumers are younger individuals (18 - 34 year-olds) with disposable income.
  • The two primary kinds of NFT buyers are either collectors and investors.

‍

Competitive Analysis

Next, I conducted a competitive analysis to learn about what other NFT webpages have to offer and how usable they are. I chose to investigate the five of the most popular NFT webpages.

COMPONENTS

Secondary research
Competitive analysis
Stakeholder interview
User interviews

Competitive Analysis
Competitive Analysis of various NFT websites

Stakeholder & User Interviews

I conducted a stakeholder interview and some user interviews with individuals within the NFT space to gain more valuable insights. After completing both of these, I came to the following conclusions:

  • People prefer to sort by the NFT’s artist's name and by popularity when searching for NFTs.
  • People want dedicated information about the NFT and the process of acquiring it.
  • The majority of NFTs are geared more towards the experienced NFT consumer making the learning curve quite steep for beginners looking to get into the NFT space.
  • The complexity involved in the process of purchasing the NFT is one of the largest user pain points.
  • People want to be informed when the next NFT will be released.
  • People like to know the number of NFTs that have been minted thus far.
  • People typically utilize Twitter and Discord to assist in validating an NFT company.
  • People want to trust the NFT company before they even consider buying their NFTs.
  • All of the participants thought that an NFT educational page would be a great addition to the website.
Research Debrief Decimal ThumbnailView Full Document

Problem Statement

Nfty Pets is in need of a responsive website that will serve as a marketplace to house their NFTs. The target audience is not only NFT collectors but also people just getting started with buying their first NFTs.

Define

Next, I wanted to create two personas based on the research that I had previously gathered. The first one personified a user with disposable income looking to add NFTs to their collection. The final persona was intended to represent the typical user that is looking to primarily make money off NFTs and is relatively new to the NFT space.

COMPONENTS

User personas Empathy maps
Sitemap
User flow

User Persona
Robert is a user that wants to collect NFTs
User Persona
Ashley is the user that knows very little about NFTs

Empathy Maps

After creating the personas, I developed empathy maps for Robert and Ashley. This allowed me to further understand my personas' frustrations and needs and see their state of mind when purchasing an NFT. I wanted to showcase how the process of buying NFTs affects their everyday actions and thought processes.

User Persona
Robert's empathy map
User Persona
Ashley's empathy map

Sitemap

While researching competitors' websites, I noticed that one-page sites were a standard layout. This led me to construct a simplified sitemap to create a familiar user experience for potential users.

Application Map

User Flows

In order to demonstrate how the two personas might move through the website, I created user flows. I could then see all the steps and decisions a user could take to reach their goals.

User Flow
User Flows

Design

Based on the site map and user flow, I started the design phase by sketching some concepts for the Nfty Pets homepage. The sketching process allowed me to experiment with various ways of organizing the content.

COMPONENTS

Med-Fi wireframes
Logo
UI kit
Hi-Fi prototype

Landing page sketches
Low-Fidelity wireframes of potential landing page layouts.

Mid-Fidelity Wireframes

Next, I made some Mid-Fidelity wireframes to help establish a more accurate depiction of the landing page and the other pages.

breezy logo
The landing page of the Nfty Pets website
Brand colorsBrand colors
The Learning Center page

Branding

NFTs are still a relatively new addition to cryptocurrency, so the goal of the Nfty Pets brand is to be optimistic about the future and, aspire to remain trendy but also stand the test of time. I kept my client’s design preferences in mind throughout the design process.

branding exploration
breezy logo
The landing page of the Nfty Pets website
Brand colors
The Learning Center page
Homepage Sketches
Making this UI Kit allowed me to plan out the website's structure and remain consistent throughout the design process.

⚡️ CHALLENGE

During the research phase, a common user pain point that I discovered was that users commonly fear that they would miss an upcoming NFT release. NFTs are minted in limited editions so the ability for users to stay up to date on when the next drop will be would be an advantage for the users.

✅ SOLUTION

My first solution was to include social media links throughout the website since users typically use Discord and Twitter to "stay in the loop" with the latest NFT drops.

Although that would help I also devised a second solution including an email sign-up component allowing users to be notified via email about any Nfty Pets news or releases.

‍

Email Sign up

⚡️ CHALLENGE

The main goal for NFT collectors and buyers is to determine how rare an NFT is before purchasing it. Users must be able to find out how rare each NFT is easily.

✅ SOLUTION

After working closely with my client, we both agreed on creating four distinct levels of rarity: Common, Rare, Epic, and Legendary. I created a simple diamond icon and color-coded one for each level.

Finally, I included a Tooltip to make it easy for new users to understand the context of each level. The tooltip is activated when the user hovers over the information icon.

‍

Tooltips

High Fidelity Screens

Next, I built out the high-fidelity screens based on the wireframes I had previously made. NFTs are essentially the digital cousins of printed trading cards at a basic level so I injected a lot of the fundamental parts of physical trading cards into the overall UI of the website.

For instance, I made each NFT into its very own card. I beveled the edges of the cards on the website to mimic the rounded edges of your typical printed trading card.

Responsive screens
breezy logo
The landing page of the Nfty Pets website
Brand colors
The Landing page
Homepage Sketches
The Learning Center page
Homepage Sketches
Learning Center landing page

Test

I created a high-fidelity prototype in Figma and conducted usability tests over Zoom. Three participants from various backgrounds and profiles were chosen for this test. I presented participants with a series of tasks and observed their progress.

Usability TestView Full Document

Task 1: Find the rarity levels of a pet and then purchase that pet.

TASK INSTRUCTIONS

I want you to first find the pet named Luna and then tell me what its rarity level is? Then, can you please tell me what all the different rarity levels are for Nfty Pets? Finally, please purchase Luna.

‍

TASK NOTES

The overall impression of the homepage was good. The Participants had no issues with completing this task. One participant mentioned that sorting by species or rarity level feature would be an excellent addition to the landing page.

Overall, everyone voiced that they liked the tooltip that listed out the four levels of rarity. Two participants expressed that they wished the text in the modal window had a more visual hierarchy. Finally, the participants preferred the “Adopt A Pet” CTA rather than the “Buy NFT” CTA because it fit more in line with the Nfty Pets brand.

TASK COMPLETION RATE

100%

‍

‍

Task 2: Sign up for an email subscription.

TASK INSTRUCTIONS

Next, I want you to sign up for email notifications.

‍

TASK NOTES

There was not much to be voiced here. Nobody struggled with locating the email sign-up input form. All of the participants mentioned that the email sign-up input form placement was in the correct area of the website. Finally, each of the participants said that the inclusion of this feature was a helpful feature.

TASK COMPLETION RATE

100%

‍

‍

‍

Task 3: Find a term and an article in the Learning Center.

TASK INSTRUCTIONS

For this task, I am going to have you locate a term for me. Can you please tell me what the term “Metaverse” means? Finally, I want you to find an article that explains how to validate NFTs.

‍

TASK NOTES

Every participant was able to complete this task with relative ease. There was some valuable feedback on the section pages, however. There was a general consensus that the first section, NFTs Explained, was confusing and unnecessary. Participants also suggested that I combine the NFT Basics and Terminology sections into one.

TASK COMPLETION RATE

100%

‍

‍

‍

Next Steps

It is imperative to iterate on the previous designs after testing to improve how users navigate the website. Using the insights gathered from the usability test, I formulated a list of the following iterations:

  • Change all buttons that say “Buy NFT” to “Adopt A Pet”.
  • Add more visual hierarchy to the typography in the modal window.
  • Add a sorting by animal type or rarity level feature to the landing page.
  • Add a button to the navigation bar that links to the Pet cards section on the landing page.
  • Remove the “NFTs Explained” section. Then Combine the “NFT Basics” section with the “Terminology” section.

What I learned

Before this project, I didn't know much about NFTs, so I had to work hard during the initial research phase. The world of NFTs is intricate, making it even more critical that I understood how they work. This, in turn, taught me the importance of knowing my product area before even starting a project. The better I can understand my users and subject matter, the more empathy I can inject into the project.   Regarding components, I learned about tooltips and how they can save precious screen real estate.

Back to top
Up Arrow

More Projects

Decimal-Main Thumbnail
Decimal
thumbnail
Breezy Insurance
google maps thumbnail
Google Maps
Footer Logo
©2024 Devin Gordon