Overhauling the Dexible Order Form
How I reduced trader order abandonment by 70%.
After the team and I launched a comprehensive product strategy for Dexible following the development of a year long roadmap, we ran into a complex problem. it became clear that across our feature releases, we were suffering from a serious issue: traders were consistently starting orders, but failing to complete them. This was not just a minor UX problem, but a fundamental flaw in the system that was driving a high rate of order abandonment. For a product aiming to simplify and optimize the experience of accessing DeFi in a more sophisticated way, the loss of these traders was a major threat to Dexible’s competitiveness and long-term viability. How deep did the problem stem? Was it a fundamental product-market fit problem?
The bounce rates and the order abandonment wasn't simply rooted in individual user behavior alone, but was symptomatic of larger inefficiencies embedded across the whole user journey, platform UX, and messaging. We would decompose these challenges across these verticals. In one of those domains, I led the frontend team, andI sought to attack this problem in the trade setup process.
Following the initiation of our comprehensive product strategy for Dexible, we launched successive rounds of frontend testing and iterations. We recognized a persistent and costly issue: traders were initiating trades but failing to follow through, leading to a high rate of order abandonment. This behavior was not merely a byproduct of individual user decisions but a symptom of deeper inefficiencies within the UX—specifically, friction points within the trade setup process that were causing users to disengage.
UX has consistently been the shortfall of creating successful Web 3.0 products. These products, by the nature of running off on-chain state and having their own unique protocolized set of rules and laws, are notoriously complex. Users need to connect wallets, sign messages, sign and grant approvals, sign transactions. They need some way to monitor the progress of those transactions—praying, they don't get idenfinitely stalled. Each step introduced more and more friction. In the case of Dexible, traders were simply giving up before finalizing their trades. Every abandoned trade represented a significant loss in economic value, and if we didn’t address the issue, Dexible’s competitive positioning in a rapidly evolving market could be permanently undermined.
To address this, I initiated a comprehensive analysis of user behavior, leveraging Google Analytics and PostHog to track and quantify abandonment rates across the platform. We needed to gather new metrics and dive into user interactions. GA enabled us to capture key behavioral indicators—such as where in the order form, users were encountering friction. It wasn’t always clear and the frontend team and I encountered a number of additional pain points with how our recordings were being processed. We lacked the ability to standardize the viewport leading to inconsistent recordings where our UI would be entirely messed up on the screen.
To resolve this, we reworked our Typescript to ensure that the frontend would render appropriately. By integrating these tools into our frontend event tracking system, we were able to gather precise data at each stage of the trade setup, from the initial input of trade parameters to the final confirmation screen. As we fixed the recordings were getting from PostHog, these session recordings allowed us to visually inspect individual user flows, pinpointing moments of confusion, hesitation, and eventual abandonment. What we saw was that there was significant confusion around communicating the details of the swap. We weren’t able to signify the implications of the swap order panel solely in the swap form, and needed to render Order Estimates revealing more implications of each of their choices.
To synthesize and evaluate our frontend data effectively, we used GA dashboards and integrated GA data into a Grafana dashboard. This dashboard became our primary tool for visualizing the collected metrics, offering detailed insights into user behavior patterns, drop-off rates, and the friction points within the UX. The dashboard’s real-time data streams allowed us to track the evolution of these patterns across multiple user cohorts, providing a clear picture of how abandonment behavior manifested across different user types.
The high rate of trader order abandonment on Dexible was more than just a UX issue—it was an existential threat to the platform’s business model. Every abandoned trade was a missed opportunity to actualize value, a clear instance of deadweight loss that was bleeding potential revenue. Traders were engaging with the platform but halting mid-process, unsure of how to navigate the multiple decisions they were faced with during the trade setup.
Worsening all of this, all of Dexible's users were fully anonymous. Our platform didn't require sign-on, only wallet addresses. At the time, we felt that this was essential to the fundamental value proposition of coming into the decentralized finance ecosystem—personally, I'd later evolve that stance. But at least at the time, all users in DeFi were fully unknown to us. From a sales strategy, this presented a monumental challenge and frustrations from being unaware of whether bouncing account sessions were from a potential client we just demoed, an investor we just pitched, a crypto Twitter influencer, or a random kid with $5 to their name.
Worsening our ability to understand the nature of the problem, beyond the total anonymity of the users that came to the site, some hadn’t even connected their wallet before going entering the UX journey. This would leave us entirely in the dark.
This issue, not knowing whether we were losing out on high-value institutional traders or casual retail users, would drive me crazy.
So we had to generalize our approach. The cognitive load traders faced during setup was acting like a hidden transaction cost, which, in effect, made it harder for users to reach the finish line of their trades. Without clear, actionable feedback at every step, traders opted to abandon rather than risk making an ill-informed decision. My challenge was to reengineer the interface, reducing cognitive burden while aligning the platform’s design with the incentives and needs of the traders themselves.
Reimagining Dexible’s frontend required a fundamental shift in how we approached the user experience. I anchored the project in behavioral economics and decision theory, understanding that our users were not making irrational decisions. At its core users were operating under constraints of limited cognitive capacity and incomplete information, aka a theory called bounded rationality. In the context of Dexible, traders faced high cognitive costs in understanding how the platform operated.
Dexible was an algorithmic, institutional-grade DEX aggregator, but the very features that made it powerful—segmented orders, non-custodial execution—were also the things that were most confusing to users unfamiliar with such advanced configurations. To fix this, I needed to think from the ground up, working from the perspective of the trader. What would it take for a user to comfortably process all the variables involved—the trade parameters, order types, market volatility, and transaction costs? What we faced was a textbook case of decision paralysis.
I needed to get inside their head. Work bottom up from their perspective, understand what it would take to process all the variables—the trade parameters, the definitions of the order types, the market volatility, execution, and transaction costs—leading to decision paralysis. Cognitive load was acting as a form of transaction cost and reduced the probability of trade completion. We needed to convey that Dexible had to be positioned differently than what the traders were familiar with. For example, when they were comparing Dexible spot swaps to a DEX’s swaps on the spot market, they would see a significantly higher transaction cost due to the complexity of our backend contracts. This was an immediate red flag to highly skeptical, highly transactional, and very guarded customers.
One key insight was that users were comparing Dexible’s execution costs to more straightforward platforms like Uniswap. But, unlike a simple spot market swap, our platform offered complex, algorithmically driven trade routes, which naturally introduced higher transaction costs. My goal was to reframe the user’s reference points, guiding traders to see the potential gains Dexible offered rather than focusing solely on perceived losses.
My solution was to minimize these transaction costs by simplifying th einterface and assuming our customer knew less. I sought to shift traders' reference points by framing actions in terms of potential gains rather than losses—ripped from the pages of prospect theory. This required us to highlight new metrics from our Order Eval component and highlight the comparative outcomes relative to a standard single swap on Uniswap. Instead of overwhelming traders with every option at once, I designed the interface to reveal Order Estimates—side-by-side comparisons showing how Dexible’s segmented orders could outperform a single swap on Uniswap. This gave traders the confidence they needed to move forward.
A critical component of this strategy was real-time feedback. By leveraging the feedback loop from calling the Dexible API to feature Order Estimates, our team could introduce dynamic interaction points that provided traders with immediate information about the impact of their choices. These feedback mechanisms directly addressed the information asymmetry that had been plaguing the platform, allowing traders to make better decisions with more confidence.These feedback mechanisms directly addressed the information asymmetry that had been plaguing the platform, allowing traders to make better decisions with more confidence.
When users were given immediate visual confirmation of their order configurations and potential outcomes, they were more likely to proceed to execution, as the uncertainty that previously caused abandonment had been significantly mitigated.
Executing the Dexible v2.0 frontend overhaul required a highly iterative, feedback-driven approach. Each feature release was treated as a controlled experiment. I grounded our methodology in decision theory, treating every UI adjustment as a hypothesis, which we rigorously tested through A/B testing and continuous data analysis. This approach allowed us to refine the design in real-time, learning from each iteration to improve the next.
Step by step and feature release by feature release, our methodology was rooted in feedback. I would also arrange interviews, message members of our community to hear their perspective on all the new designs. It wasn’t easy. Talking with anonymous traders who owe you nothing and some who are highly transactional speculating that their order volume would merely justify their participation for a future airdrop reward felt like pulling teeth.
So what all did we introduce?
1) Significant improvement to the Token Selector. This included an informational section to show what the order type the trader selected was, and an icon to represent that.
2) The introduction of the spot price rate component and introducing a logo, the option to invert that price rate, and showing the 24 hourly change from a data source.
3) A consistently updating order form updating with the spot price rate to avoid errors
4) Detailed order estimates that showed price slippage and price impact.
5) An order estimates section showing the ultimate price rate the traders would be getting.
6) A division between a Simple Mode and Advanced Mode interface. The Simple Mode interface would reflect the design of our Dexible Widget.
7) Introducing light versus dark mode options.
8) A better toggling visualization of TWAP order price bounds, and significantly reducing errors.
9) A better way of communicating which direction the limit prices would be set.
10) Introducing information bubbles to our estimated outcomes rows.
11) Our estimated outcomes section has four major highlights put into a larger form.
12) A new order confirmation popup window with the breakdown of all details
Each iteration of the frontend design incorporated insights from the previous round of testing. It allowed us in retrospective to dissect these outcomes in probability distribution analysis.
There was a difficult balance to strike. It existed between not merely reducing functionality, but rather, more intuitively arranging those elements.
Our sprint cycles followed the principles of Agile methodology, allowing for rapid deployment of new features and immediate collection of performance metrics. This allowed for a fine-tuned approach where any deviation from expected user behavior was corrected in subsequent iterations.
The results of the Dexible v2.0 overhaul were extraordinary. Post-implementation data showed a 70% reduction in order abandonment, which directly corresponded to a significant increase in platform engagement and trader satisfaction.
Additionally, the 18% increase in average trade order value indicates that traders, now equipped with a more intuitive interface and real-time feedback mechanisms, felt more confident executing larger and more complex trades. This outcome aligns with the rational expectations theory, where users, provided with better tools and clearer information, make decisions that reflect their true economic preferences. The redesigned interface not only reduced friction but also enhanced the expected utility of each trade, leading to higher engagement and larger transactions.
These improvements, while driven by UX, had a cascading effect and allowed Dexible to capture a larger share of its target market and establish itself as a leader in advanced DeFi trading.
