Timeline
2 months (Research & Design)
Tools
Figma
Work Project
Product Manager*1
UX Designer*1
Frontend Engineer*1
Backend Engineer*1
My Role
Market Research
UX Design
Web Interface Redesign
Panini Club, our client, is an innovative Web 3.0 platform that is dedicated to fostering a mutually beneficial connection between brands, creators (designers), and fans. As a UX design intern, my main responsibility is designing web interfaces to showcase products, framing solutions that drive engagement among potential supporters, and regularly meeting with our client to gain valuable feedbacks.
Panini Club
Context
Panini Club: From “Support” To “earn”
PaniniClub is a consumer electronics brand leveraging DAO principles and web3 technologies to create a mutual beneficial relationship between brands, designers, and fans. The workflow is divided as follow:
For early investors or product fans, they are able to become the stakeholders in each product at an early stage, rather than just consumers.
For those who design and create, they have the chance to collaborate on NFTs, showcase their works, and receive fair compensation through smart contracts.
Early Investors can join in the lottery for a chance to be selected. Those chosen can then freely mint NFTs and receive 10% of the product's lifetime sales.
Support
in the early stage
Earn
10% of product’s sales
/ compensation of their NFT collections
Mission
Panini Club aims to revolutionize the traditional Brand-Customer relationships into a highly engaged and rewarding community.
2 weeks
2 weeks
2 weeks
2 weeks
Design
Dev
Jun
July
Aug
Research
Design System
Design System
Testing
Testing
Meeting
Meeting
Front-end Develop 1
Front-end Develop 2
Back-end Develop 1
Back...
Landing page Design
About page Design
User Dashboard Design
Timeline
My Achievements
Designing Use Flows
Addressing the complexities of web 3.0, I faced the challenges in organizing information and guiding users through critical tasks.
To tackle this, I created user flows for internal and client reviews.
Designing Web Pages
Our primary goals at this stage are to introduce the brand and prompt them to register.
As such, we prioritized the landing page, team introduction page, and user dashboard upon login.
Building a Design System
While the engineers developed web pages, I was working on the basic of a design system to accelerate UI component development, unify the design language, and aim to establish a cohesive brand style for the future design.
02. About Page
We utilize this page to provide visitors with information about our unique background, mission, stories, and major individuals behind the PaniniClub platform, giving them a deeper impression on who we are.
03. User Dashboard
The user dashboard enables users to update info, track tokens, view orders, manage NFT Collections, and join seasonal campaigns for rewards.
design Review
Designing Web Pages
01. Landing Page/Homepage
Landing page is designed for quick user comprehension with concise steps, straightforward language, collapsible content, and a clear participation pathway.
Design Goals
Straightforward
Simple & Clear
Educational
Marketing
For Early Supporters,
Like consumers, investors, and tech enthusiasts, the website need to be designed for quick understanding, simple steps, clear language, and collapsible content.
For Creators,
Such as brands, individual designers, and design firms, the goal is to provide a straightforward process for engagement, ensuring their willingness to join.
Color
HEX
#000000
HEX
HEX
HEX
#FF6900
#727272
#E7E7E7
Smoky Black
Blaze Orange
Nickel
Platinum
Panini Club's journey started with a single sandwich, symbolizing joy, positivity, and vitality in people's lives. Drawing from this inspiration, our team has built the foundational visual language for the consumer electronics brand.
This includes the warmth of 'BLAZE ORANGE' and its pairing with 'SMOKY BLACK,' reflecting the brand's innovative spirit and embrace of web 3 technologies.
Design System Fundamentals
Bb
Gg
Ll
Vv
Cc
Hh
Mm
Rr
Ww
Dd
Ii
Nn
Ss
Xx
Ee
Jj
Oo
Tt
Yy
Ff
Kk
Pp
Uu
Zz
Aa
Heading 1
Heading 2
Heading 3
Body
Body Small
40pt
24pt
20pt
20pt
12pt
Light
Regular
Medium
Semi Bold
Bold
Inter
Typography
We also created color schemes with a 20% opacity variance to ensure a nuanced visual hierarchy.
#FF6900
#E1DDD1
#E7E7E7
#727272
#101010
Grid System
Mobile
360*640 px
Margin: 16, Gutter: 16
Tablet
768*1024 px
Margin: 80, Gutter: 20
Desktop
1440*1024 px
Margin: 150, Gutter: 30
In the first phase, I briefly planned 3 types of views for responsive design: mobile, tablet, and desktop, generally outlined what we were going to work on. We set the default desktop size to 1440*1024 px and will adjust based on this dimension.
The customized layouts of each page will be explained in the following page sections.
48 px
64 px
80 px
8 px
12 px
16 px
24 px
32 px
36 px
For web apps mainly designed for desktop use, the overall spacing may be slightly larger compared to the mobile version.
Therefore, spacing starts at 8px (used more in the mobile) and expands in multiples of 4, such as 12px, 24px, 48px, up to 80px for segment spacing.
Spacing between sections may be even larger, typically maintaining 160-200px per screen to ensure a clear layout.
Spacing
Header
Select
Hover
Enabled
Home
Product
NFT collections
About us
Blog
Home
Product
NFT collections
About us
Blog
Home
Product
NFT collections
About us
Blog
Components
Icons
Search Box
Search
Cable
Advanced cable transfer with...
USB C Cable, 310 USB A to USB...
Basics USB-A to Micro USB...
Text Box
Add their email adress to share
abc@paniniclub.com|
abc@paniniclub.com
Successfully subscribed!
abcpaniniclub.com|
Please enter a valid email address
abcpaniniclub.com|
The referral limit is set at a maximum of 10 per day
Button
Pressed
Disabled
Hover
Enabled
Connect Wallet
Log in with
Log in with
Log in with
Connect Wallet
Connect Wallet
Subscribe
Subscribe
Subscribe
Learn more
Learn more
Learn more
View more
Reflections
01. Embarking on a Web 3 Journey
It's exiting to step into the realm of a web 3, and I'm fortunate to be part of the ground-up development of a platform set to launch alongside its debut product series in September & October. I am thrilled to see how it works and how much funding it can generate from the crowdfund sections.
02. Web vs. Mobile Design
Designing web pages presents a distinct contrast from designing mobile interfaces:
The realm of web page design offers a broader spectrum of creative options, fostering diverse interactions. Users can navigate tasks through various routes, so that the UX flows is of vital importance to enhance efficiency and increase customer satisfaction.
The development process diverges as well from mobile app design, which entails different principles and rules: for instance, responsive design is crucial for webs, requiring collaboration between designers and engineers to optimize user experience across various devices (i.e. computers with different sizes, tablets, etc.)
If you are interested in this project, please feel free to reach out to me for more details.
Thank you for visiting👋🏻 Copyright © 2023 Jinjin Du, All Rights Reserved
Timeline
2 months (Research & Design)
Tools
Figma
Work Project
Product Manager*1
UX Designer*1
Frontend Engineer*1
Backend Engineer*1
My Role
Market Research
UX Design
Web Interface Redesign
Panini Club, our client, is an innovative Web 3.0 platform that is dedicated to fostering a mutually beneficial connection between brands, creators (designers), and fans. As a UX design intern, my main responsibility is designing web interfaces to showcase products, framing solutions that drive engagement among potential supporters, and regularly meeting with our client to gain valuable feedbacks.
Panini Club
Visit Website
Timeline
2 months (Research & Design)
Tools
Figma
Work Project
Product Manager*1
UX Designer*1
Frontend Engineer*1
Backend Engineer*1
My Role
Market Research
UX Design
Web Interface Redesign
Panini Club, our client, is an innovative Web 3.0 platform that is dedicated to fostering a mutually beneficial connection between brands, creators (designers), and fans. As a UX design intern, my main responsibility is designing web interfaces to showcase products, framing solutions that drive engagement among potential supporters, and regularly meeting with our client to gain valuable feedbacks.
Panini Club
Visit Website
Visit Website