New Game Cards — Interactive E-commerce Experience

The Problem

Most collectible e-commerce websites follow generic shopping patterns. While functional, they often feel transactional and fail to capture the emotion, discovery, and excitement that collectors associate with trading cards. As a result: Products feel static and interchangeable, Browsing lacks a sense of exploration, The experience does not reflect the hobby itself. The challenge was to design an experience that feels alive, expressive, and memorable, without sacrificing usability or performance.

Project Goals

• Design an immersive shopping experience tailored to card collectors
• Make the cards themselves the visual and interactive focus
• Use animations to enhance clarity and delight, not distract
• Integrate a secure, seamless checkout with Stripe
• Deliver a fast, responsive frontend despite rich interactions

My Role

Lead Frontend Developer & UI Designer. I was responsible for: UI/UX design and interaction concepts, Frontend architecture and component design, Animation implementation with Framer Motion, Stripe checkout integration, Performance optimization.

Research & Discovery

Research focused on two areas: E-commerce usability best practices, Visual and interaction patterns from popular trading card games. The goal was to merge familiarity with innovation—creating an interface that feels intuitive while still capturing the fantasy and excitement of card collecting.

UX Strategy

The core UX strategy was simple: make the cards the hero. This meant: Large, high-quality card visuals, Interactive hover and focus states, Browsing that feels like sorting through a physical collection, Clear hierarchy so animations support, not obscure, decision-making. The experience encourages exploration while keeping purchasing straightforward.

Design Decisions

The design is dark and thematic, using colors and typography that complement the fantasy and sci-fi art of the cards. A card-based layout was used throughout the site to maintain a consistent theme.

UI Approach

The interface was built in React, enabling dynamic, reusable components across the site. Framer Motion was used extensively to introduce smooth, natural animations such as: Card hover and focus interactions, Page transitions, Add-to-cart feedback. Animations were carefully timed and restrained to add polish without impacting usability.

Development Highlights

Custom Stripe Checkout: Implemented a seamless checkout experience that matches the site’s visual identity, avoiding jarring redirects to generic payment pages. Animation Performance: Optimized animation triggers and transitions to maintain smooth performance, even with multiple animated elements on screen.

Performance & Responsiveness

The card-based layout was designed to be fully responsive: CSS Grid adapts seamlessly from multi-column desktop layouts to single-column mobile views, Touch-friendly interactions on mobile devices, Consistent visual hierarchy across screen sizes. Despite heavy use of animation, the site remains fast and responsive.

Results

Strong positive feedback on visual design and interaction quality. 25% increase in average session duration compared to industry benchmarks. 10% uplift in conversion rate versus the previous generic store design.

Key Learnings

This project reinforced the importance of balancing animation and performance. Thoughtful motion design can significantly enhance engagement—but only when implemented with restraint and technical care.

Final Thoughts

New Game Cards demonstrates how e-commerce experiences can move beyond transactions. By combining strong UI/UX principles with modern frontend development, the project shows that engaging design and smooth interaction can directly improve both user enjoyment and business results.