Back
Back
Oyster Perpdex
Bridging the Gap: A CEX-Grade Experience on a DEX
ROLE
UI/UX Design
DURATION
3 Weeks Sprint
PLATFORM & DOMAIN
Web Application (SaaS)
Fintech / DeFi
SKILLS
Product Design
User Research
Interaction Design
THE CHALLENGE
The Dilemma: Decentralized Exchanges (DEXs) usually fall into two extremes: over-simplified "Swap" interfaces (good for newbies, bad for pros) or complex, developer-centric tools (good for pros, scary for newbies)
The User Pain: New users are often intimidated by "Web3 jargon" and clunky UIs, while professional traders reject platforms that lack depth
The Goal: To design a scalable interface that feels familiar and safe for beginners, but offers institutional-grade depth for veterans
THE SOLUTION
I used the familiar layout of centralized exchanges (CEX) to create a sense of safety and predictability. Crucially, I implemented "Smart Defaults" and "Guided Interactions" so new users can trade immediately without getting overwhelmed by the underlying blockchain mechanics
VID
Benchmarking the Best: CEX Familiarity on a DEX
To lower the barrier to entry, I analyzed the interaction patterns of market-leading Centralized Exchanges (CEXs) and adapted them for the decentralized world.
Instead of forcing users to learn a new 'Web3' interface, I implemented the proven, industry-standard layout they already trust: a central chart flanked by a dynamic order book and trade form.
This strategic alignment allows traders to access powerful decentralized features—like self-custodial 100x leverage and on-chain settlement—using the exact same muscle memory they developed on traditional platforms
VID
Barrier-Free Access
I removed the 'Login Wall' to build trust. Users can fully interact with live charts, check real-time liquidity, and explore the interface without restriction. Authentication is only required at the exact moment of trade execution—putting the user in complete control
VID
The "Pocket Terminal
The Feature: A fully responsive mobile trading interface that retains 100% of the desktop functionality.
The UX Win: Instead of simply shrinking the desktop view, I utilized a Bottom Sheet Architecture. This keeps the price chart visible at the top (context) while the user inputs complex data (order details) below, solving the "small screen, big data" problem.
Touch-Optimized Controls: I replaced text inputs with Slide Interactions for leverage adjustments, designing for "thumb-zone" ergonomics rather than mouse precision.
Safety Layers: Recognizing that mobile users are prone to accidental taps, I designed a high-friction Confirmation Modal that summarizes critical risk data (Liquidation Price, Margin Cost) before the transaction is sent to the chain.
VID
Staking & Retention Architecture
The Feature: A dedicated liquidity management dashboard that incentivizes long-term holding through visual feedback.
The UX Win (Visualizing Value): Instead of a static text list, I designed an interactive "Time-Based Tier System". Users can toggle between lock-up periods (1 month to 2 years) and instantly see the APR jump from 7.12% to 57.7%, gamifying the decision to commit assets for longer.
The UX Win (Transparent "Exit Logic"): Unstaking in DeFi often has hidden traps. I designed a high-friction Unstaking Modal that clearly breaks down the consequences before execution. It explicitly calculates the "Early Withdrawal Penalty" (5%) and highlights the "3-Day Unbonding Period," ensuring users aren't blindsided by protocol rules.
Interaction Detail: The dashboard features "Optimistic UI" updates—notice the "Est. Reward" calculator updates in real-time as the user types their stake amount, providing immediate clarity on potential returns.
IMG
Building Trust Through Structured Clarity
In a domain where confusion can lead to financial loss, clarity is the ultimate trust signal. I implemented a Bento Grid/Modules UI Design to ensure that every piece of important information has its own dedicated space, preventing vital data from getting lost in the noise. This modular approach makes the interface transparent by default; users can easily locate and digest critical status updates—from Staking Rewards to Order Risk—instantly.
By organizing the chaos into a structured grid, we prove to the user that the platform is stable, organized, and has nothing to hide.
MORE UI DESIGN STUFF
IMG
Eliminating Uncertainty Through Status Visibility
I designed this trading interface to bring the familiarity and performance of a centralized exchange into a decentralized environment. The goal was simple: make advanced features like perpetual futures, TP/SL, and fast position management feel intuitive, predictable, and safe—without sacrificing the transparency of DeFi. By borrowing proven CEX interaction patterns and refining them for on-chain constraints, this UI lowers the learning curve for new users while staying powerful enough for experienced traders.
KEY TAKEAWAY
CEX Patterns as an Onboarding Layer
I treated centralized exchanges as the baseline mental model for new users. By mirroring familiar trading flows, I reduced onboarding friction and helped users enter DeFi without having to relearn how trading works.
Lower the Learning Curve, Not the Capability
Instead of simplifying the product, I simplified the first experience. Advanced features remain intact, but are progressively revealed as user confidence grows.
UX as a Bridge to Decentralization
Rather than educating users about DeFi mechanics, the interface absorbs that complexity. Good UX becomes the bridge—guiding users from familiar CEX behavior into a trustless environment without fear.
Oyster Perpdex
Bridging the Gap: A CEX-Grade Experience on a DEX
ROLE
UI/UX Design
DURATION
3 Weeks Sprint
PLATFORM & DOMAIN
Web Application (SaaS)
Fintech / DeFi
SKILLS
Product Design
User Research
Interaction Design
THE CHALLENGE
The Dilemma: Decentralized Exchanges (DEXs) usually fall into two extremes: over-simplified "Swap" interfaces (good for newbies, bad for pros) or complex, developer-centric tools (good for pros, scary for newbies)
The User Pain: New users are often intimidated by "Web3 jargon" and clunky UIs, while professional traders reject platforms that lack depth
The Goal: To design a scalable interface that feels familiar and safe for beginners, but offers institutional-grade depth for veterans
THE SOLUTION
I used the familiar layout of centralized exchanges (CEX) to create a sense of safety and predictability. Crucially, I implemented "Smart Defaults" and "Guided Interactions" so new users can trade immediately without getting overwhelmed by the underlying blockchain mechanics
VID
Benchmarking the Best: CEX Familiarity on a DEX
To lower the barrier to entry, I analyzed the interaction patterns of market-leading Centralized Exchanges (CEXs) and adapted them for the decentralized world.
Instead of forcing users to learn a new 'Web3' interface, I implemented the proven, industry-standard layout they already trust: a central chart flanked by a dynamic order book and trade form.
This strategic alignment allows traders to access powerful decentralized features—like self-custodial 100x leverage and on-chain settlement—using the exact same muscle memory they developed on traditional platforms
VID
Barrier-Free Access
I removed the 'Login Wall' to build trust. Users can fully interact with live charts, check real-time liquidity, and explore the interface without restriction. Authentication is only required at the exact moment of trade execution—putting the user in complete control
VID
The "Pocket Terminal
The Feature: A fully responsive mobile trading interface that retains 100% of the desktop functionality.
The UX Win: Instead of simply shrinking the desktop view, I utilized a Bottom Sheet Architecture. This keeps the price chart visible at the top (context) while the user inputs complex data (order details) below, solving the "small screen, big data" problem.
Touch-Optimized Controls: I replaced text inputs with Slide Interactions for leverage adjustments, designing for "thumb-zone" ergonomics rather than mouse precision.
Safety Layers: Recognizing that mobile users are prone to accidental taps, I designed a high-friction Confirmation Modal that summarizes critical risk data (Liquidation Price, Margin Cost) before the transaction is sent to the chain.
VID
Staking & Retention Architecture
The Feature: A dedicated liquidity management dashboard that incentivizes long-term holding through visual feedback.
The UX Win (Visualizing Value): Instead of a static text list, I designed an interactive "Time-Based Tier System". Users can toggle between lock-up periods (1 month to 2 years) and instantly see the APR jump from 7.12% to 57.7%, gamifying the decision to commit assets for longer.
The UX Win (Transparent "Exit Logic"): Unstaking in DeFi often has hidden traps. I designed a high-friction Unstaking Modal that clearly breaks down the consequences before execution. It explicitly calculates the "Early Withdrawal Penalty" (5%) and highlights the "3-Day Unbonding Period," ensuring users aren't blindsided by protocol rules.
Interaction Detail: The dashboard features "Optimistic UI" updates—notice the "Est. Reward" calculator updates in real-time as the user types their stake amount, providing immediate clarity on potential returns.
IMG
Building Trust Through Structured Clarity
In a domain where confusion can lead to financial loss, clarity is the ultimate trust signal. I implemented a Bento Grid/Modules UI Design to ensure that every piece of important information has its own dedicated space, preventing vital data from getting lost in the noise. This modular approach makes the interface transparent by default; users can easily locate and digest critical status updates—from Staking Rewards to Order Risk—instantly.
By organizing the chaos into a structured grid, we prove to the user that the platform is stable, organized, and has nothing to hide.
MORE UI DESIGN STUFF
IMG
Eliminating Uncertainty Through Status Visibility
I designed this trading interface to bring the familiarity and performance of a centralized exchange into a decentralized environment. The goal was simple: make advanced features like perpetual futures, TP/SL, and fast position management feel intuitive, predictable, and safe—without sacrificing the transparency of DeFi. By borrowing proven CEX interaction patterns and refining them for on-chain constraints, this UI lowers the learning curve for new users while staying powerful enough for experienced traders.
KEY TAKEAWAY
CEX Patterns as an Onboarding Layer
I treated centralized exchanges as the baseline mental model for new users. By mirroring familiar trading flows, I reduced onboarding friction and helped users enter DeFi without having to relearn how trading works.
Lower the Learning Curve, Not the Capability
Instead of simplifying the product, I simplified the first experience. Advanced features remain intact, but are progressively revealed as user confidence grows.
UX as a Bridge to Decentralization
Rather than educating users about DeFi mechanics, the interface absorbs that complexity. Good UX becomes the bridge—guiding users from familiar CEX behavior into a trustless environment without fear.
Back to top
