My tasks
As a UX design intern, I was responsible for designing the login page, user profile page, and NFT detail page for a Web 3.0 startup(Panini Club) specializing in consumer electronics. The key objective of these designs is to build trust and connection with users, encouraging them to engage with their NFT collections and redeem rewards. Through thoughtful and user-friendly interfaces, we aim to create an immersive experience that enhances user loyalty and satisfaction.
PaniniClub seeks a visually stunning website design that captivates visitors from the moment they land on the site. The use of vibrant colors and engaging typography can further enhance the overall appeal and make the website visually memorable.
PaniniClub aims to create an interactive website that encourages active user engagement. Incorporating interactive visuals, animations, and multimedia content may be used to further enhance user engagement and make the website a dynamic and immersive platform.
The website should prioritize ease of use and seamless navigation. PaniniClub wants visitors to effortlessly find the information they are seeking. Clear and intuitive menu structures, well-organized content sections, and intuitive icons or buttons should be implemented to guide users and ensure a smooth browsing experience.
Attractive
Interactive
Intuitive
Clients Demands
Project Overview
Project Timeline
Timeline
Jan - Mar 2023
My Role
UX Design Intern
Team
Coco Li (UX Design)
Hunter Zhang (PM)
Scope
Website Design
UX Design
Tools
Figma
Adobe Illustrator
WEEK 1-2
|
WEEK 3-4
|
WEEK 5-6
|
WEEK 7-8
|
WEEK 9
Aproject Factory
A design consulting firm based in Dallas, Texas.
Aproject Factory offers comprehensive design and consulting services to companies across various industries, primarily specializing in Web 3.0 and Industrial 4.0 domains.
Intern Company
Project Background
Client Company
Panini Club
A Web3 consumer electronics brand aims to build a sustainable co-benefit relationship between Creators & Fans. The brand's mission is to revolutionize the conventional Brand-Customer dynamic by Web3 technology.
Aproject Factory
A design consulting firm based in Dallas, Texas.
Aproject Factory offers comprehensive design and consulting services to companies across various industries, primarily specializing in Web 3.0 and Industrial 4.0 domains.
My tasks
As a UX design intern, I was responsible for designing the login page, user profile page, and NFT detail page for a Web 3.0 startup(Panini Club) specializing in consumer electronics, which is end to end project. The key objective of these designs is to build trust and connection with users, encouraging them to engage with their NFT collections and redeem rewards. Through thoughtful and user-friendly interfaces, we aim to create an immersive experience that enhances user loyalty and satisfaction.
Project Overview
Intern Company
Project Background
Client Company
Panini Club
A Web3 consumer electronics brand aims to build a sustainable co-benefit relationship between Creators & Fans. The brand's mission is to revolutionize the conventional Brand-Customer dynamic by Web3 technology.
PaniniClub seeks a visually stunning website design that captivates visitors from the moment they land on the site. The use of vibrant colors and engaging typography can further enhance the overall appeal and make the website visually memorable.
PaniniClub aims to create an interactive website that encourages active user engagement. Incorporating interactive visuals, animations, and multimedia content may be used to further enhance user engagement and make the website a dynamic and immersive platform.
The website should prioritize ease of use and seamless navigation. PaniniClub wants visitors to effortlessly find the information they are seeking. Clear and intuitive menu structures, well-organized content sections, and intuitive icons or buttons should be implemented to guide users and ensure a smooth browsing experience.
Attractive
Interactive
Intuitive
Clients Demands
Project Timeline
Aproject Factory
A design consulting firm based in Dallas, Texas.
Aproject Factory offers comprehensive design and consulting services to companies across various industries, primarily specializing in Web 3.0 and Industrial 4.0 domains.
Intern Company
Project Background
Client Company
Panini Club
A Web3 consumer electronics brand aims to build a sustainable co-benefit relationship between Creators & Fans. The brand's mission is to revolutionize the conventional Brand-Customer dynamic by Web3 technology.
Problem Statement
Panini Club has a unique feature: supporter reward mechanism with NFTs. They share success with their supporters. Through the NFT loyalty program, Panini Club promises a $10 incentive for every $100 in product sales of their physical products as a way to reward the support and love of their fans.
After our research, we found that the uniqueness of the Panini Club lies in its supporter reward mechanism with NFTs, but it is difficult to intuitively demonstrate this to users.
How might we provide clear Profile and NFT Details pages for Panini Club users so they can intuitively understand the profit situation of their NFT Rewards?
To incentivize early sign-ups and user engagement, I have included the join date prominently in the user info section. Additionally, in the account information card, I have emphasized the total rewards accumulated for the account.
In response to customer feedback indicating the launch of multiple product series, horizontal switching tabs have been implemented to facilitate easy navigation between these different series. This design feature enables users to seamlessly explore and manage the NFT collections they hold across various product categories. By providing clear and intuitive navigation, users can quickly switch between different series, enhancing their overall experience and making it more convenient to engage with their desired products.
Leveraging user-focused design principles, your NFT Detail page efficiently organizes key information with intuitive placement and informative data visualization. The layout prioritizes user-friendly exploration of the NFT, highlighting immediate visual appreciation, quick access to critical ownership and value details, and comprehensive view of historical data. This design empowers users with a seamless navigation experience, promoting informed decision-making and enhancing overall user engagement with the NFT content.
Initially in our project, we had considered showcasing the price history separately, as illustrated in the initial wireframes. However, recognizing the significant impact of the NFT reward mechanism on price trends within this series, we opted to amalgamate the two data sets (Reward History & Price History) into a unified presentation.
· Encouraging Early Sign-Ups
· Fostering User Engagement
· Visual Cues for Account Value
· Gamification and Motivation
· Enhanced Navigation
· Efficient Product NFT Management
· Improved User Experience
· Convenient Access to Desired NFT Card and Reward.
· Visual Hierarchy
· Ease of Navigation
· Informed Decision Making
The inclusion of price history and reward history in one chart helps users understand the NFT's performance over time, which can be critical to potentially maintaining the NFT owner's continued ownership of the NFT.
· Adherence to Standard Practices
· Comprehensive Understanding
· Correlation Analysis
Final Design
Profile Page
NFT Inventory Page
NFT Detail Page
Price & Reward History Tracker
Inspiration | Getting prepared in Web3
Opensea Profile Page study
Header
User Info
Personal Collection
NFT Collections
Prior to creating a low-fidelity wireframe, I engaged in multiple discussions with my manager to ensure that my comprehension aligned with the business objectives. The client's company is a Web 3.0 start-up, which implies that there were not too many pre-existing design examples to draw inspiration from. To acquaint myself with website design, I extensively researched and sketched various marketplace websites such as OpenSea, Rarible and Farfetch.
What I learned from Opeasea:
Gain insights into layout and functionality for a successful Web 3.0 marketplace.
Organize and present digital assets or products effectively.
Develop user profiles, authentication, and account management features.
Design visually appealing aesthetics and typography.
Logo, search bar, profile image, username
Username, wallet address, join date, banner
Label, filter, search bar, view options
NFT cards grid/list
Initial Ideation Sketch
Ideation | Wireframe
Profile Page
NFT Detail Page
Pros:
· The two-column layout simultaneously highlight the profile section and the content section.
· The important redeem reward section at the upper left section can be viewed clearer than design 2.
Cons:
· Fewer NFT cards can be displayed.
· Account information is low on the page and is not emphasized.
Pros:
· User and account info takes a prominent place, emphasizing their importance even more.
· A row of 4 NFT cards is more visually comfortable while displaying more content.
Cons:
· User/account info is not displayed in full after scrolling up.
Direction 2
NFT Section
Collection Name
Account info
Logo & Navigation bar
User info
4-column
NFT Section
Collection Name
User info
Account info
Logo & Navigation bar
3-column
Direction 1
Client’s Feedback
· Fold detailed information about the NFT, such as title, artist, edition, description, rarity, and unique attributes, providing a comprehensive overview of its features and distinguishing characteristics.
· Include a visually appealing carousel showcasing other NFTs from the same series, allowing users to explore related artworks and potentially increasing engagement.
Description &
Meta Data
NFT Image
Reward History
NFT info &
Reward redeem button
Redeemed record
Trade History
Initial Iterations
Search in the collection...
Filters
Price: low to high
Address
Reward Total
Following
Total NFTs
0x394...da91
$ 500
78
120
My NFT Collection
Previous
1
2
3
...
6
Next
101
202
303
Activity
More
Panini 101 #0001
35.06 USD
0.018 ETH
34
Panini 101 #0001
35.06 USD
0.018 ETH
34
Panini 101 #0001
35.06 USD
0.018 ETH
34
Panini 101 #0001
35.06 USD
0.018 ETH
34
Panini 101 #0001
35.06 USD
0.018 ETH
34
Panini 101 #0001
35.06 USD
0.018 ETH
34
Panini 101 #0001
35.06 USD
0.018 ETH
34
Panini 101 #0001
35.06 USD
0.018 ETH
34
NFTs: 120
ALL
101
202
303
60px
60px
60px
60px
1440px
24px
150px
60px
150px
Reason:
· The decision to adopt the top and bottom structure for user personal pages may have been driven by factors such as improved visual hierarchy, better organization of content, or enhanced usability.
· The addition of series switching tabs showcases a consideration for users who may have multiple series of NFTs, allowing for easier navigation and exploration of different collections.
· Refining the information logic on the page demonstrates a commitment to clarity and coherence, ensuring that users can easily find and understand the information they need.
Overall, the changes made indicate a proactive approach to improving the user experience, addressing client feedback, and striving for a more user-friendly and intuitive design.
To ensure optimal viewing across different screens, we have set the standard page width to 1440px. Taking this into account, I have meticulously specified the page elements down to the pixel level for precise design implementation. This approach guarantees consistency and adaptability across various devices and resolutions.
What I’ve upgraded:
· Based on customer feedback and evaluation of two previous wireframe versions, the top and bottom structure for user personal pages was selected.
· Specific information provided by the client, including series switching tabs and account-specific display details, was incorporated.
· The chosen structure allows for refined information logic and improved user experience.
Design-Developer Sync
Dev:
Dimensions: What are the exact dimensions of the banner image?
Format and Quality: What file format should the image be in? JPEG, PNG, SVG, or something else?
Dev:
What the content after clicking the share icon?
Design:
Dimensions: 1440 x 380 px
Format and Quality: Support Jpeg and PNG format file only.
Design:
Start the flow of reward redemption. For now, the client only need us to link it to the user’s paypal account.
Design:
The corresponding reward history and price history data for the month that the mouse is moved over will appear at the same time.
Design:
Max 1500 characters.
Design:
40px
Design:
7 days
Design:
4-12 and only in multiples of 4. If there are less than 4 then the left and right arrows are hidden.
Design:
After selecting the icon, the user will have the ability to share their total reward number on social media. Currently, however, clicking the icon simply copies the website link.
Design:
Price: low to high
Price: high to low
Reward: low to high
Reward: high to low
Rareness
Received time
Design:
Desktop: Above 1200px, 4 columns
Tablet (landscape): 1024px to 1199px, 3 columns
Tablet (portrait): 768px to 1023px, 2 columns
Mobile (landscape): 480px to 767px, 2 columns
Mobile (portrait): 320px to 479px, 1 column
Dev:
What happens if I click “redeem reward”
Dev:
What happens when I hovering my mouse on the price history chart?
Dev:
What will be included in the sort by dropdown?
Dev:
What’s the character limitation for the description?
Dev:
What is the maximum number of cards that can be on this carousel?
Dev:
At what point do the cards adjust to fewer columns?
Dev:
What is the row height in the table?
Dev:
How many days after an event has passed does it show the exact date?
UI Kit
Inter
Light
Regular
Medium
Semi Bold
Bold
Heading 1
Heading 2
Heading 3
Body
Body Small
40pt
24pt
20pt
20pt
12pt
Typography
Color Palette
Under the guidance of my design mentor, I incorporated the foundational design elements of the client's webpage into the existing initial draft of the homepage. This integration was aimed at aligning the design with the client's vision, resulting in a seamless and visually appealing user interface.
#FF6900
#E1DDD1
#E7E7E7
#727272
#101010
100%
80%
60%
40%
20%
Visual Language - Using familiar visual elements and making information transparent would help strengthen users’ trust and affinity.
Grid system - Using grid system allows designers to make sure the margin are consistent, and it also make the design clearer for front-end team when they are developing the website.
Business goals - Working with clients, designer needs to also advocate for the business goals of the company. While presenting to the clients, designer needs address the business goal and the solutions.
What I’ve Learned
Winter 2023 UX Design Intern Project
Profile & NFT Detail Page Design
for Panini Club
During my two-month UX Design Internship at a Web 3.0 startup, Panini Club, I designed the login, user profile, and NFT detail pages. These designs aimed to foster user trust, promote engagement with NFT collections, and enhance reward redemption. With a meticulous and user-friendly interface, we aimed to boost user loyalty and satisfaction.
#web design
#9-week intern
#Figma