中 | EN

Redesigning Coinbase for Better User Experience

A mobile app redesign focusing on portfolio and trading pages to enhance clarity and usability

The Challenges

Coinbase is a leading platform in the cryptocurrency market, but user feedback indicates that the mobile trading experience has some issues. Users often find the mobile trading interface visually cluttered and difficult to understand, creating friction when executing trades. Additionally, the portfolio interface lacks clarity, making it difficult for users to quickly grasp total balances, asset allocation, and growth trends.

Through user research, I identified two key areas that require immediate improvement: the portfolio interface and the trading interface:

    Portfolio Interface — Poor Data Visualization
    • Lacks clear graphical representations (such as pie charts or trend lines)
    • Difficult to quickly assess performance trends or asset allocation
    • Low user engagement

    Trading Page — Unclear Entry Points
    • Users often struggle to locate the order placement, requiring multiple attempts to find it.
    • Users spend more time interpreting trading information.

As a designer, my task was to redesign the portfolio and trading interfaces to create clear visual hierarchy, intuitive user flows, and an easier-to-use trading experience, while maintaining Coinbase’s professionalism and credibility.

Portfolio Page Challenge

Portfolio Page — Poor data visualization

The current portfolio interface lacks hierarchy and visual cues, making it difficult for users to quickly understand balances, allocation, and growth trends, which reduces user engagement.

Trading Page Challenge
User Experience Challenge

Trading Page — Unclear entry points

On the trading page, users cannot quickly place orders or interpret key market data, and some need multiple attempts to complete a trade.

The Solution

I sketched redesigned versions of the portfolio and trading interfaces to address key usability issues. The solution focuses on clear hierarchy, improved data visualization, and simplified user flows.

Portfolio Page:

  • Clear hierarchy: Total balances and key metrics are visually prioritized, adding layers of information while keeping the interface clean.
  • Data visualization: Mini trend lines, pie charts, or bar charts display performance and asset allocation.

Trading Page:

  • Readable market data: Market information is redesigned to be clear and scannable.
  • Direct order placement: Introduces a direct order panel so users can trade immediately upon entering the trading page.

Design Process

01

User Research & Analysis

Conducted interviews with 5+ Coinbase users to understand pain points and behavior.

02

Information Architecture

Rebuilt navigation and content hierarchy based on user priorities and mental models.

03

Wireframing

Created low-fidelity wireframes and interactive prototypes to test different approaches.

04

Visual Design & Testing

Developed high-fidelity designs and conducted usability testing with target users.

Wireframeing

After defining the information architecture, I created low-fidelity hand-drawn wireframes to test different layout approaches. These wireframes helped validate design decisions and plan the interface structure in advance.

Portfolio Page

For the portfolio interface, I added information hierarchy. Total balances and key metrics are prioritized on the home screen for quick access, while detailed asset lists and charts are structured for easy comparison and navigation.

Portfolio Wireframe

Trading Page

The wireframes focus on improving data readability and simplifying the trading flow, adding a direct order panel for faster transactions, and presenting key market data in blocks for quick scanning of prices, volumes, and other metrics.

Trading Wireframe

Visual Design & Prototyping

During the visual design and prototyping phase, I converted the wireframes into interactive high-fidelity prototypes to demonstrate how users would interact with the optimized Coinbase mobile app, helping to validate usability and clarity of information presentation.

For the portfolio section, I added hierarchy to provide richer information while maintaining clarity. Asset allocation is visualized using pie charts, allowing users to quickly understand distribution, and trend charts help users track asset growth over time.

Portfolio Before

To optimize the trading experience, I added a direct order feature to the trading interface. Users can now place orders while viewing market data, making the process faster and more intuitive. Additionally, A switchable depth chart was added alongside the price trend chart, allowing users to view market liquidity and trends in the way that best supports their trading decisions.

Trading Before

For the trading interface, I also reorganized market data into structured blocks, allowing users to quickly scan prices, volumes, and other key market information.

Portfolio Enhancement Before
Portfolio Enhancement After

Impact & Learning

Impact

  • Improved the trading experience by reducing friction and clearly presenting market information.
  • The hierarchical layout and charts in the portfolio helped users quickly grasp key information.
  • The trading interface allows users to place orders directly while viewing market depth, enabling smoother operation.

Learning

  • Enhanced skills in mobile app design, especially arranging hierarchical information on limited screen space.
  • Learned to balance rich content with clarity, allowing users to quickly understand key information.
  • Strengthened abilities in data visualization and block-based layout design, making operations and understanding more intuitive.