Portfolio Project 5: Vineyard Mint

Background

Context

My company assigned a case study design task to my UX design team (consisting of myself, the senior designer, and a junior designer) for a NFT marketplace. The design would then be used as a boilerplate for future potential clients who are interested in UI UX design consulting for their own blockchain & NFT marketplace UI. After some discussions with our tech consultant lead, it was decided that we would focus on designing for a winery NFT marketplace, as real platforms such as WineChain and Winessy are becoming more and more popular in recent times, and have real-life applications due to its real wine token exchange concept. The hypothetical company here will be named Vineyard Mint.

Defining the Problem

Users

The target users for the wine NFT marketplace would be digital natives with an interest in crpyto and blockchain assets, and particularly those with an interest in wine & wine investment.

Interview Findings

No user interviews were conducted as it is a case study design concept.

Pain Points & Opportunities

❌ Pain Points:

Existing wine NFT marketplace do not support shipping of real wine to Singapore and most ASEAN regions

Concerns about wine authenticity and transaction security, especially for existing wine NFT platforms that do not have a significant local presence in ASEAN region

✅ Opportunities

Vineyard Mint can have close collaboration with Asian wine dealerships to ensure wine authenticity and cheaper & faster wine shipping to customers

Vineyard Mint can also focus on community engagement in the ASEAN region and also provide educational resources for wine appreciation and blockchain technologies, which can then be integrated into the platform to enhance user experience

Designing a Solution

Process

The wine NFT marketplace UI workload was split between myself and another designer. We decidede to go with a dark UI theme and bright saturated colours to reflect modern UI styles that is common with crypto & NFT marketplace platforms. The hi-fi UI was designed in both desktop and mobile-responsive format in 2 months.

Visual Deliverables

Landing Page

Upon going to Vineyard Mint website, the customer will see the top navigation bar, the hero banner, a list of trending top wine NFT collections, then followed by brand marketing UI elements that introduces new and existing members to the purpose of this marketplace platform in general. The landing page also includes a list of local wine dealer partnerships in order to enhance the authenticity of Vineyard Mint.

Login

The user can log in to the platform via the top navigation bar for a more personalised user experience. If the user doesn't have an account yet, they can register an account via Google, Meta, X or MetaMask (a third-party cryptocurrency wallet platform for Ethereum).

Wine NFT Detail Page - View

When the customer clicks a wine NFT from the landing page or searches for a wine NFT from the navigation search bar, they will navigate to the Detail Page. This page will show a full breakdown of the wine NFT's details, including the wine name, the original wine distributor, the blockchain NFT details, NFT price and history, transaction log and general wine information. Customers can also bookmark the wine NFT for their reference and also share the page with others via their social media. At the bottom of the page, users are also prompted to view other, similar wines from the same collection to encourage customers to do more transactions.

Wine NFT Detail Page - Purchase Process

If a customer is interested in bidding for the wine, they can click the "Make Offer" button and offer a lower price than the Current Price, and await for the current owner's response to their offered price.

Otherwise, if a customer is interested to buy the wine NFT instantly, they can click the "Buy Now" button at the Current (Asking) Price. This will lead to a pop-out to confirm their transaction decision. After the customer clicks the checkbox to agree with Vineyard Mint's Terms of Services (TOS), a third-party pop-out will appear for them to confirm their purchase of the wine NFT using their cryptocurrency wallet. After the transaction is confirmed and completed, the customer will automatically be redirected back to the previous page, and the first pop-up will then show that the wine NFT transaction has been completed and added to their personal wine NFT collection.

Explore Wine NFT Marketplace

Cuustomers can explore and search for wine NFTS via the "Explore" tab in the navigation search bar. The customer can also filter further to search for specific wine NFTs of their interest. Each wine NFT UI card will show a picture of the wine NFT, the name of the wine, the Current Owner of the wine NFT, the price, and how popular the wine NFT is.

Wine NFT Collection Statistics

Customers can also click the "Stats" tab in the navigation search bar to have an overview of the top trending wine NFTs within a specified time period. The date period can be changed accordingly as well.

My Personal Wine NFT Collection

Customers can click the profile photo in the top navigation bar to view their Personal Collection. It is further subdivided to My Collection, Favourited, and My Offers. Users can click on the "User Settings" button to view and edit their User Settings

User Account Settings

Customers can change their Profile Settings such as Username, Email Address and Crypto Wallet Address. They can also view all their notifications and payment history.

Mobile View

These shows the mobile-responsive UI view for all screens.

Reflection

Phew! This was one of the harder UI UX design projects that I have done so far from a UI perspective.

I haven't had much experience designing for front-end ecommerce pages before, let alone one that is for cryptocurrency technologies. It was a very fun challenge as I had to constantly refer to existing competitors and also refer to NFT marketplaces to have a deeper understanding on the blockchain scene. Designing for a modern, sleek dark mode was also a welcome challenge as it pushed me to revise my colour theory concepts again and apply it into real application this time. I am very thankful for the opportunity to design for this case study, and hope that I can continue contributing to the crypto UI scene in the future.