Overview

The client company is a Web 3.0 startup that specializes in selling consumer electronic products, and my main responsibility is to create the login page, user profile page, and NFT detail page for the company's website. The ultimate goal of these designs is to establish users’ trust and affinity and motivate them to redeem rewards from their NFT collections.

My Challenge

Given that Web 3.0 and NFTs are still relatively new concepts to the general public, so how might we design a website that helps users ease the conceptual transition from Web 2.0 to Web3.0, and encourage them to redeem rewards from the NFT collection?

Project Timeline

Ideation

Before I started drawing low-fidelity wireframes, I had several meetings with my manager to make sure my understanding aligned with the business goals. The client company is a Web 3.0 start-up business, which means that I don’t have existing design references to learn from. To make myself familiar with website design, I studied and sketched a few tech marketplace websites like OpenSea,  Hyperspace.xyz, Rakuten, and Zillow.

Similar Product Analysis

From the similar products, I learned from how similar product approaches design decisions, and I draw a few sketches to better understand their website structure.

Low-fidelity Wireframe

By observing the common design patterns among similar products, I  created a low-fidelity wireframe that effectively communicates the basic layout and functionality of my design.

My NFT Page
NFT Detail Page

Mid-fidelity Wireframe

From the two ideas for the layout for “My NFT Page”, we analyzed the pros and cons of each design, and decided to advocate for design #2, because it is easier to display the “redeem reward” information. From incorporating clients’ feedback, I sketched the mid-fidelity wireframe.

My NFT Page
NFT Detail Page

UI Kit

Iterations

After confirming with the manager, I began iterating on the high-fidelity design based on clients’ feedback.

Iteration 1

Iteration 2

Demo