top of page

The goal of prioritizing usability and aesthetic appeal was to enhance the post-game experience, fostering a more connected and immersive world for players to explore and interact with.

Duration: 4 months

Role: Lead UX UI Designer​

I worked on designing an intuitive and appealing control panel, allowing players to review their game statistics, manage their profiles, and exchange the NFTs obtained during gameplay. Additionally, I was in charge of designing user interfaces that simplify navigation and interaction on the NFT trading platform within the game, while considering both user requirements and the complex system requirements associated with Web3 and cryptocurrency integration.

The Beacon is a fantasy roguelike RPG game that combines social elements with NFTs. It challenges players to explore dungeons, face monsters, and participate in a virtual economy where they can trade the NFTs earned during a match.

The Beacon: NFT trading dashboard

Where adventure meets the future: The Beacon blends fantasy with NFTs, creating a gaming experience like no other

back.png
Explore.png

Sitemap

The sitemap for The Beacon is designed to ensure intuitive navigation and easy access to all key features within the platform. It is structured to guide users seamlessly through the various aspects of the game, from gameplay essentials to community interactions.

stiemap.png

The design system that captures the platform's essence by balancing a sense of playfulness with a clean, easy-to-understand layout, ensuring it remains engaging without feeling childish.

Design System

Style guide.png
explore before.png

Old explore

Explore.png

New explore

One of the key requirements was designing the explore page to make it more engaging for users while effectively communicating and notifying them. To achieve this, we implemented a notification system and added a news & activities section. Additionally, to enhance the page's lore and user interaction, a leaderboard was also incorporated.

Explore

Navigation 

Originally, the navigation was designed with a header and a burger menu in the right corner, but this setup limited access to the pages. To improve usability, we proposed switching to a sidebar menu, offering users a clearer and more organized structure for navigating the website content.

New navigation

menu.png

Old navigation

Profile_ui.png

The Profile

At the beginning of the project, it was essential that the profile showcase the user's character, pet, and chosen aesthetics in a captivating way. This included the house, where users invest significant time and money to creatively and originally decorate and configure their spaces.

The profile also needed to display run stats and records, allowing users to track and showcase their progress as gamers. Additionally, it featured the pet and character collection, along with a comprehensive item list. This list allows users to filter, sort, and search through their items, and includes the functionality for users to withdraw their items.

Old profile

portfolio before.png
Withdraw-ui.png

Trade Items

A key feature was enabling users to easily trade or withdraw items from their inventory while meeting Web3 and crypto requirements. A dedicated section was designed for trading NFTs earned in gameplay, allowing users to browse, buy, sell, and exchange items within a secure, user-friendly interface that integrates smoothly with the game’s economy.

bottom of page