Case study: A landing page design for an NFT gaming event by Enjin
A case study on an event called NFT Battle organized by Enjin
Context
This case study was an assignment given in the 10kdesigners cohort. Our problem statement design the website for an upcoming event. The goal of this website is to talk about the event, showcase why someone should attend it, and accept registrations.
The niche I got was Blockchain/Cryptocurrency I dwelled more into the niche and found NFT’s a very interesting niche to explore more.
Background
Being a beginner in this field I had a lot of horizons to jump on, companies using blockchain/Defi are making a huge rise today. I had to research and get my cards right before designing anything.
Our prompt required me to design an event page with more emphasis on visual design, considering that I preferred to approach the process the following way
1. Research 🖋
Okay, how on earth did this idea come up? Thanks to my friend , who helped me get to know about this crazy NFT card gaming dimension. So my first step for ideation was
Research on NFT- gaming space
My research began with some primary research about crypto gaming. This revealed a big USP how to create an event i.e.
“Through NFT gaming, any assets in the game like utility, armor, land, or any asset, can become NFT and can easily be owned, transferred, and sold on the blockchain. The NFT gaming platform also gives gamers access to NFT markets to buy and sell one-of-a-kind NFTs” — From the internet.
Who are my target users?
Typically 18+ years of users mostly the ones who own a crypto wallet in any platform
So I decided to divide the target users into three categories:
⚡️Crypto enthusiasts: users who are accustomed to using a marketplace for buying/selling NFT’s and are avid NFT holders
🎮 Crypto Gamers: Users who are into crypto gaming and have used platforms like chaingames.io making this
🐣 Newbies: New users who are very new to blockchain/crypto technology and are trying to find a platform to get started
What expectations do people for this event have?
👛 Easy transfer of NFT’s to their wallet
👾 Interesting game and worth putting money on
💸High output from putting less effort
This helped me validate using an NFT card game.
What will be NFT Battle?
- Will have custom cards with certain attributes ( eg. health, armor, etc)
- The battle is determined whether one quantity is more than the other for eg ( if one has a diamond sword, a ruby sword won’t be able to give a tough fight)
- Once a user wins one battle the user gets upgraded in the leaderboard and will also have more value in a certain attribute
- A Randomized algorithm will make them pair up and elimination does not exist, you can upgrade your attributes by buying more NFT’s using $ENJ.
- It Will be Organized by a company that will provide a battle platform with the cards
- The cards will be bought/sold in the selected marketplace
- A leaderboard to keep up the competition among the participants.
So I decided to take Enjin as the platform Why?
- Enjin has many gaming additions that
- It is also a Marketplace where participants can buy, sell, bid, and trade cards
- Fairly popular among the gaming community
- The Enjin platform itself enables development teams of all sizes to easily mint, trade, distribute, and integrate NFTs into their games, apps, and projects without any blockchain coding experience. A very suitable platform for an event like this.
Why should Enjin organize this event?
🎯 Branding: Enjin is one of the best platforms for maintaining virtual goods using the ethereum blockchain, Thus can be the best source for crypto gaming events
✨ Popularising the Enjin Wallet: With over 1.8 million downloads, the Enjin Wallet has more features and use cases than you can shake a digital sword at.
🆕 Getting New Users: A lot of new users can use this as a head start for starting their NFT careers
2. Inspiration 💭
- As taught in the cohort, design inspiration is one of the key roles in the visual design process. For inspiration, I went through a ton of crypto gaming websites and understood how gaming is presented on landing pages.
3. Creating a Theme 👾
- I started visualizing the Card Game with characters that I created in Figma. The characters are made like 8-bit characters, I wanted to demonstrate how characters can have different persona’s so that the user has reliability, liking-ness towards certain characters.
- These cards are what the event will be based on this, needs a lot of visual attention from the user
- Variations are what will make the games more interesting
- The event page should showcase this interesting game as well as provide information as to why to join it
- Here I listed some of my thoughts on what to include:
4. Information Architecture 🏠
This is the final IA for the event page, this is something that I worked out after considering all my key points on What to include and what NOT to include on the landing page.
5. Wireframes
Version 1: This version was low fidelity wireframe where I tried to cover the basic USP’s of the landing page
Version 2: After going through other websites like https://godsunchained.com/, https://www.cryptokitties.co/ including graphics used in characters in the website will help in creating a unified theme, thus the mid-fidelity iterations have all the discussed features.
6. Designing Visuals 👩💻
- After reviewing a lot of visual designs from similar websites related to crypto gaming. The visuals were primarily important for gaming websites.
- Dark websites pulled the most attention from the users
- Observed: Events related to blockchain-primarily contained dark colors
- The company’s color theme was in the shades of purple, thus going through the same theme, the dark mode + purple theme was chosen.
The following visuals provide the breakdown of each section of the website
i. About Page
The about page works as a summary for the whole landing page, it should be easy to read and understand moreover, should be simple to read and display the most important info
- Navbar: All linked subpages in the landing page, CTA of Register provided
The Navbar is sticky, thus will make it accessible to navigate through the page also the CTA (Register )will always be fixed
- The Big Bold caption to grab attention, eyes are then drawn to the date, time, and CTA which is the main goal of this page
- Visual Display of the cards brings the event’s identity first to the eyes
ii. About (cont.) and How to Play
- Incentives: Providing perks to join the event with visuals, which convey the message better than words! The graphics resemble the 8-bit characters that are used in the game
- A video can help explain the game better than text, here is a list of reasons why videos help a website as well
iii. Prizes and Schedule
- Prizes help in attracting the user towards any event, here Enjin might include tokens as prizes, and also sponsors can hop in and contribute to the prizes as well
- The schedule may include some events that help Enjin popularise its software and marketplace.
iv. Sponsors and FAQ’s
7. Iterations and Feedback ✐
I had made several iterations during my project during the course of feedbacks, to see all of them hop onto my Figma file
The feedback that I received from my mentor was extremely helpful in terms of copywriting and visuals, I had worked on more iterations after getting the feedback from the respective mentors and put down pointers where I lacked.
The feedbacks were
- To improve the copywriting ( later for which I iterated a few times)
- Few hiccups in the mobile version where I fixed spacing issues
9. What I learned ✅
- I learned a lot from this assignment not only about this niche but also the “metaverse” of opportunities one has in the blockchain.
- Organized my work making sure I have enough research before beginning with designs
- Visual Designs take a lot of competitive analysis which made me understand the reason why landing pages are designed the way they are!
- Making sure to understand the company’s values, also the environment before designing something for them
Lastly thanks a lot to and for the feedback and for helping me out with this process! 🥰
