Introduction

Introduction

Cards & Hobbies is Malaysia’s online platform and local shop for Magic: The Gathering collectors and players. The microsites were designed to immerse collectors in the themed set launches, using visuals, storytelling, and micro-animations to build anticipation and excitement ahead of release.

Project

Project

Marvel's Spider-Man Microsite

Role

Role

Collaborated with another ux design team member to design and built website by using website builder

Goal

Create an engaging microsite showcasing themed card sets to build anticipation and excitement for the launch, while ensuring a smooth, responsive experience across devices

Project Context

This microsite is part of a marketing strategy for a new card game series, with each set featuring its own unique visual identity. The goal was not only to introduce the products and their timelines—singles, compendiums, and pre-release but also to immerse visitors in the thematic worlds of each set through visuals, animations, and storytelling to spark interest before launch.

Objectives:

  • Showcase spider-Man themed acorss the microsite with tailored visual animation that match the set's personality

  • Create immersive hero sections and add micro-animations to capture attention

  • Ensure a fully responsive layout for consistent experience across devices

  • Collaborate with team members (UX designer, product owner) to align visuals with launch milestones

Challenges:

  • Integrate AI-generated artwork as section backgrounds for a richer visual experience

  • Working within tight timelines for content updates and QC before launch

  • Configuring and resolving issues post-build without breaking existing layouts

  • Balancing high visual impact with performance optimisation for fast load times

Design Process

Research & concept development

  • Researched the card game’s info and design assets

  • Brainstormed with another UX designer to define a unique visual style


Layout & Hi-Fi design

  • Completed Hi-Fi with the other UX designer; I mostly focused on hero sections, visual elements and touch ups

  • Integrated AI-generated background art for visual impact


Micro-animations & interactivity

  • Added subtle text reveal animations, animated pre-loader page and hero section, as well as scrolling transitions to enhance engagement


Build & integration in Webflow

  • Implemented responsive designs; configured layout adjustments and resolved post-build issues


Quality control

  • Conducted final checks for responsiveness, animation smoothness, and asset optimisation


Check out the walkthrough video below, or visit the live site through the link for the immersive experience.

Results & Impact

  • Positive internal feedback on the immersive feel and thematic accuracy

  • Streamlined content updates for future sets with the reusable layout and animation structure

  • Enhanced product storytelling through visual integration tailored to the set