UX Case Study: Eonar Odyssey – Bridging Web3 Mechanics with Immersive Sci-Fi Gaming

Welcome to Eonar Odyssey, where interstellar exploration meets the cutting edge of blockchain technology. In this sci-fi adventure, players are not just travelers; they are pioneers of new worlds, building colonies, managing resources, and staking their tokens to expand their influence. But here lay our greatest challenge: how do we design a UX that makes complex Web3 mechanics feel as intuitive as traditional gaming?

This case study unravels our journey in designing an experience that seamlessly integrates token staking, liquidity pools, and NFT-based assets into an engaging, story-driven game world.

Objective:

To craft a user experience that blends deep blockchain mechanics with an intuitive and immersive sci-fi adventure.

Key Features:

• Token Staking as Colony Expansion: Players stake EON tokens to establish and grow colonies on various planets.

• Liquidity Pools as Planets: Each planet represents a liquidity pool with unique staking rewards.

• NFT Spaceships & Crew: Customizable spaceships and crewmates with diverse attributes shape the gameplay.

• Progressive Exploration: Players begin in the Belknot Solar System, unlocking additional systems over time.

The Player's Journey

1. Home Screen – The Gateway to the Universe

As the game boots up, a breathtaking vista of space unfolds before the player’s eyes. A colossal space station looms in the foreground, and distant planets shimmer against a cosmic nebula. The CTA is clear: "Play" stands bold at the center, inviting the player to embark on their odyssey.

Challenge:

• How do we make Web3-based onboarding feel as simple as launching a traditional game?

  
  

How Did We Crack It?

• Seamless Wallet Integration: Instead of forcing players through a cumbersome wallet setup, we implemented a "Guest Mode" that allows them to explore first.

• Familiar Layout: The interface mimics mainstream RPGs, reducing friction for non-crypto users.

2. Galaxy View – The Map of Infinite Possibilities

Upon selecting "Play," the player zooms into the Galaxy UI, where eight solar systems glisten like constellations waiting to be explored.

Only the Belknot Solar System is unlocked. Others? Shrouded in mystery.

Challenge:

• How do we keep players engaged while gradually introducing new content?

  
  

How Did We Crack It?

• Progressive Unlocking: We implemented a star-map progression system where completing objectives unlocks new solar systems.

• Dynamic Visuals: Locked systems pulse faintly, teasing future exploration.

3. Solar System UI – The Command Center

As players enter the Belknot Solar System, they find themselves in an interactive dashboard, a holographic display of planets and stations. From here, they access:

• Store: To acquire NFTs like spaceships, crew, and artifacts.

• Hangar: Where spaceships can be customized and prepared.

• Space Station: A hub for managing resources and assets.

• Planets: The real staking battlegrounds.

Challenge:

• How do we visually and functionally differentiate a Web3 economy from a traditional in-game store?

How Did We Crack It?

• Categorized UI Panels: Clearly labeled sections avoid overwhelming the player.

• Tooltip System: Hovering over assets reveals their blockchain-related utility.

4. Hangar – Preparing for Cosmic Expeditions

Before venturing into the unknown, players first step into their Hangar—a cyberpunk-inspired bay where spaceships stand tall, awaiting their next expedition. Each spaceship is a highly customizable asset, fine-tuned for interstellar adventures.

🚀 Spaceship Features:

1. General Stats:

• 🛡️ Armor – Determines spaceship durability in deep space.

• 🚀 Engine Boost – Affects travel speed and fuel efficiency.

• 📦 Cargo Hold – Defines how many resources a spaceship can carry.

• ⛏️ Mining Speed – Influences the rate of resource extraction from colonies.

• 🔫 Weapons – Enhances combat effectiveness in later gameplay expansions.

• 🛡️ Shields – Provides additional protection against external threats.

2. Special Items:

• 🎭 Artifact Slot – Allows equipping ultra-rare artifacts, which enhance spaceship capabilities.

3. Equipable Crew-mates:

• 👨‍🚀 Five Crewmate Slots – At least three crewmates are required to launch any expedition, regardless of available EONs.

👨‍🚀 Crewmate Races & Ship Variants:

Each spaceship was built by one of the three intelligent races, and players could mix and match crewmates to enhance their ship’s performance.

• 🛸 Rafillian – Masters of propulsion technology, improving Engine Boost.

• ⛏️ Afolk – Experts in resource extraction, increasing Mining Speed & Cargo Hold.

• 🛡️ Gaardmen – Defensive specialists, enhancing Armor & Shields.

With their spaceship prepped, crewmates selected, and strategy in place, players were now ready to set sail into the vast Eonar Odyssey. 🚀

Challenge:

• How do we encourage meaningful customization without making it feel like a grind?

• How do we make artifacts feel exclusive and valuable?

How Did We Crack It?

• Preset Loadouts: Suggested builds help new players get started quickly.

• AI-based Optimization: A smart "Equip Best" button auto-selects optimal gear. This was parked for later improvements.

• Limited Supply: Artifacts are time-sensitive rewards for early adopters.

• Special Slot: Artifacts were given a separate special slot on the spaceship making them appear like a unique and rare addition.

• Unique Perks: No two artifacts have the same function, fostering strategy.

5. Planet Interface – The Heart of Staking

Planets serve as staking hubs, each offering different liquidity pool incentives. Players must weigh options before committing their EONs to start their expedition to that planet.

When players embarked on a planetary expedition, they expended EON tokens as fuel. A cinematic animation showcased their spaceship launching into hyperspace, transitioning smoothly into the planet’s atmosphere. Upon arrival, a bottomsheet UI appeared, presenting vital statistics about the planet, including staking rates, resource generation, and liquidity pool metrics.

Each planet represented a liquidity pool, combining two currencies—for example, EON:BTC. The more EON tokens players staked, and the longer they staked them, the higher their yield from the colony.

The image below shows the initial wireframes that painted the picture depicting this complex staking process represented by a sci-fi space odyssey narrative.

First-time Visit – Setting Up a Colony

On the player’s first visit to a planet, they initiated the staking process, which worked similarly to depositing money in a bank to earn interest. The UI guided them through selecting how much EON they wanted to stake, explaining projected yields and colony growth benefits in an easy-to-understand format.

Subsequent Visits – Harvesting Rewards

On returning to an established colony, players could collect not just their staked EON tokens but also additional resources like Terkium Gas and Blue Terkium—critical for spaceship upgrades and trading. A refined UI displayed their accumulated earnings, reinforcing the benefits of long-term staking through clear, gamified feedback.

Challenge:

• How do we make staking decisions engaging rather than purely financial?

How Did We Crack It?

• Narrative Integration: Each planet has a backstory, making it feel like a real expedition rather than a DeFi transaction.

• Risk & Reward UI: Clear indicators show potential earnings and associated risks.

6. Additional UI Elements – Enhancing Engagement

• Setup a Colony Dialog – Guided players through their first staking experience.

• Stake Token Dialog – Allowed players to monitor and increase their stake.

• Collect Resources Dialog – Provided a satisfying reward collection experience.

• Transaction Successful/Failure Dialogs – Ensured clarity in blockchain transactions.

  
  

Final Thoughts: Crafting a Future-Proof Web3 UX

Designing Eonar Odyssey wasn’t just about building a sci-fi game; it was about redefining how Web3 mechanics could be visually, interactively, and narratively integrated into a seamless user experience. By prioritizing accessibility, immersion, and progressive learning, we created a UX framework that makes blockchain feel like an adventure, not a transaction.

Key Takeaways:

• Web3 Mechanics Should Feel Natural – Token staking & liquidity pools were transformed into a sci-fi economy.

• Progression Matters – Locked solar systems and limited-time artifacts created long-term engagement.

• UX Should Guide, Not Overwhelm – Smart defaults and AI-driven optimization enhanced usability.
  
  

Thank you!

Liked our work on this project? connect with us over a call today!