xSwap

Swap

Swap is one of the core flows: users come here to exchange one token for another. I followed the standard pattern to keep it familiar: Max button, token-field switch, wallet balance, and USD value.

The built-in Faucet removes a major drop-off point: users don’t leave the product to hunt for gas, and can complete their first swap faster.

After the form is filled, we show the important details: rate, price impact (with warnings when it’s too high), network cost, etc. For advanced users, there’s Route — it shows which tokens and pools the swap goes through. You can copy pool or token contract addresses, and we explain route optimization and gas cost, e.g.: “Best price route costs ~$6.97 in gas… considers split routes, multiple hops, and the gas cost of each step.” This makes the product feel transparent: you can see how it works and why the numbers look the way they do.

Route и некоторые состояния формы свапа

Pools

Пулы я разделила на два блока:

• •My positions — управление активными позициями и быстрые действия
• •и All pools — витрина для сравнения и выбора (TVL/APY/объёмы).

Claim rewards осуществляется не с каждой позиции отдельно, а со всех сразу, чтобы упростить процесс.

Add/Remove liquidity

Добавление ликвидности – это несколько шагов с подтверждениями в кошельке. Я добавила подсказки и степпер, чтобы было понятно, на каком этапе пользователь сейчас. Пока шаг выполняется – все кнопки и поля задизейблены, чтобы избежать ошибок.

Remove liquidity выглядит уже проще, но увеличился инфо блок.

Token Sale

Token Sale должен продавать токен платформы (SWA), чтобы в дальнейшем принести пользователю прибыль. Для этого нужно выбрать сеть – самое важное, поэтому в красном алерте, и успеть купить токен подешевле – таймер с обратным отсчетом, условия и цена покупки на нынешнем и следующем этапе. Чтобы усилить мотивацию, я добавила кликабельный калькулятор прибыли. По дефолту он заполнен, в него можно потыкать и поменять значение, а вообще он синхронизирован с полем на основной форме. При заполнении формы слева – в калькуляторе прибыли пользователь сразу увидит, сколько он рассчетно получит через 3 месяца.

Еще я добавила видео-гайды для новичков, чтобы снизить барьер входа и нагрузку на саппорт. Вот так они выглядели:

Lock + Voting

Этот раздел был самым нетривиальным в проектировании – мало хороших референсов, много новых сущностей: veSWA, voting power, incentives. Механика следующая: когда пользователь лочит SWA, он получает veSWA – это его voting power. С помощью veSWA он голосует за пулы и тем самым влияет на распределение incentives и итоговую доходность. Я разделила сценарии на Lock (локи, сроки, unlock) и Voting (голоса и их эффект), добавила ключевые метрики (veSWA, rewards, unlock date) и подсказки/empty states.

Попапы для vote и lock

Outcome

In one month, I designed the product, handed it off to frontend, and coordinated implementation quality. The result is a clean, understandable AMM interface with extra “goodies” for power users and a lot of guidance for beginners. We also shipped a Vietnamese version and launched for the Vietnamese market (and yes — I had to design it as a separate UI set, because “it’s going to break anyway” is a very real argument in startup life).

Vietnamese version (why it lives in Figma? because “it’s going to break, let’s just redraw it” — said the client and the frontend team). Also: some UI library components.