Aerodrome Finance - Part II

Aerodrome Finance - Part II

Aerodrome Finance - Part II

From Desktop Clone to Mobile-First: Redesigning Aerodrome for On-the-Go Traders

From Desktop Clone to Mobile-First: Redesigning Aerodrome for On-the-Go Traders

Project

Aerodrome Finance
(Mobile Concept Redesign)

Role

Product Designer (solo)

Platform

Mobile-first browser experience

Duration

1 month

Quick Summary

Quick Summary

Aerodrome is a popular DEX on Base, but its mobile experience wasn’t designed for mobile users. The interface was essentially a scaled-down desktop UI—difficult to navigate, hard to trust, and frustrating in on-the-go contexts where clarity and speed matter most.

I redesigned the entire experience from a mobile-first lens—simplifying flows, reducing friction, and making trading feel safe and intuitive for users interacting through wallet browsers like MetaMask or Coinbase Wallet.

Aerodrome is a popular DEX on Base, but its mobile experience wasn’t designed for mobile users. The interface was essentially a scaled-down desktop UI—difficult to navigate, hard to trust, and frustrating in on-the-go contexts where clarity and speed matter most.

I redesigned the entire experience from a mobile-first lens—simplifying flows, reducing friction, and making trading feel safe and intuitive for users interacting through wallet browsers like MetaMask or Coinbase Wallet.

User's Feedback

User's Feedback

Their mobile UX sucks! When can there be a proper version on mobile?

Their mobile UX sucks! When can there be a proper version on mobile?

— Reddit User

User’s Feedback

User’s Feedback

Aerodrome infrastructure for liquidity is good but the app is not enjoyable at all.

Aerodrome infrastructure for liquidity is good but the app is not enjoyable at all.

— Reddit User

User’s Feedback

User’s Feedback

Aerodrome UI is awful on mobile wallet browser

Aerodrome UI is awful on mobile wallet browser

— Reddit User

User's Feedback

Their mobile UX sucks! When can there be a proper version on mobile?

— Reddit User

User’s Feedback

Aerodrome infrastructure for liquidity is good but the app is not enjoyable at all.

— Reddit User

User’s Feedback

Aerodrome UI is awful on mobile wallet browser

— Reddit User

The Problem:

Mobile Isn’t Just Smaller—It’s Different

The Problem: Mobile Isn’t Just Smaller—It’s Different

The original Aerodrome mobile interface was a responsive version of the desktop site. But mobile usage isn’t just about fitting content onto smaller screens—it’s about rethinking how users interact, when they interact, and what they need in those moments.

Mobile users are on the go, often multitasking or checking quickly between other activities.

The interface was cluttered and confusing, with tiny fonts and no clear hierarchy.

Users landed directly on the swap screen with no context, no price visibility, and no feedback post-trade.

Key features like gas fees and slippage were hidden or hard to access.

These issues made mobile trading feel fragile and unsafe—causing users to hesitate or abandon Aerodrome entirely.

These issues made mobile trading feel fragile and unsafe—causing users to hesitate or abandon Aerodrome entirely.

Aerodrome Mobile Experience

No slippage warning shown / No visible price impact / Unclear confirmation flow /

Note: The issues shown here reflect the mobile interface inherited from Aerodrome’s desktop design. For a full breakdown of the original usability challenges, see my Aerodrome Desktop Redesign Case Study.

Who Are We Designing For?

Who Are We Designing For?

To anchor the redesign, I created a persona based on real user behaviours I observed in the space.

To anchor the redesign, I created a persona based on real user behaviours I observed in the space.

Vin, the mobile swapper

🧑‍💻 Crypto-native, trades multiple times a day, prefers speed over depth

Behaviours

Swaps via MetaMask browser while commuting or during breaks

Follows token news and alpha via Discord & Twitter

Reacts fast to new token launches and Base ecosystem hype

Avoids desktop unless managing liquidity or bridging funds

Goals

Quickly check market and token value

Complete swaps with minimal steps and full clarity

Stay informed about route, slippage, and price impact before confirming

Pain Points

Can’t tell if a swap went through or failed

Doesn’t understand slippage errors or gas issues mid-swap

Gets nervous swapping without seeing fees or confirmation

Confused by missing price context and unexplained warnings

Reframing the Problem

Reframing the Problem

Aerodrome’s mobile interface wasn’t just visually cluttered — it failed to support how mobile-first users think, behave, and make trading decisions.

When users access Aerodrome through wallet browsers on mobile, they may be checking token prices, reacting to news, or swapping casually at home or on the go. Regardless of the situation, mobile usage tends to involve shorter attention spans, limited screen space, and task switching. But the interface—borrowed from desktop—hid critical context and offered no guidance in moments of doubt.

This wasn’t a UI problem. It was a trust and decision confidence problem.

Aerodrome’s mobile interface wasn’t just visually cluttered — it failed to support how mobile-first users think, behave, and make trading decisions.

When users access Aerodrome through wallet browsers on mobile, they may be checking token prices, reacting to news, or swapping casually at home or on the go. Regardless of the situation, mobile usage tends to involve shorter attention spans, limited screen space, and task switching. But the interface—borrowed from desktop—hid critical context and offered no guidance in moments of doubt.

This wasn’t a UI problem. It was a trust and decision confidence problem.

Planning the Experience

Planning the Experience

Before diving into design, I zoomed out to understand what users actually needed from the mobile experience—not just where they tapped, but what they were trying to do in the moment. Two distinct user mindsets emerged:

Before diving into design, I zoomed out to understand what users actually needed from the mobile experience—not just where they tapped, but what they were trying to do in the moment. Two distinct user mindsets emerged:

“I want to know” moments

These are low-effort, high-frequency actions—checking token prices, portfolio balance, or liquidity positions.


  • What’s the price of a token?

  • What’s in my wallet right now?

  • Has anything changed since I last checked?


These moments require speed, visibility, and mental shortcuts—not deep commitment.

“I want to do” moments

These are high-focus, high-risk actions—like executing a swap or adjusting slippage settings.


  • Do I need to approve this token?

  • Is the price impact too high?

  • What happens if this fails?


These require clarity, control, and timely feedback.

Why this distinction mattered

On mobile, users aren’t always in the same state of mind. Sometimes they’re browsing. Sometimes they’re committing.

Designing around these two mobile mindsets allowed me to remove friction, prioritise clarity, and build user confidence in high-stakes moments.

Redesigned user flow structured around mobile intent—balancing speed for browsing and support for decision-making.

From Sketch to Mid-Fi

From Sketch to Mid-Fi

Based on the two mobile mindsets—“I want to know” and “I want to do”—I started by sketching a mobile-first flow that gives users a clear path from portfolio awareness to decisive action.

01

Sketching Around Intent

01

Sketching Around Intent

01

Sketching Around Intent

01

Sketching Around Intent

01

Sketching Around Intent

02

Translating into Mid-Fidelity

02

Translating into Mid-Fidelity

02

Translating into Mid-Fidelity

02

Translating into Mid-Fidelity

02

Translating into Mid-Fidelity

Usability Testing & Iteration

Usability Testing & Iteration

To validate the mid-fidelity prototype, I ran a round of usability testing focused on common mobile DEX behaviours. The goal was to ensure the interface supported fast actions, clear context, and minimal friction.

Test Scenarios

Test Scenarios

I focused on realistic, high-frequency mobile use cases:

Swap tokens quickly

“You saw a signal in Discord and want to swap USDC to ETH fast while on mobile.”

Check if a token is doing well

“You’re commuting and want to see if any token is pumping before deciding.”

Confirm if a swap succeeded

“You think a swap went through last night — can you check?”

These flows were evaluated for clarity, ease of use, and confidence at each step.

What I learned & Improved

What I learned & Improved

01

Wallet Connection & Landing Clarity

Before: The wallet landing screen was functional but sparse. Users immediately saw the “Connect Wallet” CTA, but many hesitated—unsure whether the $0.00 meant an issue or simply an unconnected state. The token list also felt generic and unexplained.




After: I clarified the 0.00 state by adding helper text, and swapped out the placeholder market list for a “Trending on Aerodrome” section—building trust, context, and curiosity even before the wallet is connected.

Asset A

01

Wallet Connection & Landing Clarity

Before: The wallet landing screen was functional but sparse. Users immediately saw the “Connect Wallet” CTA, but many hesitated—unsure whether the $0.00 meant an issue or simply an unconnected state. The token list also felt generic and unexplained.




After: I clarified the 0.00 state by adding helper text, and swapped out the placeholder market list for a “Trending on Aerodrome” section—building trust, context, and curiosity even before the wallet is connected.

Asset A

01

Wallet Connection & Landing Clarity

Before: The wallet landing screen was functional but sparse. Users immediately saw the “Connect Wallet” CTA, but many hesitated—unsure whether the $0.00 meant an issue or simply an unconnected state. The token list also felt generic and unexplained.




After: I clarified the 0.00 state by adding helper text, and swapped out the placeholder market list for a “Trending on Aerodrome” section—building trust, context, and curiosity even before the wallet is connected.

Asset A

01

Wallet Connection & Landing Clarity

Before: The wallet landing screen was functional but sparse. Users immediately saw the “Connect Wallet” CTA, but many hesitated—unsure whether the $0.00 meant an issue or simply an unconnected state. The token list also felt generic and unexplained.




After: I clarified the 0.00 state by adding helper text, and swapped out the placeholder market list for a “Trending on Aerodrome” section—building trust, context, and curiosity even before the wallet is connected.

Asset A

01

Wallet Connection & Landing Clarity

02

Swap Quote Friction

Before: Users found the quote details visually dense and hard to parse. It wasn’t immediately clear what fees they'd pay or how to adjust slippage, which added unnecessary hesitation before confirming a swap.




After: I introduced a simplified fee summary (“Est. fee”) to surface cost transparency upfront. Detailed breakdowns were moved into an optional expand view, and I added direct links to adjust slippage—supporting both casual and advanced users without overwhelming the UI.

Asset A

02

Swap Quote Friction

Before: Users found the quote details visually dense and hard to parse. It wasn’t immediately clear what fees they'd pay or how to adjust slippage, which added unnecessary hesitation before confirming a swap.




After: I introduced a simplified fee summary (“Est. fee”) to surface cost transparency upfront. Detailed breakdowns were moved into an optional expand view, and I added direct links to adjust slippage—supporting both casual and advanced users without overwhelming the UI.

Asset A

02

Swap Quote Friction

Before: Users found the quote details visually dense and hard to parse. It wasn’t immediately clear what fees they'd pay or how to adjust slippage, which added unnecessary hesitation before confirming a swap.




After: I introduced a simplified fee summary (“Est. fee”) to surface cost transparency upfront. Detailed breakdowns were moved into an optional expand view, and I added direct links to adjust slippage—supporting both casual and advanced users without overwhelming the UI.

Asset A

02

Swap Quote Friction

Before: Users found the quote details visually dense and hard to parse. It wasn’t immediately clear what fees they'd pay or how to adjust slippage, which added unnecessary hesitation before confirming a swap.




After: I introduced a simplified fee summary (“Est. fee”) to surface cost transparency upfront. Detailed breakdowns were moved into an optional expand view, and I added direct links to adjust slippage—supporting both casual and advanced users without overwhelming the UI.

Asset A

02

Swap Quote Friction

03

Token Detail Page Lacked Trading Context

Before: The chart was helpful but lacked trading signals and context to make trading decision. Users couldn’t compare performance, check their holdings, or access token info—making it hard to act confidently.


After: I expanded the page to show real-time liquidity, volume, holders, and 24H change. I added a compare toggle (ETH/BTC), wallet holdings, and quick links to Basescan and the whitepaper—so users can assess and act in one view.

Asset A

03

Token Detail Page Lacked Trading Context

Before: The chart was helpful but lacked trading signals and context to make trading decision. Users couldn’t compare performance, check their holdings, or access token info—making it hard to act confidently.


After: I expanded the page to show real-time liquidity, volume, holders, and 24H change. I added a compare toggle (ETH/BTC), wallet holdings, and quick links to Basescan and the whitepaper—so users can assess and act in one view.

Asset A

03

Token Detail Page Lacked Trading Context

Before: The chart was helpful but lacked trading signals and context to make trading decision. Users couldn’t compare performance, check their holdings, or access token info—making it hard to act confidently.


After: I expanded the page to show real-time liquidity, volume, holders, and 24H change. I added a compare toggle (ETH/BTC), wallet holdings, and quick links to Basescan and the whitepaper—so users can assess and act in one view.

Asset A

03

Token Detail Page Lacked Trading Context

Before: The chart was helpful but lacked trading signals and context to make trading decision. Users couldn’t compare performance, check their holdings, or access token info—making it hard to act confidently.


After: I expanded the page to show real-time liquidity, volume, holders, and 24H change. I added a compare toggle (ETH/BTC), wallet holdings, and quick links to Basescan and the whitepaper—so users can assess and act in one view.

Asset A

03

Token Detail Page Lacked Trading Context

Solution Highlights

Solution Highlights

The final mobile experience was designed to be intentional, clear, and action-ready — no bloated menus, no buried context. Every screen aligns with what users want to know or do in the moment, wrapped in a cohesive dark-theme interface optimised for mobile.

The final mobile experience was designed to be intentional, clear, and action-ready — no bloated menus, no buried context. Every screen aligns with what users want to know or do in the moment, wrapped in a cohesive dark-theme interface optimised for mobile.

Portfolio at a Glance

Portfolio at a Glance

Portfolio at a Glance

Gives users immediate insight into their balance, token performance, and quick access to core actions like swapping and exploring. Also surfaces recent transactions and trending tokens to help users act quickly.

Gives users immediate insight into their balance, token performance, and quick access to core actions like swapping and exploring. Also surfaces recent transactions and trending tokens to help users act quickly.

Clear & Guided Swap Flow

Clear & Guided Swap Flow

Clear & Guided Swap Flow

Redesigned to reduce hesitation and error. Input fields, token selection, and estimated fees are structured clearly, helping users complete swaps faster with confidence.

Redesigned to reduce hesitation and error. Input fields, token selection, and estimated fees are structured clearly, helping users complete swaps faster with confidence.

Risk Visibility & Safe Mode Protection

Risk Visibility & Safe Mode Protection

Risk Visibility & Safe Mode Protection

Pre-trade risks like slippage and price impact are surfaced with progressive warnings. A new Safe Mode flow helps prevent accidental losses by requiring user confirmation before continuing risky swaps.

Pre-trade risks like slippage and price impact are surfaced with progressive warnings. A new Safe Mode flow helps prevent accidental losses by requiring user confirmation before continuing risky swaps.

Context-Rich Token Details

Context-Rich Token Details

Context-Rich Token Details

Token detail pages now offer real market context—liquidity, holders, and 24H changes—plus wallet balance and verification links. This helps users evaluate and act without leaving the interface.

Token detail pages now offer real market context—liquidity, holders, and 24H changes—plus wallet balance and verification links. This helps users evaluate and act without leaving the interface.

Unified Visual System

Unified Visual System

The mobile redesign inherits Aerodrome’s core visual language—dark theme, shared components, and card-based layout logic. But interactions were reimagined from the ground up for mobile:

The mobile redesign inherits Aerodrome’s core visual language—dark theme, shared components, and card-based layout logic. But interactions were reimagined from the ground up for mobile:

Bottom nav replaces side menus.

Tap targets are optimised for thumbs.

Visual hierarchy ensures critical info stays top-of-screen. Familiar, but fit-for-mobile.

Outcome & Reflection

Outcome & Reflection

User outcomes

The redesigned mobile flow received positive feedback during usability testing. Users were able to complete swaps with fewer errors and understood the warnings around slippage and failed transactions more clearly. Quick access to token stats and past trades also helped them feel more in control of their decisions.

Reflection & Takeaways

This project sharpened my skills in designing for mobile-first DeFi experiences. I realised mobile design isn’t just about scaling down desktop layouts — it requires rethinking the structure and intent behind each screen. I learned to prioritise mobile-specific behaviours, surface the right information at the right time, and reduce friction for tasks like token selection and transaction confirmation.


It also deepened my understanding of how to simplify Web3 mechanics—like token bridging, gas fees, and swap risks—without hiding essential details. If I were to iterate further, I’d focus on the liquidity and farming flows, which remain one of the most complex areas in DeFi. My goal would be to break down that technical complexity into something intuitive and easy to navigate for everyday users.

© Prair P. Sirisook

© Prair P. Sirisook

© Prair P. Sirisook