mafiafoot

Play-to-earn football web3 game,

with player cards marketplace, tournaments

in their own ecosystem called Mafiaverse

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

Role

UX Design, Prototyping, Client Presentation, Visual Design Review

Timeline

6-8 weeks

Team

Mafiafoot CTO, Head of Design, UX Designer, Visual Designer, NFT Art Designer

Tools

Figma, Miro, Slack

  • The Problem

The Web3 gaming industry faces significant challenges in creating platforms that are both technologically advanced and user-friendly. Specifically for Mafiafoot, the problems included:

  1. User Accessibility: Bridging the knowledge gap between experienced Web3 users and newcomers unfamiliar with blockchain technology.

  2. Complex Ecosystem Visualization: Effectively visualizing the intricate game ecosystem within the Mafiaverse to aid user understanding.

  3. Intuitive Marketplace Design: Creating a user-friendly marketplace for NFT trading that emphasizes card rarity and value.

  4. Seamless Integration: Ensuring that blockchain elements are integrated smoothly without compromising the overall gameplay experience.

  5. Balancing Technical and UX Needs: Aligning technical requirements with a user-friendly design that caters to diverse player needs.

Home improvement solutions

  • Design Challenge

How can we simplify the onboarding process and enhance the user experience for a Web3 football gaming platform while effectively integrating complex blockchain elements?

  • The Solution

To address these challenges, we developed a comprehensive design strategy for Mafiafoot:

  1. User-Centric Interface: Developed a visually appealing interface that guides players through the Mafiaverse ecosystem, making navigation intuitive.

  2. Visual Diagrams: Incorporated detailed visual representations of the game's structure to facilitate understanding of the ecosystem.

  3. Streamlined Onboarding: Created a five-step onboarding process that accommodates users of all experience levels, ensuring they quickly grasp the game mechanics.

  4. Advanced Marketplace Features: Designed a marketplace with robust filtering and comparison tools, emphasizing card rarity and detailed information to aid decision-making.

  5. Collaborative Development: Fostered close collaboration between design and technical teams to ensure that the user experience was both engaging and technically sound, effectively balancing user needs with blockchain integration.

This solution aimed to create an accessible, engaging, and technologically advanced platform that appeals to a broad audience in the Web3 gaming space, highlighting the unique aspects of Mafiafoot within the Mafiaverse ecosystem.

  • Phase 1: Conceptualizing Mafiafoot

What unique opportunities does Mafiafoot present in the Web3 gaming landscape?

Mafiafoot is a cutting-edge Web3-based football gaming platform within the Mafiaverse ecosystem. It combines elements from various gaming genres, allowing players to build and manage their clubs, participate in matches, and trade NFT player cards. The platform utilizes CAPS, Ternoa's cryptocurrency, for in-game transactions and rewards.

The primary challenge was to create a user experience that caters to both seasoned gamers and newcomers to the Web3 space. Key requirements included:

  1. A seamless onboarding process

  2. An intuitive user flow

  3. A comprehensive marketplace for NFT trading

  4. An engaging overall game experience

  5. Balancing technical blockchain requirements with user-friendly design


  • Phase 2: Designing the Mafiaverse Experience

How can we create a user flow that seamlessly guides players through the Mafiaverse ecosystem?

  • User Flow Mapping

We mapped out a detailed user flow, covering every step from sign-up to match participation. Key elements included:

  • A straightforward account creation and wallet connection process

  • A visually represented Mafiaverse ecosystem, including the Marketplace, Stadium, and Training Center

  • Multiple wallet connection options for users of varying experience levels

  • Streamlined team and match management systems

To tackle the challenge of representing the complex game ecosystem, we incorporated a detailed visual diagram of the Mafiaverse into the user flow. This required extensive research into the Mafiafoot white paper to accurately reflect the game's structure and mechanics.

  • Game Structure

To tackle the challenge of representing the complex game ecosystem, we incorporated a detailed visual diagram of the Mafiaverse into the user flow. This required extensive research into the Mafiafoot white paper to accurately reflect the game's structure and mechanics.

  • Phase 3: Crafting the Mafiafoot Marketplace

How can we design a marketplace that facilitates seamless NFT trading while emphasizing card rarity and value?

  • User Stories

We focused on implementing the following critical user stories:

  1. "As a player, I want to easily browse, filter, and compare available NFT cards by attributes including rarity, position, and price, so that I can quickly find and evaluate the most valuable assets for my football club."

  2. "As a user, I want a secure and streamlined process to buy, sell, and trade NFT cards of varying rarities using $MFF tokens, with clear indicators of each card's rarity level, so that I can efficiently manage my team's roster and club infrastructure."

  3. "As a club owner, I want to see detailed information about each NFT card, with emphasis on its rarity level, associated stats, and price history, so that I can make informed decisions to build a competitive squad, develop my club, and maximize my earnings in the play-to-earn model."

  • Marketplace Design

The marketplace was designed to be both functional and visually appealing, featuring:

  • Advanced filtering and sorting options for NFT cards based on attributes like rarity, position, and price

  • Detailed NFT information displays, including rarity, stats, and price history

  • A streamlined checkout process using $MFF tokens

  • Side-by-side comparison of multiple NFT cards

  • Real-time market trends and price histories

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.

  • Phase 4: Iterative Development and Collaboration

How can we ensure that the Mafiafoot design meets both user needs and technical requirements?

  • Wireframing

Through collaborative efforts with the CTO and head of design, we refined the wireframes to ensure an intuitive and technically feasible UX. Key features included:

  • A five-step onboarding process, designed to minimize user effort while maximizing engagement

  • Clear visual and functional cues guiding users through team management and match participation

We developed an extensive filtering and comparison mechanism, allowing users to easily identify and evaluate NFT cards based on specific criteria, with a strong emphasis on rarity levels. Clear visual indicators and detailed information displays were implemented to highlight the rarity and value of each NFT card.

  • Phase 5: Measuring Success and Future Planning

How effective was our design in achieving Mafiafoot's goals, and what steps can we take to ensure continued success?

  • Alpha Launch

The alpha version of Mafiafoot was launched within 6 to 8 months, with the foundational user experience developed in the first 8 to 12 weeks

  • The community grew to 21.9K members, indicating strong user engagement

  • Multiple tournaments have been organized since launch, with prize pools ranging from $2,000 to $6,500 USD

  • The marketplace currently features 61 players in the primary market and 96 in the secondary market

  • Successful private and public NFT sales, with batches selling out within minutes

  • Players can develop both player and financial buildings, adding strategy to the gameplay

  • The progression system is tied to various criteria, such as matches played and $MFF locked

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

  • Reflection

The Mafiafoot project demonstrated the importance of balancing complex Web3 elements with user-friendly design. Key learnings include:

  1. Visual representation is crucial in explaining complex systems to stakeholders and users

  2. Close collaboration between design and technical teams is essential for successful Web3 projects

  3. User-centric design, based on detailed user stories, is paramount, even in technically complex environments

  4. Continuous iteration based on user feedback is necessary for refining and improving the platform

  5. Emphasis on rarity and detailed NFT information is critical for user decision-making in a play-to-earn model

Moving forward, Mafiafoot is well-positioned to continue its growth and success in the competitive Web3 gaming industry. By maintaining a focus on user needs, technical innovation, and market dynamics, the platform can evolve to meet the changing demands of its growing community within the Mafiaverse ecosystem.