MFC

MFC is targeted towards crypto-natives and fight fans and is a play to earn NFT game that allows users to buy/trade and fight with the fighters that they own.

Similar to most NFT play to earn games, users must sign up the platform first and then purchase an NFT to start participating in the game. The more time users spend playing the game, the more native crypto currency tokens they earn. These tokens can then be swapped out for normal cryptocurrency tokens, usually within the app.

MFC plans to take it one step further and incorporate the ability to upgrade your NFT metadata (fighting stats) and apply boosts to your fighter using in game "gems". After a few fights your fighter will need to be rested and recovered. As the game goes on you can train your fighters and also have the ability to create completely new fighters (NFT's) that are entered into the ecosystem.

To understand how to best apply the features needed in the app, I went to analyse how some other leaders in the crypto world have accomplished this.

From my time spent in the web3 world, I found play to earn platforms like Stepn really easy to use, with a great UI to match. I believe it's one of the first use cases to show the transition from web2 applications into web3 applications. It combines both the simplicity and ease of use that web2 applications provide, but also introduces a new metaverse, playful feel to the UI.

To develop the MFC application, they also need a token swapping feature, to swap their native in game currency, into another crypto currency. I took inspiration from Solana's most popular crypto wallet, Phantom. It's simple UI is quick and easy to use and never leaves users wondering how to swap/purchase crypto.

One area I believe Stepn could have improved is having the navigation menu items the same across each page. It becomes quite confusing where to navigate to with different menu buttons for each page you click into.

To save time developing the UI in Figma, I spent time creating an application map that showed those users journey throughout the different application pages.

Having spent a lot of time on various marketplaces and play to earn games, this made the process a lot easier. Some of the pages on this application map are due to change and will be made in collaboration with an external team of developers. As a designer in the metaverse it's important to be flexible with your designs as the blockchain still has quite a few limitations.

Before incorporating the brand identity, I took the time to develop low fidelity wireframes of each page I was creating. This helps me to perfect the structure, size and proportions of each component as they lay on the page.

Often times when start with colour and images, it can be hard to spot any imperfections in the overall layout of the pages.

By taking the time to develop these wireframes I was also able to get quick feedback from the MFC team in regards to the pages I created. When creating a metaverse application, it requires a lot of back and forth to make sure the product designer and team are on the same page when it comes to how the game works.

After some back and forth with the MFC, we landed on a UX/UI that met all of the requirements.

To view the full UI presentation, click the link at the top of the page. As stated in the project overview, this project is unreleased. It is simply to use in the project pitch to help raise funds from different blockchain investors.