Metastaq streamlines the creation of web3 xperiences for brands

Back
visual identity + UI/Ux Design
Create your Metaverse
Visit site:
Metastaq.com
©'22
Scroll
Project Showreel
overview

Metastaq lets brands easily create truly personal Web 3.0 experiences on their own terms.

view live site
view live site
View live site
Branding
UI/UX
3D Visualization
SAAS
1.
Problem:

We were asked create an MVP of a new B2B product which would allow businesses to create, mint and release their brand new NFTs — all in one platform, with no technical knowledge required.

2.
Approach:

Having thoroughly studied theconcept, client's industry and the target audience, we identified all the shortcomings of the mockup we received from the client, brainstormed new ideas and worked together with the client on the development of a product that would be bound to win in its space.

Challenge

RESULT

Challenge:

1.

Create a platform to help brands create and user NFTs in their own advertising campaigns. Tap into the industry and identify competitive features to implement further.

2.

Find and identify the features needed to address businesses' needs. Study learn from the history of how brands have launched and promoted their NFTs so far.

3.

Create a flexible visual identity for the Metastaq team; a unique style for an innovative digital product.

Result:

1.

No-code NFT creation. Any business can createan NFT extremely easily - with a smart contract created automatically.

2.

NFT store builder. After creating an NFT, a brand can easily create a website with a collection of NFTs, immediately available for purchase.

3.

API integration into any website or platform. Businesses can create an API key for the NFT collection they've just created and use it whereverit's needed.

research

process

STAGES:
1.
Market and technologies research
2.
competitor analysis
3.
MAIN FEATURES

Results

200+

Total hours of analysis

26+

User Flows

1.

Marketand technologies research

Market research consisted of a detailedobservation of Metaverse case studies from the advertising campaigns of different brands.

Technical research was produced as arecommendation for the choice of a blockchain network to be used on the platform. We considered Polkadot, Solana, Avalanche, Ethereum and Polygon blockchains. As a conclusion, we recommended using Ethereum or Solana networks. Ethereum is good because of its secure system and community support. Solana has a lower gas cost and is faster because of the small number of validators.

2.

circuit board motors

We looked at the main minting flows of both popular NFT platforms and niche tools alike. An important conclusion was made in termsof the process for creating smart contracts. This step in the flow is mandatory from a technical point of view, but optional from a user experience point of view. Therefore, this step was hidden and automated for users unaware of the details of the Web 3.0 world.

We also came to realize what settings werestandard and key when creating an NFT. For instance: lazy mining, which allows you to pay for gas at the point of sale.

3.

MAIN FEATURES

We emphasized the main features. There is a quick creation of NFT, there are powerups, integration with webpages and API, payment in USD (instead ofcryptocurrency), automatic creation of SC and the ability to "mint all NFT in one transaction".

USER FLOW

We created custom user flows for creating NFTs, distributions, creating web page templates. The management system is divided into Dashboard, Collections & NFTs, and the Releases pages. There was a case for adding a separate analytics page, yet we kept a small amount of data in small informative blocks on the Releases and NFTs pages. We also created different layouts for the admin, user, and manager roles - each with their own level of access.

Design

process

ADMIN, TEAMMATE
& MANAGER ROLES

Wireframes had been adapted into a visual concept of the website. Interface got a recognizable appearance.

It is important to note that we have developed a number of small but valuable features, such as notifications, wallet balance display, and autosave — all to enhance the NFT creation and management capabilities.

No code NFT creation

You don't need a Solidity developer to create an NFT. All you have to do is drag and drop the necessary images, add some powerups (optional), and set the properties of your NFT. After that, you can mint it or start planning a release.

Powerups

Users can increase the value of their NFTs with Power Ups. Some special features (called Power Ups) can be added to NFTs: you can turn your NFT into a key, add unlockable content to it or make the token a reward or a discount coupon. Just set it up in the Power Ups panel!

COLLECTIONS
& NFTs

You can easily manage your NFTs: move, delete, rename, sort and group them however you like and as many as you like. Also on this page you can create a new collection of NFTs - this is also the creation of a smart contract.

Releases

NFTs are grouped by the release date. Users can browse the page to find the smart contracts, NFTs, and release details. The page also contains some analytical data.

NFT data

After an NFT is published and sold, the user can see more information about the release, collection and NFT pages. This includes all details? such as the release end and close dates, price history and a particular item's activity (sales and wallet-to-wallet transfers).

API INTEGRATION

Simply select the NFT collection you want and get the API key for that collection. Using it, developers will be able to embed your NFTs on their website or platform. See the API documentation page for all the details.

NFT data

After an NFT is published and sold, the user can see more information about the release, collection and NFT pages. This includes all details? such as the release end and close dates, price history and a particular item's activity (sales and wallet-to-wallet transfers).

A user can have several wallets on the platform, which makes the management of their funds even easier.

A user can have several wallets on the platform, which makes the management of their funds even easier.

NFT store builder

This builder has a lot of different settings, which makes it very flexible. There are a lot of opportunities for customization. Also, the basic workflow is extremely easy for "hands-on" users: simply choose the required NFT collection, install the template, fill in the information in the blocks, and click "publish"!

Releases

NFTs are grouped by the release date. Users can browse the page to find the smart contracts, NFTs, and release details. The page also contains some analytical data.

Finance

This is a very important section for financial managers and administrators. It consists of tabs for transactions and account billing, where the user can easily find the necessary information and upload it to a CSV file. Also here is the wallet panel, where you can top up your account with a USD card.

Fund your wallet with usd

With the wert.io plugin, it becomes extremely easy to manage your funds on the platform.

Branding

Logo

Every detail of the logo must be thought out and honed to perfection in order to ensure that it effectively reflects the quality and worth of the product behind it.

Colors

We took the original color palette and made it more vibrant and bright. Dominant colors are warm: coral, yellow and green.

Proportions

We used rounded border sand a minimum distance between blocks. By calculating the percentage of rounding and adhering to the insets, we maintained perfect proportions throughout the project.

Zoom background

We created the Zoom background with fresh and stylish bold 3D shapes that create a sense of a deep space during the video call. These shapes are a core part of the overall visual identity.

Website

VISUALS

We have combined bright colors and a well- structured layout in one web page. The site has a huge amount of smooth transitions. They look appropriate and uncluttered. The style is a good example of a bold, yet balanced design.

view live site
view live site
View live site
UI/UX
Interaction design
3D Visualization
Adaptive

Pitch deck

We created custom user flows for creating We had several iterations and devoted around 60 hours to it in total.

Colors

We took the original color palette and made it more vibrant and bright. Dominant colors are warm: coral, yellow and green.

Proportions

We used rounded border sand a minimum distance between blocks. By calculating the percentage of rounding and adhering to the insets, we maintained perfect proportions throughout the project.