Ordinem is a sophisticated Web3 trading card game that combines the strategic depth of Magic: The Gathering with the accessibility of Hearthstone. Set in a universe where players command battlements through five distinct orders of magic (Vitae, Elementum, Celestia, Necros, and Potentus), the game features full NFT integration on the Avalanche / PLAYA3ULL blockchain, giving players true ownership of their cards. The game utilises a unique thread resource system, magical tokens used to play cards, that adds strategic complexity beyond traditional mana systems. Ordinem is available on desktop and mobile (not available yet), with a beta launch planned for late 2025 or early 2026.

My Work

• Board Layout Revamp: I redesigned the in-game board layout to improve game flow, creating new components and resizing existing ones to establish proper hierarchy and priority. The original layout suffered from poor sizing and positioning that obscured critical gameplay information.

• Thread Pool Visualization Redesign: I tackled a major UX challenge around the thread cost system—a core mechanic that determines which magical resources (threads) are consumed when playing cards. The original system was confusing and generated numerous player complaints because thread costs were positioned far from relevant cards, users couldn't see which specific threads would be consumed, and the connection between cards and resources was unclear. My solution involved repositioning the thread pool closer to cards for better relevance, displaying only top-level counts at a glance for quick scanning, implementing hover states on cards to show exactly which threads would be consumed and in what order, and adding an expanded hover view to give users a comprehensive understanding of all available threads. This redesign was particularly well-received by the game design team, who had been stuck on how to solve this problem.

• Cross-Platform Design System: I developed a visual style system based on the different magical orders (Necros, Vitae, etc.) to ensure the thread pool UI worked effectively across game boards with varying color schemes, maintaining readability and consistency.

• Mobile Adaptation: I adapted the entire UX/UI for mobile platforms, rethinking desktop interactions like hover states and translating them into touch-based inputs. The biggest challenge was managing the complex board layout—I prioritised high-value, frequently accessed elements (like the thread pool and active cards) while deprioritising rarely accessed areas (like the graveyard and discard pile), ensuring the most critical information was available during key decision-making moments.

• MTGA Competitive Analysis: I conducted research comparing Ordinem's UX/UI to Magic: The Gathering Arena, learning that high-value and high-use elements must be prioritised. However, I deliberately diverged from MTGA's patterns where Ordinem's additional complexity—particularly around hybrid threads and the thread pool system—required rethinking standard TCG information hierarchies.

• Icon Design: I created numerous in-game icons for abilities, effects, and game mechanics, producing both SVG and rendered versions optimised for different use cases.

Outcome

• Thread pool redesign and board layout improvements are currently in development, with mobile versions also in production.

• Work received positive feedback from the team, particularly from game designers who had struggled to identify a clear solution to the thread pool usability issues.

• Successfully established a scalable design system that accommodates multiple visual themes across different magical orders.

• Preparing for beta launch in late 2025 or early 2026 with significantly improved UX/UI across both desktop and mobile platforms.

Learnings

Working on Ordinem taught me the critical importance of understanding when to show information, not just what to show. Second-by-second gameplay decisions require different information at different moments, and having a deep understanding of game flow is essential to knowing what to surface when. You can have all the UI in the world to convey information, but if you don't present it at the right time in the decision-making process, it becomes noise instead of clarity.