intro: Cross-network Swap in Zerion
Redesigned Zerion Swap into a cross-network trading flow.
The new version combined swap and bridge into one experience, so users could buy or sell an asset on one network and receive it on another without using a separate bridge flow.
The project reduced the number of steps in the trading flow, improved error handling, and made the core transaction experience faster and more reliable.
Problem
Trading across networks is one of the most complex parts of crypto UX.
In the old flow, users often had to deal with separate steps for swapping, bridging, approvals, network changes, transaction states, and errors. Even for advanced users, this added friction and increased the chance of mistakes.
For Zerion, Swap was a core product surface. Improving it meant improving one of the most important parts of the app.
Role & team
Role: Lead Designer.
Scope: Research, user journey mapping, competitor analysis, UX flow, UI, testing, design system, specs, PRD collaboration.
Team: Product, engineering, design.
I led the design work for the new Swap experience. This included mapping the existing flow, identifying problems, designing the cross-network model, testing builds, and working closely with PM and engineering.
Approach
I started by mapping the full trading journey from the user's perspective.
I went through the flow with default settings and realistic actions, from starting a trade to receiving the token. In the old flow, a regular transaction path could reach around 20 steps when including confirmations, approvals, transaction states, and edge cases.
This helped the team see where the flow was too long or fragile.
I also reviewed trading entry points, user decision time, support feedback, and common transaction issues. After that, I tested around 10 competitors and ran several power user interviews to understand how users expected swaps, bridges, and network selection to work.
Challenges
The main challenge was adding cross-network logic without making the interface feel more complex.
The old Swap flow and the new cross-network logic had to work together. Adding more networks and routing options made the system much more complex under the hood, but the user experience had to stay familiar.
Testing was also a big part of the work. I spent several days testing old and new builds, checking edge cases, errors, approvals, and transaction states to understand what needed to change.
Solution
We combined swap and bridge into one flow.
Users could choose the source asset and network, then receive the target asset on another network without going through a separate bridge experience.
We also simplified the flow:
- reduced unnecessary steps
- combined approval and transaction steps where possible
- improved search
- redesigned error states
- improved transaction feedback
- kept the form familiar while adding cross-network functionality
- updated Send flow
The goal was to make the product more powerful without making the interface feel heavier.
Results & impact
The number of steps in the trading flow was reduced significantly, roughly by half in many cases. On the happy path, the reduction was even stronger.
Transaction errors became clearer and easier to understand. Instead of showing raw or unclear messages, the new flow gave users better context about what happened and what to do next.
The project also improved our internal workflow. We used AI in parts of the design and animation process, and worked with a hybrid PRD format designed for both people and LLMs.
The feature is being rolled out more broadly, with more usage data expected after full release.
Next steps
Next steps include improving transaction state visibility, refining error handling, and optimizing the flow based on real usage data.
The project also created a stronger working pattern for future complex flows: journey mapping, close design-engineering collaboration, and PRDs that work well for both humans and AI tools.