CASE STUDY
Designing Velora Trading Widget
- TIMELINE
- Nov 2025 - Jan 2026
- COMPANY
- Velora
- INDUSTRY
- Decentralized Finance
- MY ROLE
- Head of Design
Strategic mission
As Head of Design, I led the Velora Trading Widget, driving it as a key growth and distribution channel for the protocol. The goal was to make intent-based cross-chain trading easy to embed in any partner product, using configuration rather than custom builds.
The Project
Velora Widget is a new integration layer of the Velora Protocol. It’s a plug&play customizable React component that empowers founders, product managers, and developers with a quick way to integrate Velora’s intent-based cross-chain trading capabilities into their DeFi projects.
Tools
Figma, Framer, Notion, Jitter
The Context
Designing the trading widget as a growth and distribution engine
Rebranding from ParaSwap to Velora marked a pivotal moment for us. We evolved beyond a simple liquidity aggregator and set our sights on building an intent-based, cross-chain trading platform. This strategic shift unlocked powerful new features like MEV protection, gasless trades, best-price execution, and instant cross-chain swaps.
The Problem
Velora's protocol had become more powerful, but harder to activate quickly for partners
Existing integration paths required significant engineering efforts and ongoing maintenance on the partner side, slowing adoption and limiting how fast partners could ship.
At the same time, legacy iframe-based solutions lacked flexibility, branding control, and modern interaction patterns.
How might we turn Velora’s trading infrastructure into a product that partners can adopt in days, not months, while ensuring end users always feel informed, safe, and in control?
The Challenge
Deliver powerful cross-chain trading without added complexity
The main challenges of this project:
- Offer advanced cross-chain trading capabilities
- Gain trust and offer transparency in a high-risk financial context
- Adapt to multiple environments (stand-alone, embedded, modular, mobile, dark/light theming)
- Scale across many partners through configuration rather than custom builds
The core tension was clear: power vs. simplicity, flexibility vs. safety, speed vs. maintainability.
One additional challenge was strategic: Velora chose to become the first client of the widget, replacing parts of its core product with it. This meant the widget had to meet both internal product standards and external partner expectations from day one.
Evidence & Insights
Design decisions grounded in real usage
Product analytics, partners’ feedback, user testing sessions, and support tickets revealed recurring friction points across the trading experience.
Competitive Analysis
Where Velora leads, others stop
Velora is the only widget that combines instant (intent-based) cross-chain trading, OTC orders, a dedicated trade lifecycle UI, and a no-code configuration layer into a single native React component.
Jobs to be done
Designing one system for Four stakeholders
The trading widget had to serve four distinct users simultaneously, each with different definitions of success.
The Solution
One trading system, multiple contexts
Velora Widget is a configurable and embeddable trading system that exposes Velora’s cross-chain execution capabilities across partner dApps and Velora’s own product. It was designed to adapt to different environments while remaining a single, maintainable system.
The same widget can run as a standalone experience, live inside partner applications, or power Velora’s core trading interface. Configuration and theming allow it to fit different contexts without fragmenting the product or creating custom builds.
This approach enabled fast partner onboarding, consistent execution behavior, and long-term scalability without increasing maintenance overhead.
- -One trading system serving multiple contexts (standalone, embedded, partner dApps, mobile, dark/light)
- -Configuration over custom builds, scaling onboarding without scaling design or eng effort
- -Replaced limited iframe approach with Widget Playground, a no-code real-time configuration environment
- -Redesigned trade overview merges status tracking and order details into a single workflow with brand storytelling
How the system works
Velora Widget is built around a single-core system. Partners configure how it looks and where it runs, but execution and routing remain consistent and under Velora's control.
Information Architecture: annotated task flow for cross-chain swaps
I designed the widget to support four trading modes: Swap (Market and Delta / Delta Crosschain), Swap & Transfer, Limit Order, and OTC. Instead of creating separate flows for each mode, I focused on building a unified submission pattern. This way, users interact with the same core flow, and only the controls they need appear in each context. The task flow below highlights the Swap experience and covers all possible edge cases and state changes.
Besides the core trading features, we accounted for support features such as wallet connection management, asset and order lists, trading parameters, and access to the protocol explorer.
Focus on the new Trading Overview
The original flow had three screens: a review step that repeated trade details already visible on the main interface, a single monitoring screen with a two-step timeline (token approval, then order execution), and a final order details page accessible only after redirect. The system worked but lacked visibility into the cross-chain, intent-based execution layer, and had no room to scale as new trading modes shipped.
The redesign rethinks the entire flow around clarity, control, and storytelling:
- Cut the redundant review step. Trade details are already visible on the main interface. The new entry point leads with the action, not a repeat of what the user just saw.
- Real-time visibility into execution. Users now see exactly where their order is: approving token allowance, auction in progress, or execution in progress. The intent-based system is no longer a black box.
- One unified workflow. Trade overview and order details are merged into a single surface, removing the post-trade redirect and providing a continuous experience from submission to settlement.
- Brand storytelling as a UX layer. Animated videos turn execution wait time into a hunt story, easing user stress and abstracting blockchain complexity. Brand becomes a functional asset, not just a skin.
- User control preserved. Cancel order and contact support remain available throughout the flow.
- Situational awareness. Contextual tips explain why a trade might take longer than expected (gas spikes, network congestion), reducing support load and building user trust.
Configuration layer: Widget Playground
The Playground is a no-code configuration environment that lets the partner customize and test the trading widget without writing a single line of code.
The previous iframe integration gave partners a binary choice: take the widget as-is, or don't. The Playground replaced that with real customization and ownership.
- Playground helps generate leads for the widget as a product.
- Partners can explore the full configuration surface before committing.
- Partners moved from hiding elements via URL parameters to controlling layout, typography, color tokens, modes, themes, etc.
The Impact
Launch readiness and early signals
The Trading Widget has shipped as a production-ready system and is now powering Velora’s main trading interface without disrupting user adoption. The experience remains seamless while enabling expanded functionality.
Early traction signals:
- Integration underway with several major DeFi platforms, with significantly faster onboarding compared to API, SDK, or iframe approaches
- Existing iframe partners migrating to the widget
- Increased trading volume observed post-deployment
- Successful rollout of additional capabilities such as cross-chain limit orders and aggregated cross-chain bridges, confirming architectural scalability
The foundation is now validated in production and positioned for broader ecosystem adoption.
Leadership Perspective
Designing systems that scale with the business
The Trading Widget was built as a scalable system and a distribution engine, not just a trading interface. It required aligning business growth, technical constraints, partner expectations, and user trust within a single product foundation.
The result is not just a shipped widget, but a foundation that enables faster partnerships, safer execution, and long-term product evolution without fragmentation.
At an organizational level, this meant:
- Establishing clear system boundaries to avoid bespoke integrations
- Creating a shared integration model across Product, Engineering, and Business Development
- Using internal adoption to validate architecture before external scale
At a user level, it meant ensuring that flexibility for partners never compromised clarity, predictability, or trust in high-risk financial interactions.
Other Case Studies
Designing and building VLR Token Distribution Platform
Unslashed Finance - Decentralized Insurance Protocol
Ready to collaborate?
Let's discuss how we can build something impactful together.
Get in touch