The Ordinem subsite is the central hub for the competitive trading card game, built to showcase its PvP, evolving card meta, and expanding lore universe. The previous web presence didn’t match the game’s tactical depth or visual identity, so I designed and built a new experience centered on discovery, mastery, and progression. It balances world building with utility: fast access to rules, cards, and competitive play.

My Work

Experience Design & Information Architecture: Structured the site around core player needs Cards, Rulebook, Lore, and Play reducing friction between learning and acting. Clear entry points for newcomers and efficient deep paths for advanced players.

Card Browser (Framer Workshop + Custom Code): Built a performant card explorer with active filtering, search, and archetype views. Integrated custom code components and off‑the‑shelf modules for speed without compromising fidelity.

Lore & Rulebook (Framer CMS): Established content models for chapters, entries, and updates; enabled iterative publishing with versionable sections and future localisation paths.

Custom Graphic Widgets: Implemented dynamic UI elements (archetype tiles, thread costs, weave resource visualisations) to connect mechanics with the brand’s metaphysics.

Performance & UX Optimisations: Tuned load priorities, modularised components, and standardised motion to keep the site snappy during peak content browsing.

Outcome 

A cohesive, high-clarity product surface that makes Ordinem immediately legible: learn fast, browse deep, and play now. The card browser became a core engagement driver, while the CMS stack unlocked scalable lore and rules publishing without sacrificing polish.

Learnings

End-to-end ownership (concept to code) kept the mechanics, narrative, and UI aligned. Building the browser in Framer with custom components proved that performance and maintainability can coexist when systems are clean, tokens are enforced, and complexity is isolated behind good abstractions.