PassX
CONTEXT
Current Constraints & Challenges
Data Driven vs Engineering Driven
Start again: I thought I knew UI/UX design process, but Web3 challenged me to unlearn and adapt.
24/7: Web3 is nonstop. Builders are in every country, and what was new is now old. This can be exhausting.
Immutability and low data: Experimentation and data are a UX people’s best friend; not so much in web3.
Web2 UX meets Web3
The technical limitations of Web 3.0.
Many newly joined UI/UX designers in the world of Web 3.0 share a common vision: to pioneer change in this innovative landscape. However, within our enthusiasm, we often overlook the technology's limitations (especially web 3.0 have been developed so many years).
For instance, utilizing a Dapp requires users to hold specific cryptocurrencies on the network where the Dapp operates. This necessitates multiple transfers across various platforms and software, diminishing user experience and increasing costs significantly.
Daily life of Blockchain users
PassX
Web 3.0 has been around for years, but it's often quite confusing. Many products online don't make much sense. In the past, social networks were a big deal in Web 2.0. Now, it seems like Social-Fi might be the next big thing in Web 3.0.
Cross Function Team
Product Manager
Marketing Designer
Operation Designer
Engineering
My Role：
Solo Designer
Inspiration Project
Friend.Tech
Friend.tech, a flagship SocialFi application, enables users to buy access keys for private chat rooms connected to specific X profiles’ personalities. These keys increase exponentially in price as more are purchased based on a bonding curve. When a key is resold via the secondary market, Friend.tech and the tokenized profile’s owner each receive a 5% residual.
Logo
PassX
PassX
Font Family
QuickSand
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890,.!"?{}[]()@#$%&
Color Pattern
Design Methodology
Double Diamond
COMPETITOR ANALYSIS
Evolving From Copies to Unique Projects
While some DeFi forks originally started off as pure copy-and-paste clones, we are growing ever more sophisticated.
IA map
Wireframe
High Fidelity Prototype
Onboarding Process
Guide the user through the initial steps of the product. It includes connecting social, setting profile, and congratulations.
High Fidelity Prototype
Trading Process
High Fidelity Prototype
Send (3,3)
High Fidelity Prototype
More Screens and Pages
PROBLEM SOLVING
Purchase & Sell
This area is meant for users to buy or sell passes. But at first look, it's too cluttered and has confused users in our usability tests.
SOLUTION
Separate content
First, split the trading process into two steps: one for choosing "buy&sell" and another for "Tweaking Quantity." This approach simplifies the information on each screen, reducing the risk of confusion for users.
Grouping & Modular
Combine the unit Price and Quantity into one object to make it easier for users. Remove the "wallet" and "balance" text, and add "zkSync Era" to instantly convey that it's wallet information. This simplifies the design and reduces user pressure of distinguishing.
PROBLEM SOLVING
Display Primary Account
In the trading pass screen, we want a space to display main account. However, the regular method will push the content down, which isn't what we want. We want users to see the rest of the content so they understand what's going on here.
SOLUTION
Option 1
Pros:
User can easily understand this one is the main account by visual hierarchy.
Cons:
the original design already have too much content, this method will make this problem even worse.
Option 2
Pros:
This method won’t make this page longer
Even have more space to display extra content
Cons:
This way, users might think the "All" tab is like the social platform, so they might expect it to work the same way as a pass.
PROBLEM SOLVING
Pass Holder & Holding
On the Pass Detail page, users can check who else owns the pass and which passes are held by the pass owner by simply click on the numbers. But the original design pops up a list which is a repetitive content with the Top Holders list before the pop-up
SOLUTION
Design Sprint
To solve this problem, I instantly conduct a one-day design sprint workshop, since this problem doesn’t need a 5-day Sprint. Here is the result. (Contact me for One-Day Design Sprint)
Merging
Combine "Top Holders" and "Notable Holders" into a single category inside "Holders" and create sub-tabs under the “Holders” for them.
Avoid using pop-up methods for Holders Holdings and Activities. Instead, display them directly on the Detail page.
PROBLEM SOLVING
Component With Variations
During the building of design system, I guided the team and trained everyone to use component and variation instead of manually edit every single page in each iteration.
