Redesigning Web3 Trading

Redesigning Web3 Trading

Redesigning Web3 Trading

Redesigning Web3 Trading

Making It
Finally Make Sense

Making It
Finally Make Sense

Making It
Finally Make Sense

Making It
Finally Make Sense

A UX case study on Account Abstraction and Trade Widget

A UX case study on Account Abstraction and Trade Widget

A UX case study on Account Abstraction and Trade Widget

A UX case study on Account Abstraction and Trade Widget

Watch this👇

Watch this👇

Watch this👇

Overview

Moralis Money helps crypto users discover tokens before they trend — but once they did, trading them felt slow, complex, and disconnected.

Role

Role

Role

Role

My role was to lead a design exploration that solved two challenges:

✅ Simplify the end-to-end trading experience

✅ Make account abstraction (smart contract-based trading accounts) accessible to all users

From Discovery to Drop-off

From Discovery to Drop-off

From Discovery
to Drop-off

Why were users Not completing trades — and what was It costing us.

Why were users Not completing trades — and what was It costing us.


Why users weren’t completing trades — and what it was costing us.

Why were users Not completing trades — and what was It costing us.


The experience

The experience

The experience

(Before)

(Before)

Users came to Moralis to discover trending tokens...But when it came time to trading, they had to:

❌ Copy the token address

❌ Leave Moralis and open a DEX like Uniswap

❌ Reconnect their wallet

❌ Search for the token again

❌ Manually complete the trade.


But It was slow, clunky, and confusing.


Users came to Moralis to discover trending tokens...But when it came time to trading, they had to:

❌ Copy the token address

❌ Leave Moralis and open a DEX like Uniswap

❌ Reconnect their wallet

❌ Search for the token again

❌ Manually complete the trade.


But It was slow, clunky, and confusing.


Result? Users dropped off before ever making a trade. Every exit meant lost conversions and reduced retention.

Result? Users dropped off before ever making a trade. Every exit meant lost conversions and reduced retention.

Result? Users dropped off before ever making a trade. Every exit meant lost conversions and reduced retention.

Result? Users dropped off before ever making a trade. Every exit meant lost conversions and reduced retention.

So we went back to the drawing board…

So we went back to the drawing board…

So we went back to the drawing board…

And reimagined the entire trading journey from scratch.

And reimagined the entire trading journey from scratch.

And reimagined the entire trading journey from scratch.

🔍 Discovery & Insights

🔍 Discovery & Insights

🔍 Discovery
& Insights

We ran user interviews and flow analytics to understand pain points. We learned:

❌ Users didn’t understand why they needed to activate a trading account.

❌ Multiple steps—copying addresses, switching platforms, MetaMask pop-ups—created friction.

These insights drove our design direction.

Designing a Seamless
Web3 Trading Experience

Designing a Seamless
Web3 Trading Experience

Designing a Seamless
Web3 Trading Experience

From confusion to clarity — how we made trading intuitive again in three Steps.

From confusion to clarity — how we made trading intuitive again in three Steps.

From confusion to clarity — how we made trading intuitive again in three Steps.

From confusion to clarity — how we made trading intuitive again in three Steps.

#1

#1

#1

#1

Widget

Widget

Widget

Widget

We created an embedded trade widget users could access from any screen. We A/B tested it against a fullscreen version and found the sidebar format increased trading activity and kept users in context.

#2

#2

#2

#2

Sidebar Experience

Sidebar Experience

Sidebar Experience

Sidebar Experience

We presented a trading sidebar accessible from any Moralis Money screen. The sidebar includes fields for selecting the buy and sell tokens, integrating our token search (so users were able to find trending tokens and immediately trade them).

#3

#3

#3

#3

Account Abstraction

Account Abstraction

Account Abstraction

Account Abstraction

Onboarding flow designed to deploy and activate the “Trading Account” via account abstraction. We guide the user from the welcome screen to depositing funds and confirming that their smart account is ready, reducing friction with clear messages and animations.

🎯 Achievements

🎯 Achievements

🎯 Achievements

During this exploration, we conducted usability tests with prototypes: most participants understood the trading account concept better when presented with this guided onboarding, compared to the previous experience of simply launching a technical MetaMask window without any context.


More engagement.
Higher conversions.

More engagement.
Higher conversions.

More engagement.
Higher conversions.

A foundation for advanced trading

A foundation for advanced trading

Why users weren’t completing trades — and what it was costing us.

A foundation for advanced trading

Our design exploration significantly improved the user experience and product strategy of Moralis. We collaborated with the product team to envision a more advanced trading experience within Moralis, leveraging the flexibility of the smart trading account.

What if…

What if…

What if…

We provided users with professional-grade tools while maintaining simplicity? High-impact business ideas emerged: enabling automatic orders based on price alerts, copy-trading (mimicking expert wallets' trades), and customizable panels with market data.


We provided users a standalone trading screen, with customizable widgets ?: live trading pair chart, user’s “saved tokens” list, trending tokens, recent relevant transactions, among others.

Learnings

Learnings

Learnings

Learnings

This initiative not only expanded the functionality of Moralis Money but also solidified its position as an essential tool for traders and developers in the crypto ecosystem. Here are some key learnings from my experience:

⚙️ Iterative Development and Adaptability

I recognized the critical role of iterative development in refining products to align with user needs and market dynamics. Leading projects such as Widgets, Beans, and Account Abstraction, I oversaw significant modifications based on user testing and market behavior analysis, ensuring their relevance and effectiveness

🏗️ Cross-Functional Collaboration
and Communication

🏗️ Cross-Functional Collaboration
and Communication

🏗️ Cross-Functional Collaboration
and Communication

Collaborating closely with diverse teams, I enhanced communication and fostered a culture of continuous feedback. This approach was vital in developing user-centric solutions and streamlining onboarding processes, making complex blockchain technology accessible to all users.

🎯 Production-Oriented Mindset and Learning from Mistakes

🎯 Production-Oriented Mindset and Learning from Mistakes

🎯 Production-Oriented Mindset and Learning from Mistakes

I adopted a culture of prompt deployment and iterative improvement, facilitating rapid learning from real-world applications. Embracing mistakes as learning opportunities allowed for timely adjustments and informed future development strategies.

Let´s connect

Have questions about this project? Interested in discussing a new project or sharing new ideas?

I’d love to connect! Drop me a message, and let’s create something great together! 🚀

© 2025 thebell. All rights reserved.

© 2025 thebell. All rights reserved.

© 2025 thebell. All rights reserved.