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.

View Site →

View Site →

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.

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.

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%