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.
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
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:
What expectations do people for this event have?
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.
So I decided to take Enjin as the platform Why?
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
- 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.
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.
- 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:
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
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
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
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
5 Reasons You Should Use Video on Your Website [Infographic]
Are you looking for ways to improve your business website? Want to know why adding video should be one of the techniques to try?
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.
4. Sponsors and FAQ's
I had made several iterations during my project during the course of feedbacks,
to see all of them hop on to 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 feedbacks 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 with spacing issues