Intro: Cross-network Swap in Zerion
I redesigned Zerion Swap into a cross-network trading flow that combined swap and bridge into one experience.
The project helped users buy or sell an asset on one network and receive it on another without going through a separate bridge flow.
My role was to lead the design work across journey mapping, flow simplification, cross-network logic, UI, error states, and engineering alignment.
The new flow reduced the number of transaction steps, made errors easier to understand, and made the core trading experience faster and more reliable.
Problem
Trading across networks was one of the most complex parts of Zerion Swap.
The old flow separated swaps and bridges into different experiences. Users had to move through multiple steps: asset selection, network changes, approvals, bridging, transaction states, and errors.
This created friction even for advanced users and increased the chance of mistakes.
Because Swap was one of Zerion's core product surfaces, improving this flow meant improving one of the most important parts of the app.
Role & team
Role: Lead Designer.
Scope: User journey mapping, competitor analysis, UX flow, UI, testing, design system, specs, error states, and PRD collaboration.
Team: Product, engineering, design.
I led the design work for the new Swap experience. My role was to map the existing flow, identify friction points, design the cross-network model, simplify the transaction journey, and align the solution with product and engineering.
I also tested builds closely, especially around approvals, transaction states, errors, and cross-network edge cases.
Approach
I started by mapping the full trading journey from the user's perspective, from starting a trade to receiving the final asset.
In the old flow, a regular transaction path could reach around 20 steps when including asset selection, network changes, approvals, confirmations, transaction states, errors, and edge cases.
This helped the team see where the flow was too long, fragile, or hard to recover from.
I also reviewed trading entry points, user decision time, support feedback, and common transaction issues. Then I tested around 10 competitors and ran several power user interviews to understand how users expected swaps, bridges, and network selection to work.
Challenges and trade-offs
The main challenge was adding cross-network logic without making the interface feel more complex.
The biggest product trade-off was between exposing routing complexity and keeping the flow familiar. Cross-network swaps introduced more networks, routes, approvals, transaction states, and possible errors, but the user still needed to feel like they were making one clear trade.
The second trade-off was around control. Advanced users needed enough information to understand what was happening, but showing every technical detail would make the flow heavier. We focused on decision-critical information and moved technical complexity into clearer transaction states and error handling.
The third challenge was reliability. I spent several days testing old and new builds, checking edge cases, approvals, transaction states, and errors to understand where the flow could break or become unclear.
Solution
The final solution combined swap and bridge into one cross-network trading flow.
Users could choose the source asset and network, select the target asset and network, review the route, and receive the final asset without going through a separate bridge experience.
The core design decision was to keep the familiar Swap form, but extend it with cross-network logic. This made the product more powerful without making the interface feel like a new tool.
The redesigned flow reduced unnecessary steps, improved asset and network selection, made transaction states clearer, and turned raw error messages into more actionable recovery states.
Results & impact
The project redesigned one of Zerion's core transaction flows, not just the visual layer.
We combined swap and bridge into one cross-network trading experience, rebuilt asset and network selection, improved transaction states, redesigned error handling, and simplified the path from trade intent to receiving the final asset.
In many cases, the number of steps was reduced roughly by half. More importantly, the flow became easier to understand and recover from when something went wrong.
The redesign also improved how the team approached complex transaction flows. We created a clearer working model for journey mapping, edge-case testing, design and engineering alignment, and PRDs designed for both people and LLMs.
The feature started rolling out, with more usage data expected after the full release.
Post-launch learnings
The main learning from this project was that cross-network trading is not only about combining swap and bridge into one flow.
The hardest part is helping users keep context across the whole transaction: source asset, target asset, source network, target network, approvals, routing, progress states, and errors.
This changed how we approached complex transaction flows. Instead of designing only the main form, we started treating the full transaction journey as one connected experience, from trade intent to completion or recovery.
The project also gave the team a stronger working pattern for future complex flows: detailed journey mapping, edge-case testing, close design and engineering collaboration, and PRDs that work well for both people and LLMs.