Role   UX/UI Designer (Individual Design Exercise)

 

Tool    Figma

           Photoshop

           After Effects

           Procreate

Tool    Figma

           Photoshop

           After Effects

           Procreate

overvIew

overvIew

overvIew

In order for NFT (non-fungible token) collections to go on sale, websites integrated with web3, where the process called "minting" takes place, are needed. The smart contract of the NFT collection is deployed to the website, and thus, the randomly generated images are transferred from the contract to the wallets of their owners during the minting process. This transaction, which is quite complex on a contract basis, should be presented with the simplest possible interface for users to mint.

This website is the solution to meet people's basic needs in minting Doodles Mutants NFT collection.

overvIew

In order for NFT (non-fungible token) collections to go on sale, websites integrated with web3, where the process called "minting" takes place, are needed. The smart contract of the NFT collection is deployed to the website, and thus, the randomly generated images are transferred from the contract to the wallets of their owners during the minting process. This transaction, which is quite complex on a contract basis, should be presented with the simplest possible interface for users to mint.

This website is the solution to meet people's basic needs in minting Doodles Mutants NFT collection.

Examples of visuals of NFT collection and roadmap of the project are provided to help the user see and understand the project

Examples of visuals of NFT collection and roadmap of the project are provided to help the user see and understand the project

overvIew

In order for NFT (non-fungible token) collections to go on sale, websites integrated with web3, where the process called "minting" takes place, are needed. The smart contract of the NFT collection is deployed to the website, and thus, the randomly generated images are transferred from the contract to the wallets of their owners during the minting process. This transaction, which is quite complex on a contract basis, should be presented with the simplest possible interface for users to mint.

This website is the solution to meet people's basic needs in minting Doodles Mutants NFT collection.

Examples of visuals of NFT collection and roadmap of the project are provided to help the user see and understand the project

understanding

understanding

understanding

Needs

  • Introducing all aspects of the project

  • Giving sneak peeks from the project

  • Attracting NFT buyers and collectors

Target User Group

  • Introducing all aspects of the project

  • Giving sneak peeks from the project

  • Attracting NFT buyers and collectors

understanding

Problem Scope &
Target Audience

  • People with busy working hours who don’t have time for cooking


  • People who have children and have challenges finding different and quick meal ideas


  • People who don’t know how to cook anything and want to learn cooking

Problem Scope &
Target Audience

  • People with busy working hours who don’t have time for cooking


  • People who have children and have challenges finding different and quick meal ideas


  • People who don’t know how to cook anything and want to learn cooking

Goals

  • Catching the new technology

  • Being a part of the NFT environment

  • Making NFT investment

Frustrations

  • NFTs are not easily accessible

  • The research process may be chaotic

  • It’s hard to trust a project and team

The roadmap of an NFT project is the most important part for Kyle. He wants to understand the future of his investment. And also he likes art, so visuals are important for him. Cute profile picture projects are easy to sell, which makes them a good investment.

I want to have an NFT that will be a good investment for future

Goals

  • Catching the new technology

  • Being a part of the NFT environment

  • Making NFT investment

Frustrations

  • NFTs are not easily accessible

  • The research process may be chaotic

  • It’s hard to trust a project and team

The roadmap of an NFT project is the most important part for Kyle. He wants to understand the future of his investment. And also he likes art, so visuals are important for him. Cute profile picture projects are easy to sell, which makes them a good investment.

"I want to have an NFT that will be a good investment for future" Kyle, 22

user stories and personas

user stories and personas

To inquire the pain points and current solutions, I interviewed 5 participants and created a persona

user stories and personas

To inquire the pain points and current solutions, I interviewed 5 participants and created a persona

user stories and personas

To inquire the pain points and current solutions, I interviewed 5 participants and created a persona

My Assumptions

My Assumptions

My Assumptions

My Assumptions

  • The user is physically able to operate a mobile phone and/or computer.

  • The user is familiar with navigating a web browser on a mobile phone or computer.

  • The user has a crypto wallet to connect to the Ethereum mainnet.

  • The solution is operated on the blockchain via the smart contract of the project.

  • The authenticity of the solution has already been established and the user trusts it.

  • The user is physically able to operate a mobile phone and/or computer.

  • The user is familiar with navigating a web browser on a mobile phone or computer.

  • The user has a crypto wallet to connect to the Ethereum mainnet.

  • The solution is operated on the blockchain via the smart contract of the project.

  • The authenticity of the solution has already been established and the user trusts it.

Proposed Features

With the initial understanding of the problem, I proposed the following features for a minimum viable product.

With the initial understanding of the problem, I proposed the following features for a minimum viable product.

01 Provide official, updated, and authentic information about project and other announcements.

02 Provide a method for the user to connect with their crypto wallet

03 Allow users to find answers for their questions

01 Provide official, updated, and authentic information about project and other announcements.

02 Provide a method for the user to connect with their crypto wallet

03 Allow users to find answers for their questions

Wireframing

Wireframing

User Flow

With the content and features in mind, I moved on to coming up with a structure for the website.

Wireframing

User Flow

With the content and features in mind, I moved on to coming up with a structure for the website.

Wireframing

User Flow

With the content and features in mind, I moved on to coming up with a structure for the website.

Sketching w/ Ipad

I kicked off the design by sketching out low-fidelity on ipad.

Sketching w/ Ipad

I kicked off the design by sketching out low-fidelity on ipad.

Sketching w/ Ipad

I kicked off the design by sketching out low-fidelity on ipad.

DESIGN PROPOSAL

DESIGN PROPOSAL

DESIGN PROPOSAL

DESIGN PROPOSAL

01 Easy access to each section with the navigation bar

01 Easy access to each section with the navigation bar

01 Easy access to each section with the navigation bar

02 A series is presented for a quick view of example visuals. It is horizontally laid out to fit in the card UI component. The user can swipe left and right the card to get a view.

02 A series is presented for a quick view of example visuals. It is horizontally laid out to fit in the card UI component. The user can swipe left and right the card to get a view.

02 A series is presented for a quick view of example visuals. It is horizontally laid out to fit in the card UI component. The user can swipe left and right the card to get a view.

03 FAQ section where users can find answers to frequently asked questions about the project

03 FAQ section where users can find answers to frequently asked questions about the project

03 FAQ section where users can find answers to frequently asked questions about the project

04 "Team" section, which are links to the team's twitter addresses, for users to know better and trust the team

04 "Team" section, which are links to the team's twitter addresses, for users to know better and trust the team

04 "Team" section, which are links to the team's twitter addresses, for users to know better and trust the team

05 Minting page - users can connect to their wallet and mint nfts

05 Minting page - users can connect to their wallet and mint nfts

05 Minting page - users can connect to their wallet and mint nfts

PROTOTYPE

PROTOTYPE

PROTOTYPE

PROTOTYPE

If you want to try the interactive prototype of the app, you can click the link below to reach the Figma prototype

If you want to try the interactive prototype of the app, you can click the link below to reach the Figma prototype

If you want to try the interactive prototype of the app, you can click the link below to reach the Figma prototype

Responsive design

Responsive design

Responsive design

Responsive design