Five Mics Web Design

Website Development for a TCG based on original IP

Website Development for a TCG based on original IP

Website Development for a TCG based on original IP

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.

View Site

MY ROLE

UIUX Design, Web Dev

TOOLS

Figma, Framer

Timeline

June- July 2024

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.

In 2022, a woman's anonymous article about suspected secret photography went viral. Instead of support, she faced harsh victim-blaming, shifting focus away from the act of harassment.


Shocked by society's unrealistic standards for victims, I conducted in-depth research on gender theories and personal stories. Inspired by feminist discourses, I sought to use game design as a powerful tool to drive awareness and encourage positive change.

Key Challenges

  • Organizing a Growing Information Ecosystem

The website needed to support a diverse range of content, including game rules, card references, world-building, tournament resources, retailer onboarding, and community updates. I mapped relationships between content areas and designed an interconnected information architecture that allows players to discover information from multiple entry points rather than relying on a single navigation path.

  • Improving New Player Onboarding

One of the biggest barriers to entry was understanding where to start. I consolidated all essential learning materials—including tutorial videos, rule summaries, card types, gameplay mechanics, and the comprehensive rulebook—into a dedicated Get Started experience, creating a clear learning journey for first-time players.

  • Increasing Content Discoverability

Instead of treating pages as isolated destinations, I designed the site as a connected ecosystem. Related content such as cards, abilities, lore, events, and retailer resources are cross-linked throughout the experience, helping users naturally explore deeper layers of the game world.

Design & Development

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.

Results

Evaluation & Future Prospects

  • 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%