Five Mics Web Design
A content hub bringing game rules, cards, events, and community resources together.
Designed and developed the official website for Five Mics, a hip-hop themed trading card game, transforming a complex ecosystem of rules, cards, lore, events, and retail information into an accessible experience for new and existing players.
MY ROLE
UIUX Design, Web Dev
TOOLS
Figma, Framer, ChatGPT, Claude
Timeline
June- July 2024
01
Overview
Five Mics is an original trading card game that combines hip-hop culture, strategic gameplay, and an expanding community ecosystem. As the game’s player base and content library grew, information became increasingly fragmented across multiple platforms, making it difficult for new players to understand the game and for existing players to discover relevant content.
To address this challenge, I led the redesign and development of the official website, creating a centralized hub that connects gameplay tutorials, card databases, organized play resources, lore, events, news, and retail information. Through extensive information architecture planning, I restructured a large volume of content into intuitive pathways that support both onboarding and long-term engagement.
02
Key Challenges
Organizing a Growing Information Ecosystem
Game rules, card references, resources, retailer onboarding, and community updates had grown across the site, making the overall information structure increasingly complex.
Improving New Player Onboarding
New players lacked a clear starting point, with essential learning materials spread across tutorials, rules, card types, and gameplay mechanics.
Increasing Content Discoverability
Related content such as cards, abilities, lore, events, and retailer resources existed across separate pages, making deeper exploration difficult.
03
IA Planning
04
Design & Dev
Beyond the information architecture, I designed and developed the site in Framer, incorporating motion design and interactive elements throughout the homepage. Animated transitions, visual storytelling sections, and dynamic content blocks were used to immediately communicate the game’s personality while encouraging visitors to continue exploring the platform.
To support the growing card database, I also developed custom code components and overrides for advanced card filtering functionality.
The final experience balances marketing, education, and community-building, serving both as a promotional website and as a long-term resource hub for the Five Mics player community.
05
Final Look
06
Result
Organized hundreds of collectible cards into a searchable, filterable database
Developed custom filtering components to improve content discoverability
Established a scalable information architecture for future game expansions
Created a dedicated onboarding flow for new players
Increased site visit count by 50%