Pinto: The "No-Surprises" Token Swap
Protocol Outcomes: Liquidity & Reliability
The redesign of the token swap system was a primary driver for protocol adoption. By making the "entry point" to the pinto ecosystem friction-less, we saw a measurable increase in new wallet connections.
Reduced Support Burden: The "no-surprises" approach significantly reduced the number of user errors and failed transactions caused by misunderstood slippage settings.
Scalable Infrastructure: The specialized web3 component library I built for the swap now allows the team to add new asset pairs with zero additional design work.
Role
Lead Designer. Working with Two back-end and one front end engineers
Problem & Goal: Bridging the Confidence Gap
Swapping assets in a decentralized environment is often a high-anxiety event for retail users. Most swap interfaces are cluttered with technical data, slippage, gas estimates, and raw hex code. That creates a massive "usability debt".
The Challenge: How do we make swapping pinto feel as safe and predictable as a standard currency exchange?
The Goal: Eliminate the fear of "slippage" and "failed transactions" by providing absolute transparency before the user ever commits their funds.
Collaboration: Engineering the Semantic Layer
I worked directly with the smart contract engineers to understand how the protocol routes trades through various liquidity pools.
Translating Logic: I led the effort to map technical protocol states (like "insufficient liquidity" or "price impact too high") to clear, actionable UI messages.
I ensured our design tokens for "risk-high" and "status-success" were tied directly to the contract's output, creating a single source of truth for the entire user experience.
Ideation: Outcome over Plumbing
A user shouldn't need to understand how a liquidity pool functions to move their money.
Intent-Based Pathing: I designed the system to focus on the user's intent—swapping X for Y
The Pre-Flight Logic: I architected a confirmation step that acts as a safety net, translating the technical swap into a plain wording.
Final Overview
This screen prioritizes extreme clarity. I removed the standard clutter, highlighting the exchange rate and the final "received" amount to reduce cognitive load for non-technical users.
Before signing, the user sees a "pre-flight" summary. It explicitly states: "You are swapping 1000 usdc for approximately 980 pinto" along with a clear warning if price impact is high.
