Felt Zine

2021 | UX Research, UX/UI Design, Responsive Web Design, NFT Feature

A mobile-friendly, digital platform feature that allows users to mint and collect NFTs by connecting a digital crypto wallet directly onto the Felt website.

As the sole designer on this project, my tasks involved UX research, user interviews, competitor analysis, mapping the user flow, creating wireframes, responsive UI, and building a rapid desktop prototype. This is my individual work that I created as an assignment through Designlab’s UX Academy.

OVERVIEW

FELT is an experimental digital art platform and artist collective that examines digital activism, hip hop culture, race, gender, and class through IRL and URL experiences.

With the recent rise of NFTs, many artists are trying to figure out how to utilize the medium to carve out a new model of equity for digital artists and creators. NFTs (non-fungible tokens) are a new type of digital asset; ownership of these assets are recorded on a blockchain - a form of financial technology that acts as a permanent digital ledger across multiple computers.

FELT wants to expand their platform and improve community engagement by incorporating a feature that will allow artists and their audience to collect and mint NFTs directly on the site. The feature will facilitate a new value system that will give users the power to trade tokens (digital assets) for other valuables such as future events, rare items, etc.

The Challenge

• Embed a feature that integrates seamlessly with the current Felt website and flow smoothly with the rest of the platform
• Design an interactive landing page that allows users to mint NFTs, place bids on artworks and collect artwork by connecting their digital crypto wallet.

Key Features

• A landing page where anyone can browse, search, and filter through different NFTs, artist pages, and collections
• An online registration form that allows users to create and connect to their digital crypto wallet
• An online form to list details and mint artworks as NFTs directly onto the site
• A bidding feature where users can place bids and users can view currently live auctions and bidding history

UX RESEARCH

NFTs have managed to capture the collective imagination, they allow digital artists and creators to embed conditions of their work, determining how it’s displayed and even editioned. To better understand how NFTs work within the market, I looked into popular NFT platforms to identify their main strength and weaknesses. I wanted to learn how competitors are building community within their platforms and creating a model for interdependence for digital creators.

Currently, there are many different marketplaces to choose from, each have their own features and can be divided into two main groups: curated and non-curated. Curated markets like SuperRare, Foundation, and Zora require artists to submit an application in order to participate in their platform.

By being on a curated platform, artists have access to a specific audience of collectors and various tools such as different kinds of auctions. Non-curated platforms like Rarible and OpenSea have no entry barriers, so anyone can mint as long as they connect their crypto wallet. Non-curated platforms serve as a great starting point for many artists.

I also noticed that the top NFT platforms run on Ethereum and have had a reduction in their volume due to the increase in the GAS price (similar to paying interest) for ETH transactions.

User interviews with six artists and collectors helped give insight into what their main motivations, goals, potential frustrations are when interacting with an NFT platform. All participants were working artists from the ages of 22 and 28, most have less than a year of experience with minting and collecting NFTs, while others have no experience but understand the concept.

Everyone found a well-curated platform to be important and were motivated to be apart of an active community to be able to connect with fellow artists and collectors. Although a curated platform is important, most participants with experience minting began listing NFTs through an open market because it provided quick and easy access. A few participants mentioned their frustrations with high platform fees and rising GAS prices when making a transaction on the Ethereum blockchain, while others didn’t mind it. I learned that the most common way to store and monitor your crypto is by connecting to a MetaMask wallet.

After observing and analyzing the current NFT ecosystem and conducting interviews, I could determine that there were two main types of users involved. I created user persona profiles: the artist and the collector; this was made to better understand their goals and fears.

INTERACTION DESIGN

The research shows that a successful NFT platform should be open to both established and new artists, but with complete openness, certain issues arise – the fear of oversaturated and badly curated platforms could turn away potential investors. A problem with highly curated platforms is the lack of exposure and support for Black, Indigenous, POC and underrepresented artists. So how might I design a smooth, digital experience that is free and inclusive, yet tasteful?

I began to brainstorm on ways to accurately categorize information and display artwork, I built a sitemap. I wanted to create multiple opportunities for the Felt community to discover new artworks and artists, as well as ways to easily navigate through the site.

How would a user begin to search for new artists and artworks? What would encourage a user to place a bid on artworks they are unfamiliar with? I started by separating the main landing page into two categories “live auction” and “discover”, after branching off from there I was able to see how we could create a curated space for both established and lesser known artists and artworks.

It was also important to create a flow would guide the user towards creating an account and setting up their digital wallet to place a bid or mint an NFT.


sitemap

With the information in place, I was able to build out two main user flows. — The first user flow shows how a user would place a bid on an NFT and the second flow shows how a user would mint an NFT directly onto Felt’s platform. In order for users to complete either tasks, they would need to connect to their digital wallet. Connecting to a digital wallet will also sign users onto the site, giving them abilities to save and like artworks, create user profiles, and view or edit account settings. All options will ultimately encourage new and existing users to discover new works and engage with Felt’s community, creating a space is very supportive and responsive.

user flow a, b, + c

user flow a + b

FELT's existing homepage works more like a blog or digital magazine, much of the content on the site are articles covering previous events or featured work. With this in mind, I made the decision to have the NFT feature live on a separate landing page that can be accessed through FELT's homepage navigation. The landing page would be curated to display the top NFT artworks and artists who have submitted their work to FELT.

Building the wireframes for the landing page was challenging but also the part in the design process that interests me the most. While working on the first round of wireframes, I ran into some conflicts with the overall layout and display of data. I initially attempted to mimic a similar layout style that FELT is using by having the cards touch, but this was not working for the digital assets. The cards felt cluttered and the information difficult to read. I learned how crucial it is to make use of the white space and how having a solid style guide could help organize the information being displayed. I reworked the cards to make better use of the space and gave the overall page a better ratio of white space.

n addition to designing the landing page, I built wireframes to implement the feature to sign up and log in via a crypto wallet. For a user to be able to place a bid or mint an NFT on the site they need to connect to their crypto wallet - Crypto wallets store your private keys, keeping your crypto safe and accessible. They also allow you to send, receive, and spend cryptocurrencies like Bitcoin and Ethereum.

Whether a user has a digital wallet already set up or is new to the process, the sequence of steps should be as seamless as possible. With research I was able to observe how companies like Google, Paypal, or Metamask direct their users towards creating an account through a pop up window as a third party. The intention was to have as little steps as possible to keep users from abandoning the sign up form all together. I did this by creating a small pop up window that allows anyone to connect to either a Metamask or Formatic wallet, if a user needs to set up a wallet they can also do that directly on FELT's site. I split the sign up form into 3 simple steps that provides a link to download the crypto wallet extension onto the user's web browser and creates a password key for security purposes.

For the final wireframes I created a page to display NFT bidding details, bidding history, and artists bio - as well as a page with a form to list different kinds of NFT’s.

UI DESIGN

The look and feel is simplistic and minimal due to the nature of it being a content heavy site, displaying lots of images and data. I choose to display all digital assets in a layout form that allows users to quickly browse through the cards, giving them the option to select a card and access more information. The decision to have a featured artwork section at the top of the landing page was so visitors can discover new works and be encouraged to select the artwork to learn more about the piece, the artist and its bidding history.

I mainly worked with black, grey, and white and used purple as the primary accent color. The decision to stick to simple colors was because the artwork would be the main focus on the site. I created a soft radial gradient border that would be used to separate between sections on the landing page as well as to bring forth a futuristic tech feel.

I compiled all the visual design elements and systems into a style guide and UI kit. With this, I designed a landing page that allows the user to start a quote, informs the user on who North Star is, customer testimonials, how to save by bundling products, and a quick access to the claims center for existing customers. I also designed the responsive UI for mobile and tablet devices.

TEST

To test the usability and functionality of the user flow, I created a high-fidelity prototype on Figma with clickable buttons and page transitions. The main goal was to observe learnability and determine how easy is it for users to navigate through the NFT landing page. It was important to understand what are the users main motivation when browsing through the marketplace. When are they most likely to sign up and become engaged with the FELT community? What will lead the user to sign up and set up a wallet? What will encourage them to explore new artists and artworks to then eventually placing a bid on an NFT?

Desktop Prototype Link

I met with three participants from the ages of 24 and 29 to test the site's functionality and usability. One participant was a digital artist but also had experience with investing in digital assets, one participant has five years of experience investing in digital assets, and the final participant had little to no experience with investing but was curious about.

The main objective was to test the overall quality of the design, functionality, navigation, and user flow of the site. To begin I wanted to observe how a user would go about completing the main three user flows which was to sign up and set up their wallet with Metamask, then place a bid on the top featured artwork. From here the participants continued to browse through options, and all decided they wanted to create their own NFT to feel out the process.

I began by observing how potential users would navigate through the NFT landing page and how easy discoverability of new artists and works were. I also wanted to

Participants were able to sign up / set up a wallet, place a bid on the top featured artwork, and create their own NFT on the site

• All participants liked the flow of the homepage, and would like to select view more to continue browsing through the different categories.
• All participants completed the task of signing in or setting up their wallet.
• All participants completed the tasks without any errors.
• 2 participants wanted the ability to auction with different tokens, not just Ethereum tokens.
1 participant suggested that the top section of the NFT landing page could be utilized differently, instead of having one top feature, there could be 3-6 top features and on the left could be featured collections such as virtual exhibitions.

I took the insights and communicated findings from the usability tests and put together a list to help organize potential solutions. Prioritizing certain feedback to iterate and refine the prototype and test it all over again.

Top Priority Adjustments

• Change color of the main CTA buttons so it can stand out.
• Allow for users to purchase with different kinds of crypto-currencies.
• Re-label input elements when listing NFTs.
• Rearrange main landing page so that collections is featured at the top next to top featured artwork.

THE OUTCOME

The most challenging and time-consuming areas of this project and one that I am most satisfied with is the UI design. The cards displayed on the NFT landing page show important data that informs the user on the value and origin of the NFT. It was important to display the information in a way that makes sense to a user who has no experience investing in crypto.

If I could go back I would have spent more time working on the arrangement of categories on the main landing page, especially on the top section. Utilizing the top area to its highest potential would encourage users to scroll through the rest of the page and engage with FELT’s community.

My next steps moving forward would be to do another round of product testing and continue iterating on that feedback.