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
