NFT Online Game | UX/UI Design

Olga Radu

0

Graphic Designer

Web Designer

UX Designer

Adobe Illustrator

Figma

Miro

After a brief meeting with my client, I gained a more comprehensive understanding of the game's objectives, regulations, and intended mechanics. However, despite this newfound knowledge, there were still several inquiries that required independent investigation on my part.

Simplified game play

In order to create a more streamlined and user-friendly experience for players, I needed to consider the structure of the two primary pages of the game: the landing page and the game page. This involved taking into account factors such as the placement of important information and CTAs, as well as the overall flow and organization of the pages. My goal was to create a game that was not only engaging and entertaining, but also easy to navigate and use, which required careful consideration of the UX design from the very beginning of the process.

Page 1: landing page 

Landing page - flowchart
Landing page - flowchart
Landing page - wireframe and behaviour
Landing page - wireframe and behaviour

Page 2: game page 

The main objective of this page was to seamlessly integrate all necessary information into a single, cohesive platform. This was a crucial requirement outlined by my client from the beginning.
 
To meet this challenge, I employed an innovative solution - implementing modals for each additional information page such as "About Us," "Rules," and "Profile." By doing so, I was able to maintain a sleek and streamlined design, while still providing all the pertinent details my clients desired. The result is a user-friendly, comprehensive webpage that meets and exceeds my clients' expectations.
Game page: wireframe and behaviour
Game page: wireframe and behaviour

Wallet & coin conversion

This was a challenging part because I had to find a way to present important information in a simple and fun way. The process should be straight forward: you can buy coins in order to play or you can withdraw the coins you earned in the game. 100coins = 0,01 EGLD. 
For both actions, I decided to incorporate default values but also an input field in order to allow players to buy/withdraw custom values. 

Game's visuals

Because I didn't find any specific personality or tone, I tried to focus on elements that evoke a sense of fantasy, magic and mystery in order to transports players into a fantastical world full of wonder and enchantment.

Color palette

In order to achieve the transportation into this fantasy world of the Maiar Elves, I chose a refined color palette based on shades of dark blue and purple. With this color palette, I aim to create an atmosphere of intrigue, mystic, and tension. Together, these colors can create a sense of otherworldliness, making players feel as though they have entered a fantastical and enigmatic world.
Game's visuals: color palette
Game's visuals: color palette

Background image

In order to enhance the unknown, danger, and mystery to the players I search for a background of a dark forest. This also implies that there is more to the game world than what meets the eye, suggesting hidden secrets, quests, or treasures that players can discover as they navigate through the game.
Furthermore, a dark forest also symbolises the supernatural and the fantastical. The trees, foliage, and wildlife can take on a mystical or magical quality, hinting at the possibility of encountering supernatural beings or creatures. This can heighten the sense of wonder and excitement for players, drawing them into the game world and encouraging them to explore further.
Game's visuals: background image
Game's visuals: background image

Final product

Final product: mobile hi-fi prototype
Final product: mobile hi-fi prototype
Final product: responsive design mockups
Final product: responsive design mockups
Like this project
0

Posted Feb 27, 2023

From just a sketch, the design of a captivating and immersive online game for an NFT collection.

Likes

0

Views

50

Tags

Graphic Designer

Web Designer

UX Designer

Adobe Illustrator

Figma

Miro

Magnetic Forest | Branding
Magnetic Forest | Branding
E-commerce | UX/UI Design
E-commerce | UX/UI Design
E-commerce Mobile | UX/UI Design
E-commerce Mobile | UX/UI Design