Gate Card

Web & APP Design

Crypto exchange

Gate Card is a crypto debit card launched by Gate, supporting both virtual and physical cards. It can be used at over 80 million merchants worldwide and enables global online and offline spending with crypto assets. I joined in mid-2024 and led the design and related redesign initiatives.

Following my NDA, I've revised any sensitive info in this case study. What you read here comes from my own insights and might not exactly match company's stance.

ROLE

Senior Product Designer

  • User interviews & observations
  • Ideation & design decisions
  • Wireframing, prototyping

TIME

2024.10 - 2024.12 (2 month)

TOOL

Figma

Problem

The old interface could not accommodate new card features, making a full redesign necessary to improve usability and scalability.
🤔 Fragmented and deep card management caused excessive clicks
🤔 Non-intuitive layout and switching lowered efficiency

Research & Anaylsis

Through team & user interviews and competitor analysis, I found that use mainly access the management page via mobile but face low engagement and drop-offs. They struggle to locate features, miss key info during top-ups, and expect smoother navigation.

Our competitors address this by showing balances, card promotions, and spending history—highlighting the need for a consistent interface.

Insights

Consistency

Unify multiple cards under a shared interface to deliver a consistent user experience.

Simplification

Optimize the information to make core features easier to find and reduce steps.

Clarity

Enhance the visual management interface and ensure the flow of funds is transparent

Crafting concepts

Optimizing the user journey for clarity

By reorganizing the page hierarchy and concentrating on key elements, we made the main page more accessible. Centralizing entry points led to a smoother, more seamless navigation experience for users.

Use flow Image

Restructuring the main page for better focus and navigation

I began by grouping similar features and information, working with product managers to identify and remove unnecessary elements. By prioritizing frequently used functions, I ultimately separated the main management page from the card management page, resulting in a clearer and more streamlined experience.

Use flow Image

Iteration

Collaborating with the product and operations teams, I tested homepage layouts and we selected the design that showcased key strengths, leaving room for future premium card expansion.

Use flow Image

Presenting

Redesigned, intuitive card management page

New Visualized Card
Management

Step-by-step physical card shipping status
Key card functions visually highlighted

Smooth onboarding for
new card holders

✅  Simplify texts
✅  Offer a simple and visually clear interface for users to experience a smooth first-time card entries

Easily switch between cards

Redesign to have consistent experience across different type of cards
The visualized section can expand or shrink based on different card features, ensuring a clear and visual experience

Thanks For Watching!

Next Project

Created Crypto Wallet Design System