A landing page design for an NFT gaming event by Enjin
A landing page design for an NFT gaming event by Enjin

A landing page design for an NFT gaming event by Enjin

image

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

image

1. Research 

Okay, how on earth did this idea come up? Thanks to my friend Prajjwal Gupta, 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 in 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, armour, etc)
  • Battle is determined whether one quantity is more than the other for eg ( if one has a diamond sword, a ruby sword wont be able to give a tough fight)
  • Once a user wins one battle the user gets upgraded in leaderboard and will also have more value in certain attribute
  • Randomised algorithm will make them pair up and elimination does not exist, you can upgrade your attributes by buying more NFT’s using $ENJ.

🙌🏼
Organised 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 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 organise this event?

  • Branding: Enjin is one of the best platforms for maintaining virtual goods using 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 in landing pages.

image

3. Creating a Theme

  • I started visualising 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 a reliability, liking-ness towards certain characters.

image
  • These cards are what the event will be based on thus 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 with the information as to why to join it
  • Here i listed some of my thoughts on what to include:
image

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 in the landing Page

image

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 features as discussed above

image

6. Designing Visuals

  • After reviewing a lot of visual designs from similar websites related to crypto gaming. The visuals were primarily IMPORTANT for such websites.
  • Dark websites pulled most attention from the users (https://duniagames.co.id/discover/article/alasan-kenapa-gamer-suka-tema-dark-mode/en)
  • Observed: Events related to blockchain primarily contained dark colours
  • The company's colour 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

1. 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

  • Nav bar: All linked subpages in the landing page, CTA of Register provided

The Nav bar 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 an identity

image

2. 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 of why videos help a website as well

image

3. 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 their software and marketplace.

image

4. Sponsors and FAQ's

image

7. Iterations

I had made several iterations during my project during the course of feedbacks,

to see all of them hop on to my figma file

8. Feedback

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 feedbacks from the respective mentors and put down pointers where i lacked.

image

The feedbacks were

  • To improve the copywriting ( later for which i iterated a few times)
  • Few hiccups in the mobile version where i fixed with 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 blockchain.

📖
Organised my work making sure i have enough research before beginning with designs
image
🚨
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