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.
Marvel's Spider-Man Microsite
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