emps.co logo
Elevating CardTrader's Product for Growth logo

Elevating CardTrader's Product for Growth

UI overhaul for CardTrader, driving higher conversions and doubling revenue.

Product Design
Elevating CardTrader's Product for Growth

Meet CardTrader

CardTrader.com is a leading online marketplace for buying and selling trading cards, specializing in Magic: The Gathering. The platform offers an extensive inventory, secure transactions, and innovative features like CardTrader Zero, which consolidates multiple orders into one shipment, and the CardTrader Vault, a secure service for storing and managing collections. Designed for both collectors and competitive players, CardTrader streamlines the trading card experience, making it easier and more efficient.

My Role: Product Design
Year: 2023
Agency: Horizons
Focus Areas: UX Research, Product Design, Design System

TL;DR

I led a comprehensive Product redesign for CardTrader, focusing on enhancing user experience across key touchpoints. My work included developing new UI guidelines, restructuring main pages, redesigning Product pages and the checkout process, and optimizing the logo. These improvements played a crucial role in increasing the conversion rate from 32% to 44% and contributed to CardTrader's revenue growth from €5M to €12M annually.

Challenge

Despite having a unique value proposition with CardTrader Zero, the platform struggled to effectively communicate its benefits due to critical UX issues. The existing interface lacked intuitive design across key touchpoints Product pages failed to highlight essential features, the shopping cart was confusing for multi seller orders, and the checkout process contained unnecessary friction points. Additionally, the post purchase experience needed significant improvement to encourage repeat business in a market where users often place multiple orders monthly.

The site's inconsistent branding and suboptimal user journey were hindering conversion rates and impeding growth. Addressing these UX and CRO challenges was crucial not only for optimizing profitability but also for laying the groundwork for scaling and capturing new market segments. The redesign needed to create a more intuitive, branded, and conversion oriented experience to significantly boost the platform's performance.

Solution

A full scale Product redesign was implemented to address these challenges:

1. UI Guidelines Development:

  • Revamped the UI guidelines to establish a distinct brand identity.
  • Created a unified visual language to be applied across the platform.

Colors

CardTrader Style Guide

Typography

CardTrader Typography

2. Logo Contrast Optimization:

  • Optimized the colors of the logo to increase readability and match the new styleguide.
  • Introduced more vibrant and contrasty colors to ensure accessibility across various backgrounds and use cases.
  • Ensured the logo maintained its recognizability while improving its visual impact.

Original Logo

CardTrader Logo Before

Refreshed Logo

CardTrader Logo After

3. Product Page Redesign:

  • Completely redesigned the Product pages to improve information hierarchy and user flow.
  • Enhanced the display of Product details and clearly communicated the benefits of CardTrader Zero.

Desktop Before:

CardTrader PDP Desktop Before

Desktop After:

CardTrader PDP Desktop After

Mobile Before/After:

CardTrader PDP Mobile

4. Shopping Cart and Checkout Process Optimization:

  • Streamlined the shopping cart interface for better user clarity.
  • Redesigned the checkout process to minimize friction and boost conversion rates.

Desktop Before:

CardTrader Cart Desktop Before

Desktop After:

CardTrader Cart Desktop After

Mobile Before/After:

CardTrader Cart Mobile

Results and Impact

The Product redesign significantly contributed to CardTrader's growth:

  1. 37.5% Increase in Conversion Rate:
    The conversion rate jumped from 32% to 44%, indicating that the redesign effectively encouraged more users to complete their purchases.

  2. Revenue Growth from €5M to €12M/year:
    The redesign was part of a broader growth strategy that doubled CardTrader's revenue, underscoring the value of a strong, user centric design approach.

  3. Improved Brand Recognition: The optimized logo with enhanced contrast and alignment with the new UI guidelines contributed to stronger brand recognition and a more cohesive visual identity across the platform.

While the Product improvements were a crucial element, the success was part of a comprehensive strategy developed by the Horizons team. This holistic approach included advertising strategies, influencer marketing, and more, all contributing to CardTrader's impressive growth.

For a deeper dive into the full growth strategy, including how Product design played a role alongside other initiatives, refer to the full case study by Horizons: CardTrader: The Journey from €5M to €12M

By focusing on user experience and strategic design, CardTrader not only improved its platform but also positioned itself for substantial growth in a competitive market.