Reimagining Mazoku Legacy
Reimagining Mazoku Legacy
Reimagining Mazoku Legacy
Mazoku Legacy is a Discord card game where players collect, trade, and showcase cards. The game worked well but the surrounding product felt inconsistent and the website needed a revamp. I led the design effort, creating the brand identity, establishing a design system, rebuilding the information architecture, and designing the complete UI. Deliverables include a brand book, over 100 screens across two visual themes, layouts for three breakpoints, and a 39-page specification.
Mazoku Legacy is a Discord card game where players collect, trade, and showcase cards. The game worked well but the surrounding product felt inconsistent and the website needed a revamp. I led the design effort, creating the brand identity, establishing a design system, rebuilding the information architecture, and designing the complete UI. Deliverables include a brand book, over 100 screens across two visual themes, layouts for three breakpoints, and a 39-page specification.
Mazoku Legacy is a Discord card game where players collect, trade, and showcase cards. The game worked well but the surrounding product felt inconsistent and the website needed a revamp. I led the design effort, creating the brand identity, establishing a design system, rebuilding the information architecture, and designing the complete UI. Deliverables include a brand book, over 100 screens across two visual themes, layouts for three breakpoints, and a 39-page specification.
Services
Services
Services
Visual Direction, Branding, Website
Visual Direction, Branding, Website
Visual Direction, Branding, Website
The Problem
The Problem
The Problem
The game has a lively player base and original lore, but the website failed to show either. New visitors landed without a clear way to start playing. Inviting the bot was the main action, yet it had no context and clashed with duplicate buttons. The site lacked the game’s visual identity and used a flat, ungrouped navigation, which forced people to poke around until they found what they needed.
The game has a lively player base and original lore, but the website failed to show either. New visitors landed without a clear way to start playing. Inviting the bot was the main action, yet it had no context and clashed with duplicate buttons. The site lacked the game’s visual identity and used a flat, ungrouped navigation, which forced people to poke around until they found what they needed.
The game has a lively player base and original lore, but the website failed to show either. New visitors landed without a clear way to start playing. Inviting the bot was the main action, yet it had no context and clashed with duplicate buttons. The site lacked the game’s visual identity and used a flat, ungrouped navigation, which forced people to poke around until they found what they needed.
Research
Research
Research
The Competitive Gap
I looked at several popular Discord card bots, including Karuta, Mudae, and Shoob HQ. Most used familiar franchise colors, bright themes, and crowded layouts that focused on packing in features rather than creating a good experience. They functioned as expected, but none felt engaging enough. I audited the previous Mazoku site and surveyed active players, collecting feedback that pointed to the same conclusion: the game worked, but the experience did not guide or reflect the community.
The Competitive Gap
I looked at several popular Discord card bots, including Karuta, Mudae, and Shoob HQ. Most used familiar franchise colors, bright themes, and crowded layouts that focused on packing in features rather than creating a good experience. They functioned as expected, but none felt engaging enough. I audited the previous Mazoku site and surveyed active players, collecting feedback that pointed to the same conclusion: the game worked, but the experience did not guide or reflect the community.
The Competitive Gap
I looked at several popular Discord card bots, including Karuta, Mudae, and Shoob HQ. Most used familiar franchise colors, bright themes, and crowded layouts that focused on packing in features rather than creating a good experience. They functioned as expected, but none felt engaging enough. I audited the previous Mazoku site and surveyed active players, collecting feedback that pointed to the same conclusion: the game worked, but the experience did not guide or reflect the community.
Rebuilding the Architecture
Navigation was one of the biggest sources of friction. Everything lived in a single flat list, with no structure or grouping, which made even basic tasks feel confusing.
I redesigned the information architecture from scratch, organizing the site into six main sections: Cards, Market, Community, Mazoku Originals, Support, and Profile. Pages were grouped around what a player would naturally want to do next, rather than how the features were originally arranged.
Before moving into high fidelity design, I mapped out every section in Miro. The goal was to solve structure first, without visuals influencing decisions. The brand and visual layer came only after the foundation was clear.
Rebuilding the Architecture
Navigation was one of the biggest sources of friction. Everything lived in a single flat list, with no structure or grouping, which made even basic tasks feel confusing.
I redesigned the information architecture from scratch, organizing the site into six main sections: Cards, Market, Community, Mazoku Originals, Support, and Profile. Pages were grouped around what a player would naturally want to do next, rather than how the features were originally arranged.
Before moving into high fidelity design, I mapped out every section in Miro. The goal was to solve structure first, without visuals influencing decisions. The brand and visual layer came only after the foundation was clear.
Rebuilding the Architecture
Navigation was one of the biggest sources of friction. Everything lived in a single flat list, with no structure or grouping, which made even basic tasks feel confusing.
I redesigned the information architecture from scratch, organizing the site into six main sections: Cards, Market, Community, Mazoku Originals, Support, and Profile. Pages were grouped around what a player would naturally want to do next, rather than how the features were originally arranged.
Before moving into high fidelity design, I mapped out every section in Miro. The goal was to solve structure first, without visuals influencing decisions. The brand and visual layer came only after the foundation was clear.
Design Decisions
Design Decisions
Design Decisions
Going Against the "Obvious" Direction
A central idea behind the visual direction was balance. Mazoku sits between opposing forces: light and dark, chaos and control, rarity and abundance. This led to the concept of yin and yang as a guiding framework. Gold against deep black, brushwork inspired by Japanese art, and a sense of myth and weight. For light mode, this converted into deep black elements set on a textured paper base. The typography has the same thinking. Hina Mincho was chosen for display moments, used in heroes and short headlines. Zen Old Mincho handled the rest of the interface, giving the product a consistent, manuscript-like feel across breakpoints.
Going Against the "Obvious" Direction
A central idea behind the visual direction was balance. Mazoku sits between opposing forces: light and dark, chaos and control, rarity and abundance. This led to the concept of yin and yang as a guiding framework. Gold against deep black, brushwork inspired by Japanese art, and a sense of myth and weight. For light mode, this converted into deep black elements set on a textured paper base. The typography has the same thinking. Hina Mincho was chosen for display moments, used in heroes and short headlines. Zen Old Mincho handled the rest of the interface, giving the product a consistent, manuscript-like feel across breakpoints.
Going Against the "Obvious" Direction
A central idea behind the visual direction was balance. Mazoku sits between opposing forces: light and dark, chaos and control, rarity and abundance. This led to the concept of yin and yang as a guiding framework. Gold against deep black, brushwork inspired by Japanese art, and a sense of myth and weight. For light mode, this converted into deep black elements set on a textured paper base. The typography has the same thinking. Hina Mincho was chosen for display moments, used in heroes and short headlines. Zen Old Mincho handled the rest of the interface, giving the product a consistent, manuscript-like feel across breakpoints.
The Two Decisions That Defined the Market Section
The Shop and the Marketplace were being treated as the same page with different content, which made it hard for users to understand their purpose. They serve very different roles and needed to feel distinct.
The Shop is the official storefront. Each item has a single clear action, large visuals, and a clean layout focused on purchasing. It is meant to feel considered and official.
The Marketplace is driven by players. It is dense and search-focused, with filters, listing details, and seller context. It is designed to feel busy and transactional, like an open trading space.
The Two Decisions That Defined the Market Section
The Shop and the Marketplace were being treated as the same page with different content, which made it hard for users to understand their purpose. They serve very different roles and needed to feel distinct.
The Shop is the official storefront. Each item has a single clear action, large visuals, and a clean layout focused on purchasing. It is meant to feel considered and official.
The Marketplace is driven by players. It is dense and search-focused, with filters, listing details, and seller context. It is designed to feel busy and transactional, like an open trading space.
The Two Decisions That Defined the Market Section
The Shop and the Marketplace were being treated as the same page with different content, which made it hard for users to understand their purpose. They serve very different roles and needed to feel distinct.
The Shop is the official storefront. Each item has a single clear action, large visuals, and a clean layout focused on purchasing. It is meant to feel considered and official.
The Marketplace is driven by players. It is dense and search-focused, with filters, listing details, and seller context. It is designed to feel busy and transactional, like an open trading space.
Designing the Moments That Break
Card listing flow
Listing a card removes it from your active inventory, so the flow must match that weight. The process is three steps: item details and terms, a dedicated confirmation screen that shows the card and a short summary of the terms, and a success screen that closes the loop. The user can clearly read the consequence before they commit.
Designing the Moments That Break
Card listing flow
Listing a card removes it from your active inventory, so the flow must match that weight. The process is three steps: item details and terms, a dedicated confirmation screen that shows the card and a short summary of the terms, and a success screen that closes the loop. The user can clearly read the consequence before they commit.
Designing the Moments That Break
Card listing flow
Listing a card removes it from your active inventory, so the flow must match that weight. The process is three steps: item details and terms, a dedicated confirmation screen that shows the card and a short summary of the terms, and a success screen that closes the loop. The user can clearly read the consequence before they commit.
Trade flow
Trading exchanges cards between players, so the flow is designed to make every step clear before anything is confirmed. The process moves from selecting cards on your side, to selecting cards from the other player, followed by currency details and a final summary. Both inventories remain visible so players can easily compare what is being offered and received.
Trade flow
Trading exchanges cards between players, so the flow is designed to make every step clear before anything is confirmed. The process moves from selecting cards on your side, to selecting cards from the other player, followed by currency details and a final summary. Both inventories remain visible so players can easily compare what is being offered and received.
Trade flow
Trading exchanges cards between players, so the flow is designed to make every step clear before anything is confirmed. The process moves from selecting cards on your side, to selecting cards from the other player, followed by currency details and a final summary. Both inventories remain visible so players can easily compare what is being offered and received.
Final Delivery
Final Delivery
Final Delivery
The final system includes two full themes, dark and light, applied across every page, along with layouts for three breakpoints. A component library was built to cover buttons and their states, pagination, toggles, icon sets, and a global popup system. Typography is defined at the pixel level for every role and screen size, supported by a complete brand document covering color, type, gradients, and usage guidelines.
The final system includes two full themes, dark and light, applied across every page, along with layouts for three breakpoints. A component library was built to cover buttons and their states, pagination, toggles, icon sets, and a global popup system. Typography is defined at the pixel level for every role and screen size, supported by a complete brand document covering color, type, gradients, and usage guidelines.
The final system includes two full themes, dark and light, applied across every page, along with layouts for three breakpoints. A component library was built to cover buttons and their states, pagination, toggles, icon sets, and a global popup system. Typography is defined at the pixel level for every role and screen size, supported by a complete brand document covering color, type, gradients, and usage guidelines.
Reflection & Takeaways
Reflection & Takeaways
One area I intentionally deferred was motion. The brand has strong cinematic potential in moments like card draws, pack openings, and hover states. At this stage, the priority was establishing a clear structure, system, and visual language first, and that sequencing was the right call. If I were scoping the project again, I would plan a dedicated motion phase earlier in the process, rather than treating it as a later layer.
This project also reinforced how I want to show my work. I used to think portfolio work had to be polished and perfectly presented. That approach works for some people, but it never felt true to how I work. The parts I care most about lie in the process: the long hours of iteration, the messy notes, the moodboards, etc. That is where my thinking is clearest, and that is what I want my case studies to show.
One area I intentionally deferred was motion. The brand has strong cinematic potential in moments like card draws, pack openings, and hover states. At this stage, the priority was establishing a clear structure, system, and visual language first, and that sequencing was the right call. If I were scoping the project again, I would plan a dedicated motion phase earlier in the process, rather than treating it as a later layer.
This project also reinforced how I want to show my work. I used to think portfolio work had to be polished and perfectly presented. That approach works for some people, but it never felt true to how I work. The parts I care most about lie in the process: the long hours of iteration, the messy notes, the moodboards, etc. That is where my thinking is clearest, and that is what I want my case studies to show.
One area I intentionally deferred was motion. The brand has strong cinematic potential in moments like card draws, pack openings, and hover states. At this stage, the priority was establishing a clear structure, system, and visual language first, and that sequencing was the right call. If I were scoping the project again, I would plan a dedicated motion phase earlier in the process, rather than treating it as a later layer.
This project also reinforced how I want to show my work. I used to think portfolio work had to be polished and perfectly presented. That approach works for some people, but it never felt true to how I work. The parts I care most about lie in the process: the long hours of iteration, the messy notes, the moodboards, etc. That is where my thinking is clearest, and that is what I want my case studies to show.
Other Projects:
Other Projects:
If you'd like to discuss a potential collaboration, reach out to me.
If you'd like to discuss a potential collaboration, reach out to me.
If you'd like to discuss a potential collaboration, reach out to me.