MISFITS
Misfits is an NFT project which launched on Sui Network with a 90's nostalgic feel, yet bold and brave ideas on where they want to take the project.
Client
Misfits
Year
2023
Category
NFT Collection
Type of Work
– Wireframing
– UX Consultancy
– UI Design
– Prototyping
The prospect of working with an NFT project that was launching on a fresh new chain was something I was extremely excited about.
I had first heard about Sui back in October 2022 and it soon became apparent that there was going to be an influx of new projects wanting to launch to claim OG bluechip status.
I had spoken with the founder of Misfits to discuss designing their site. The ideas being thrown around were great to hear and the founder had a clear vision for where he wanted to position Misfits in the Sui ecosystem.
I was requested to design the Misfits site with an NFT gallery. Further down the line, I was tasked with designing a staking platform for the community to use.
The Misfits team had an idea of showing a "Playbook", this would be an area where users could find out more details about the project. Within the playbook were four areas of information, "Vision", "Community", "Roadmap" and "Real World". Upon clicking the stylised accordion it would expand out to display further information.
This reduced the need for scrolling down a lengthy page and allowed the user to navigate through each area with ease and reduced friction.
The team cards I designed had a link to the team members Twitter profile, but to reduce an extra "click" I advised that the link should bring up the "Follow" overlay once the user is taken to Twitter.
The gallery was a way to allow users to filter through the collection by selecting different attributes. Each card had the ID of the NFT along with a rarity score placed in the top right. The filters were placed on the left side to allow room to host all of the various cards that formed the collection.
As the user selects a filter a "Clear All" call to action displays and also a chip associated with the selected filter is displayed above the card grid. A sort by rarity / ID number was added to give the user some more flexibility and ease of use when trying to find a specific NFT.
Once the user had found the NFT they were looking for they could click on the card to display all of the attributes associated with that NFT, along with a call to action to "View on marketplace".
The tablet (shown above) and mobile version of the gallery allowed the user to click on a "Filters" button in the top right of the screen. Once clicked, the filters overlay would slide over from the right, allowing the gallery not to be cluttered with too much information and prevented distractions for the user.
The Misfits team wanted to have a staking platform housed into their own site. Having seen previous staking platforms and flows, I wanted to make this a more seamless experience.
I suggested the use of tabs to switch between what is staked versus what isn't staked and an individual tab for "Points". The points tab allowed the user to see what points they have earned in total, how many Misfits they have staked, how many Misfits they don't have staked and how many Misfits they hold in their wallet.
As the user selects an NFT to stake, a checkmark appears in the top right corner of the card as a visual cue to demonstrate the card has been selected. A call to action appears once a card has been selected giving the user the option to "Stake All" / "Stake Selected".
The additional option to "Select All" / "Clear All" allows for larger holders to quickly and easily do just that, without the need to select an item one at a time. Once the user has confirmed which NFTs they want to stake, the card displays a "Staking" loading icon overlay, this helps to ease any doubt and helps to notify the user that the staking is working in the background.
