Download CV
THE MISSION
As the sole UI/UX Designer, I transformed a functional Web3 protocol into an intuitive, conversion-focused CS2 skin marketplace. Across a one-year contract, I architected the complete cross-platform experience—from marketplace discovery and inventory management to trade settlement and a tokenized design system—abstracting Web3 complexity so buying skins feels as familiar as any top-tier online store.
STORY OF THE PROJECT
Dupe.fi serves three distinct user groups: casual players wanting quick skin upgrades or cashouts through a familiar e-commerce checkout; high-volume traders seeking low fees, instant payouts, and reliable seller analytics; and business partners integrating via API for reliable cross-border payouts. Unlike traditional skin marketplaces, Dupe never holds user funds—money stays in the player's non-custodial wallet until a transaction resolves. Working alongside the CEO and core engineering team, I turned complex Web3 mechanics—wallet integration, card funding, and gasless transactions—into intuitive, friction-free UX flows. I continuously validated every iteration through Discord user testing, deploying updated UI designs after each feedback loop.
VISUAL DIRECTION
The look went through three versions before it felt right for players who don't trust crypto.
// THE PAIN
I joined Dupe.fi at an early stage. The team already had a vision for the product, and one of their first screens looked like this: the dark violet, cosmic style that every NFT product used in 2023. Dupe.fi wanted to stand out, because the way the company worked was already unique, but the visuals didn't match. They felt generic, didn't connect with players, and looked like crypto rather than CS2.
// THE SOLUTION
After my first meeting with the team, I felt the product needed a redesign and built version 2 as my first prototype and proposal: two sci-fi directions in orange, “CRT Monitor” and “Futurism & Neurolink”, with Buy Now and Send Offer appearing on hover. After that call, the company hired me to bring this vision to life. I refined it into version 3: a clean, technical sci-fi style with a green accent, in light and dark themes, where the item images and rarity colors carry the visual weight and the interface stays calm around them. It reads as a professional trading tool rather than a crypto product.
// THE RESULT
The product grew from 1 screen to 80 unique screens in the first released version.
MARKETPLACE
CS2 traders search by details that casual shoppers never see, while casual players just want to browse. The marketplace had to serve both.
// THE PAIN
A generic store layout can't answer a trader's questions: how worn is this skin, what is its paint seed, which stickers does it have and in which slot? Leave those out and traders go elsewhere; put all of them on screen and casual players get lost.
// THE SOLUTION
A filter panel that covers every detail traders search by, item cards that show the essentials and reveal the rest on hover, and grid and list views so casual players can browse visually and traders can compare quickly.
- Price range with a slider and manual input
- Paint seed and float value, with a color-coded wear bar and quick buttons (FN, MW, FT, WW, BS)
- Sticker search by slot, plus category (StatTrak™, Souvenir, Normal), rarity and listing type
- Item cards with wear, float, price, discount, seller stats and listing time left; hover shows sticker details, Buy Now, Send Offer and add to cart
- One cart for Buy Now, Auction and Negotiable listings, with the 1.5% sale fee and the total always visible before checkout
- Trade updates in a notifications dropdown with View, Mark as Read and Delete
CAPPED FLOAT ICON
Float value decides how worn a skin looks, and many skins can only exist within a limited float range.
// THE PAIN
A float number alone doesn't tell a trader where a skin sits in its possible range, or whether a better float can exist for it at all. Traders needed to see that at a glance, on every card.
// THE SOLUTION
I designed a capped float icon and tested two variants. Each is documented in an icon legend and shown on a real item card, so the developers and the CEO could compare them in context.
- Variant 1: a dashed square with a cut line marks the “sweet spot”, where the skin is in acceptable condition or has an appealing look
- Variant 2: mixed borders, solid for the available float range and dashed for the range that doesn't exist for that skin
DESIGN SYSTEM
I built the Dupe design system so one product could work across two themes, desktop and mobile, and a whole development team, all from a single source.
// THE PAIN
The product worked, but it had no system behind it. Sizes and spacing used decimal values like 13.5px, with no grid to align them. Every screen functioned, but without a shared scale, nothing lined up: spacing drifted from page to page, and the interface had no visual rhythm. With two themes, desktop and mobile layouts, and a growing team, every new screen added more inconsistency.
// THE SOLUTION
One library as the single source of truth. Rather than a static style guide, the system runs on Figma variables mapped one-to-one to code tokens, so design and development never drift apart. I used the Atlassian Design System as my benchmark for quality: clear structure, consistent detail, and documentation anyone can follow. It's the part of this project I'm most proud of.
- Built on a 4px grid. Every size, gap and layout follows a 4px unit and a 12-column grid. Values like 13.5px gave way to a shared scale developers can predict.
- Tokens named for code. Primitive color scales feed semantic tokens named by purpose, such as Surface/Primary, Border/Subtle and Interactive/Focus, the way developers name variables. 78 palette colors feed 99 tokens, so one change updates the whole product.
- Rarity keeps its own colors. CS2's rarity tiers, from Covert #EB4B4B to Classified #D32CE6, sit apart from the interface palette and stay the same in both themes, because in CS2 rarity is part of an item's identity.
- Two themes, one switch. Dark and light run on Figma variable modes, so every component switches theme in one click, with no duplicated components and no layout drift.
- Type by role. Matrix Sans carries the interface and every number, from float values and pattern seeds to wallet balances and fees. Orbitron sets the headlines, and DM Sans handles longer reading text.
- Built like LEGO. Every component uses Auto Layout, resizing rules and explicit states: Default, Hover, Active, Focus, Disabled and Loading. Small pieces such as buttons, icons and tags combine into item cards, filters and the cart: about 200 component families and 970 variants.
- Built for CS2. Dense inventory cards with float bars, trade-lock indicators, rarity borders and inline hover actions, plus slot-based drawers and modals for trade confirmations, wallet signatures, deposits and withdrawals.
- Documented like a public design system. Each category has its own page: a header with version and update date, light and dark examples, all variants, and a usage table explaining when to use what.
Dupe UI Kit
Tokens from the live product
// 01 Palette
Primitive scales; every other color is a token pointing at one of these
Gray
Green
Orange
Red
Blue
Yellow
Dark blue
// 02 Rarity tiers
CS2's own colors, kept apart from the interface and the same in both themes
// 03 Two themes, one library
One search component, four states, both themes: the same tokens, pointed at different primitives
state: default
state: hover
state: focus
state: typing
state: default
state: hover
state: focus
state: typing
- Surface/Fieldgray-0dark-blue-2
- Surface/Hovergray-2dark-blue-0
- Border/Subtlegray-4dark-blue-0
- Text/Placeholdergray-7gray-6
- Interactive/Primarygreen-5green-1
- Interactive/Focusgreen-5green-1
// 04 Typography
Three faces, each with one job
Matrix Sans
Interface and data: prices, floats, seeds, wallets
Own your funds.
Aa Bb Cc 0123
Orbitron
Headlines
Fund your Dupe wallet with USDC using card, Apple Pay or bank transfer.
Aa Bb Cc 0123
DM Sans
Longer reading text
// THE RESULT
Tokens replaced every arbitrary pixel value and hardcoded hex color, which cut UI bugs in QA. New features went from idea to design about 60% faster, even complex flows like bulk listings and live price charts, and layouts stayed consistent across 1440px desktop, 1024px tablet and 375px mobile. The team built the product in React directly from the system, developers who joined after handoff understood the file on their own, and the product still runs on it today.
FROM IDEA TO FINAL LOOK
Every new feature went the same way, from a rough idea to the final screen. The referral program is a good example.
// THE IDEA
It started as rough prototypes: wireframes for each state of the page, signed out, signed in, and signed in and eligible for the program, with notes for the team on referral benefits and how the list sorts.
// THE FINAL LOOK
The prototypes then became the final design: earnings for the last 30 days, 180 days and all time, a three-step “How it works”, a referral code and links to copy, and a sortable list of joined referrals.
// WHY IT WAS FAST
It was quick to build because the whole system works like LEGO. Everything that can be reused lives in the library as components with props, so every new iteration takes less time than the one before.
MOTION
I designed animated icons for the product's key moments: notifications, favorites, trending items, market data charts, notification history and the dispute flow.
// FRAME BY FRAME
Every animation started as a frame-by-frame design in Figma, in light and dark variants, so each step of the motion was decided before any code. The frames were then prepared for Lottie (JSON) export.
// LOTTIE IN THE REAL PRODUCT
Developers dropped the Lottie files straight into the React app without rebuilding them. On the live features page, the icons for trending items, market data, trade verification, notifications and customization play exactly as designed.
TRADING FLOW AND TRUST
The biggest risk was trust.
// THE PAIN
Scams are common in CS2 skin trading. A cautious player needs to know who they're trading with, what happens next, and what happens if the seller never delivers. Without those answers, they don't trade.
// THE SOLUTION
I redesigned the trading flow with step-by-step guidance and alerts covering seller stats (delivery rate, average fulfillment time), refund rules and scam protection. At every step, users can see what happens next and what happens if the seller doesn't deliver. Total trades grew 27% in 2024.
GUIDES
Most CS2 players had never used a crypto wallet. Dupe Guides is the help center inside the product that walks them through it, from creating a wallet to selling their first item.
// THE PAIN
Wallets, USDC and blockchain notices were new to most players. A player stuck on a wallet step had nowhere in the product to look for an answer, and left.
// THE SOLUTION
A guides section built into the product, in the same style as the marketplace, so help never feels like leaving it.
- A sidebar grouping the guides into Dupe Basics, Market Making, Crypto Basics and Anonymous Accounts
- An “On this page” index for every guide, so players jump straight to the step they're stuck on
- Short steps in plain language, paired with screenshots and video walkthroughs of the real screens
SCOPE AND RESULTS
The first release grew from 1 screen to 80 unique screens. Desktop: Marketplace, Inventory, Leaderboard, Listing Page and Trade. Mobile: responsive layouts for the marketplace, inventory, trading and redeem flows. Everything in light and dark themes, handed off with interactive Figma prototypes, a documented component library, theme variables and Lottie files ready for React. Total trades grew 27% in 2024, Dupe.fi is rated 4.4 on Trustpilot, and the live product at dupe.fi still runs on my design.