CONTACT
WEB3 · BRIDGE & SWAPNOV 2022

Taiko

Taiko is a Layer 2 scaling solution for Ethereum. I designed the bridge and swap for its testnet launch, when most users had never bridged a token before.

CLIENT
Taiko
ROLE
Product Designer, UX/UI
DURATION
6 months
PLATFORM
Desktop · Mobile
RESULTS

About 10,000 people used the bridge and the swap to move and trade tokens during the testnet launch. Taiko Labs has raised $22M, and the network now processes 5M+ transactions a day.

10,000+
Users at testnet launch
5M+
Daily transactions today
OVERVIEW

Before users could trade on Taiko, they needed to connect their wallets, move tokens between networks, and choose a processing fee.

I owned the UI and UX for both products at testnet launch: the bridge between Taiko L1 and L2, and the swap that follows it. Desktop and mobile from day one, for people who had never used a rollup.

The bridge shows the transaction’s status throughout the transfer, including when it is ready to claim.

The swap followed Web3 convention rather than inventing one: token search, quick picks, a balance on every row. I used familiar swap patterns to reduce the learning curve for people who had traded tokens before.

The “No Fees” option explains the manual claim step and expected wait. The button shows block confirmations while the transfer is pending.
Import, Review, Confirm sits above the form, so you know how many steps are left before you start.
Every row carries your balance, so choosing a token does not mean leaving to check what you hold.
01

Wallet connection adds both Taiko networks, L1 and L2, in one prompt.

02

The recommended fee gives users a starting point, while a custom option lets them adjust it.

03

A custom fee stays available, with a risk notice attached.

04

Users can check whether a transfer is pending, confirmed, or ready to claim without leaving the screen.

05

The swap keeps Web3 conventions: token search, quick picks, a balance on every row.

Bridge Token, the default screen before a wallet connects.
Both network setup options are available in one dialog.
Pending stays in the header and in the wallet menu, on every screen.
Bridge, on mobile.
Swap, on mobile.
Swap, on desktop.
NEXT PROJECT