X8 Guild - All in one community platform

X8 Guild opening image: the words NFT Gaming Community Platform beside glowing purple crystals. — NFT gaming community platform: gaming, reward, earning and investing.

X8 Guild is a gaming community dedicated to generating income via blockchain games and digital asset investments. Their goal is to create a network of gamers, NFTs and DAOs to bridge investors and boost earnings in the metaverse.

Guild provides a platform for players, investors and NFT gamers to connect, learn, earn and build in the metaverse while maximizing profits. Their mission is to help Metaverse residents enjoy games and earn more money with freedom, trust and development.

On this project, Khoa (JAK) owned visual direction and illustration; the design of the website, platform, staking, gaming tools, NFT landing page, marketplace and admin deck; and the style guide used throughout. Branding was made with Sam; UX design and UX/UI analytics and improvement with Hoang Anh, Thach and Binh; Binh provided technical support. The publications shown in this article were designed by Khai Kei.

01. Problem and scope

The guild needed a face to tell its story to gamers and investors, tools for members to track games, NFTs, rewards and investments, and an admin desk for the operating team. The project is divided into three main areas.

Visual: creating the look and feel of the project with branding, visual direction and illustration design.
Platform and others: the practical features of the platform, including the design and development of a guild website, a platform for tracking and managing NFTs, staking, gaming tools and an NFT marketplace.
Admin deck: the behind-the-scenes management tasks such as user management, game administration and performance tracking.

X8 Guild scope board in three columns, Visual, Platform and Admin deck, naming the owner of each item. — Scope and owners per item; the dimmed items at the bottom were still pending.

02. Brand design

Logo

The X8 logo combines the sharp X angles with crystal durability, representing a strong, clear community. The X symbolizes a close bond and unique impact, while its bright purple color gives a friendly vibe. It is more than a symbol; it reflects unity and a future-focused vision.

How the X8 Guild logo came together: crystal material plus the letter X results in a purple crystal mark.

Crystal material, the letter X and the resulting X8 Guild logo.

A brand guideline helps X8 Guild keep a consistent, distinctive appearance across all communications: how to use the logo properly, its minimum clear space and the correct sizes for different applications.

X8 Guild logo usage rules: the exclusion zone around the logo and large, medium and small sizes.

Exclusion zone and three logo sizes.

Typefaces and colors

The type system uses Manrope for headings and Lexend for body text, supporting both Vietnamese and English.

The two X8 Guild typefaces: Manrope for headlines and Lexend for body text, with alphabet and numeral samples. — Manrope and Lexend.

Illustration revolves around crystals, following the belief that the world is formed by the energy emanating from crystals.

Six illustrated X8 Guild crystals in different blue and purple shades. — The crystal set used for illustration.

The color scheme features a dynamic purple gradient as the main color, with dark grey, turquoise and blue to keep the visuals vibrant and unified. Following these guidelines strengthens the brand identity and message everywhere.

Primary purple 4D32D1, dark 19161E, light F9F8FD and the secondary turquoise 19C2DA and blue 3869FA. — Primary and secondary colors with hex codes.

X8 Guild publications applying the identity: AMA, minigames, partnership and rebranding announcements. — The identity applied to publications; designed by Khai Kei with content from the community team.

03. Platform preparation

The UX design process unfolds in three main stages. It begins with the product vision to set a clear direction, then identifies specific use cases for the different user groups, and finally details the sitemap and user flow so the experience stays smooth and intuitive across the platform.

X8 Guild UX process diagram: Product vision, Usecase and Sitemap/Userflow with branches for gamers, investors, the guild and scholars. — From product vision to use cases and user flows.

During design preparation, the visual foundation is set with main, secondary and neutral colors plus a few accent shades for a unique and flexible brand image, along with specific fonts and sizes for clear and consistent designs. This foundation shapes the overall appearance of the platform.

The color style guide has vibrant purples for primary tones, cool turquoises and blues for secondary, balanced neutrals and a variety of accents for dynamic theming.

X8 Guild color style guide: purple, turquoise, blue and neutral scales, accent colors and the light-theme palette. — Color scales for the dark theme and the matching light-theme palette.

The typography style guide prioritizes clarity and consistency, featuring Lexend for body text and Manrope for headings in various sizes and weights, ensuring legibility and a polished look across the platform.

X8 Guild type scale from xs to 5xl with Lexend and Manrope in Regular, Medium, SemiBold and Bold weights. — Type scale by size and weight.

04. X8 Guild website

The website puts the emphasis on delivering information. It starts with a landing page to introduce the guild, then a blog to guide and educate the market, and finally introduces the NFT project.

The X8 Guild website on a laptop and a phone, with the X8 Guild, X8 Blog and X8 NFTs logos. — Three website branches: X8 Guild, X8 Blog and X8 NFTs.

Landing page

The X8 Guild landing page provides an interface and relevant information for both gamers and investors.

Game info

Providing information about games so users can discover new games and apply for scholarships.

X8 Blog

The X8 Blog is a separate branch of X8 Guild that provides information and updates on GameFi and market news for anyone who wants to stay up to date with the field.

X8 Blog article detail page and its content elements: headings, body text, lists, quotes and captioned images. — Article detail and its content elements.

NFTs landing page

Introducing the X8 Guild NFTs to potential users along with their benefits.

05. X8 Guild platform

The X8 platform is where users register an account and become guild members. Users complete daily tasks to earn tokens and level up, unlocking rewards. It is also where scholars track their progress, play games and complete missions to increase their scores, and where investors take part in investment opportunities.

The X8 Guild platform on a laptop and a phone, with the X8 Guild, X8 Staking, X8 GameFi Hub and X8 Play Ground logos. — The platform products: Guild, Staking, GameFi Hub and Play Ground.

General users dashboard

Registration takes only a few steps; related flows include connecting a wallet, updating user information and accessing notifications. Quests and Rewards offers daily quests, game quests and investment quests to level up and unlock rewards; Your points lets users track the points they have earned and spent.

X8 Guild user dashboard: account settings, the Quests and Rewards page and the Your points page. — Account, quests and points in one dashboard frame.

Scholars and gamers dashboard

The scholar and gamer dashboard streamlines the management of gaming activity: tracking progress, earnings and detailed statistics for each game in the portfolio. The game dashboard helps scholars manage their scholarship, gameplay progress and GameFi earnings; the game detail view tracks the details and efficiency of each game.

The scholar game dashboard with total income, 15-day statistics and tools, and the Axie Infinity game detail page with a cycle chart. — Game dashboard and game detail view.

Four game detail pages: battle history, game inventory, game quests and achievements. — Battle history, inventory, quests and achievements for one game.

Gaming tools

Gaming tools provide resources like game guides and tips to enhance the gaming experience and improve skills.

The Axie Card Explorer tool on desktop and mobile: a grid of Axie cards with filters by type, class and part. — Axie Card Explorer, one of the gaming tools.

Staking

Staking gives investors the opportunity to invest in X8 Guild: locking up an amount of cryptocurrency for a specific period in exchange for rewards.

X8 Play Ground: NFTs marketplace

X8 Play Ground is an NFT marketplace where NFT owners lease their NFTs to gamers. Gamers earn tokens by playing with these NFTs, and a commission from their earnings is shared with the owner.

X8 Play Ground on desktop and mobile: a list of game accounts for rent with commission, owner type and class filters. — Game accounts available for rent.

Four X8 Play Ground screens: account detail, renting progress, owner NFT management and lending NFT management. — Account detail, renting and owner-side NFT management.

06. Admin deck

The Admin deck covers user management, game admin, performance tracking, game account management, a basic design system as a style guide, and UX/UI analytics and improvement tasks.

Performance tracking

Track the total assets of the guild, cash flow and operating performance, and the gaming performance and efficiency of scholars.

The admin deck Guild performance page on an iMac screen with income charts, revenue by game and data tables. — Guild performance on a large screen.

The performance tracking page with the bar, pie, stacked area, line and multi-bar charts used in the admin deck. — The chart set used for performance tracking.

General admin

Games management is used to manage the games available on the website; edit game content allows adding new games or modifying existing game content. Blog management is for managing, creating and editing website articles and their information.

The games management page and the Axie Infinity edit game content page in the admin deck. — Games management and edit game content.

The admin deck blog management page with the article editor, cover image, publishing schedule and category. — Blog management: write, schedule and categorize articles.

User and asset management

The admin deck user management page with the member table by role and its components: copy text, more actions and filter dropdown. — User management by role: hunter, scholar, captain, admin and NFT owner.

The user detail page with personal information, wallet and social links, plus activity logs and admin role screens. — User detail, activity logs and roles.

The guild NFT asset management page with asset design, activity log, inventory and asset performance screens. — Guild NFT asset management.

07. Credits and links

A big thank you to everyone who contributed to the project: the engineering team, QA team, content and marketing team, project manager and product owner.

The full presentation can be viewed as a Figma prototype; the original article was published on Behance.

Presentation prototype on Figma · Original article on Behance