metafight

Play-to-earn MMA web3 game,

with player fight leagues, assets,

and a combat system ProtoFight

Idyllo is a curated home improvement marketplace built for homeowners to ease their vendor vetting and management process.

Role

UX Design, Prototyping, Visual Design Review

Timeline

6-8 weeks

Team

Metafight Design Team, Head of Design, UX Designer, Visual Designer, NFT Art Designer

Tools

Figma, Miro, Slack

  • The Problem

The MMA industry faced several critical challenges:

  1. Limited Entertainment Options: Despite the growing popularity of MMA, there was a lack of engaging, interactive experiences for fans beyond traditional viewing.

  2. Insufficient Monetization for Fighters: Many MMA fighters struggled with low income and limited opportunities to monetize their skills and popularity outside the ring.

  3. Disconnect Between Digital and Physical Sports: There was a significant gap between the physical sport of MMA and the digital entertainment landscape, limiting fan engagement and revenue potential.

  4. Complex Gameplay Mechanics: Creating a game that accurately represented the intricacies of MMA while remaining accessible to a broad audience posed a significant design challenge.

  5. Cross-Platform Accessibility: Ensuring a seamless experience across both mobile and desktop platforms was crucial but technically demanding.

Home improvement solutions

  • Design Challenge

How can we create an engaging and intuitive MMA victory-based game that seamlessly integrates complex gameplay elements?

  • The Solution

Metafight was conceived as a comprehensive solution to address these challenges:

  1. Innovative MMA-Based Game: We designed an engaging, victory-based game that allows players to manage fighters, participate in leagues, and strategically use assets, providing a new form of entertainment for MMA fans.

  2. New Revenue Streams for Fighters: By integrating the MetaFight Token ($MFT) and creating a digital marketplace, we opened up new monetization opportunities for MMA fighters.

  3. Bridging Digital and Physical: Metafight seamlessly blends the excitement of physical MMA with digital engagement, creating a unique ecosystem that benefits both fans and fighters.

  4. Intuitive User Experience: Through careful UX design, we transformed complex MMA mechanics into an accessible and enjoyable game experience, catering to both casual fans and hardcore MMA enthusiasts.

  5. Multi-Platform Design: We developed a responsive design that ensures a consistent and high-quality experience across both mobile devices and desktop browsers.

  6. Community-Driven Ecosystem: By implementing features like leaderboards, leagues, and the Fighter Path system, we created a dynamic community that keeps players engaged and invested in the Metafight ecosystem.

  • Phase 1: Discovery and Planning

What unique challenges did we face in designing a game with complex MMA-based mechanics?

  • Project Overview

Metafight is an innovative MMA victory-based game allowing players to manage fighters, participate in leagues, and enhance gameplay through strategic asset management. As Senior Designer, I collaborated with a UX designer, head of design, visual designer, and the UI/UX Lead at Metafight to create an intuitive and engaging user experience.

  • Objectives

Integrate complex elements like leagues, passive asset management, and a marketplace

  • Design an intuitive UI for easy navigation

  • Balance technical requirements with visually appealing design

  • Enhance player engagement

  • Create a scalable and adaptable design

  • Phase 2: Design Process

How do we turn intricate MMA game mechanics into intuitive design solutions that support both fighters and fans?

  • Understanding Game Mechanics

To design an effective user experience, we first needed to thoroughly understand the game mechanics of ProtoFight, the initial prototype:

  • League structure with direct elimination

  • Combat system based on NFT values

  • Multiple league types with varying durations and player counts

  • Automated league creation and management

  • Reward system using cagefragments

  • "Fighter Path" progression system

  • Wireframing and Sketching

Created wireframes and sketches for key components:

  • Match Dashboard

  • Player Statistics

  • Player Card Marketplace

  • League Registration System

  • Fighter Management Interface

Collaborated closely with the UX designer to refine wireframes, ensuring user-centric design.

  • User Flows

Developed and reviewed flows for:

  • League Registration: Streamlined the process of selecting cards and joining leagues

  • Combat Participation: Ensured smooth transitions between fights within a league

  • Reward Collection: Created an intuitive system for players to claim and track their rewards

  • Fighter Path Progression: Designed a flow to help players understand and engage with long-term goals

To find a unique value proposition for Inperson, I analyzed competitors. We looked at business listing apps for contact and support service. Similarly, for consultancy service there are number of apps which solely focus on medical industry. There are few other apps for industry specific consultancy but hardly any of them are prominent in market.


What Inperson offer is all services under one app and it’s completely free for users. Below is my observation on comparison with different market segments.

  • Workshops and Collaboration

Conducted regular design workshops to:

  • Brainstorm ways to visualize complex game mechanics like combat calculations

  • Incorporate feedback from the Metafight team on league structures and reward systems

  • Refine designs to ensure they aligned with both the game's mechanics and user expectations

By incorporating these game-specific details into our design process, we ensured that the final product would not only be visually appealing but also accurately represent the complex mechanics of Metafight. This approach allowed us to create a user experience that was both intuitive for new players and satisfying for those deeply engaged with the game's intricacies.

  • Phase 3: Visual Design

How can we create a striking visual interface that captures the excitement of MMA competition while ensuring accessibility across platforms?

  • Final Design Collaboration

Worked with the visual designer to bring wireframes and user flows to life, focusing on:

  • Bold, dynamic elements conveying MMA intensity

  • Contrasting color scheme reflecting high-energy nature of the sport

  • Strong, assertive typography emphasizing competitive spirit

  • Visual hierarchy highlighting critical information

  • Responsive design elements for seamless mobile and desktop experiences

  • Phase 4: Implementation and Outcome

How effectively does our design engage players, support fighters, and transform the MMA digital landscape?

  • Final Product

Successfully integrated all design elements, creating a functional and visually appealing game with seamless user experience across all aspects. Key features include:

  • MMA gym management system

  • Dynamic league registration with variable Fight Session costs

  • Leaderboard system for competitive gameplay

  • Free-to-play model with starter cards for new managers

  • User Interface

Designed a simple yet effective UI with clear navigation and intuitive controls, enhancing overall user satisfaction. The game is accessible on both mobile devices and desktop browsers, ensuring a wide reach.

  • User Testing

What Inperson offer is all services under one app and it’s completely free for users. Below is my observation on comparison with different market segments.

  • Metrics and Growth

Since the launch, Metafight has shown impressive growth:

  • Total Community Members: 138,000

  • Post-Launch Members: 100,000

This significant increase in membership post-launch demonstrates the game's strong appeal and effective user acquisition strategies.

  • Impact on MMA Ecosystem

Metafight addresses key industry challenges by:

  1. Expanding entertainment options in the MMA space

  2. Capitalizing on the rising popularity of MMA

  3. Creating new monetization opportunities for fighters through the MetaFight Token ($MFT)

  • Reflection

The Metafight project demonstrated the power of collaborative design in creating a complex yet user-friendly MMA game that addresses real industry needs. Key learnings include:

  1. Importance of cross-functional collaboration in addressing design challenges

  2. Value of regular feedback sessions in refining user flows

  3. Necessity of balancing visual appeal with functional requirements across platforms

  4. Significance of creating scalable designs for future updates

  5. The potential of digital platforms to transform traditional sports ecosystems

Moving forward, we plan to continually gather user feedback to further refine and improve the game experience, ensuring its long-term success and positive impact on the MMA community.