End to End UX Architecture and UI Design for an Live-Service autobattling TCG.
I led end-to-end UI for a live, systems-heavy card game: from flows and wireframes to interactive prototypes and shipped visuals. My focus was player clarity and immersion under fast decision-making, consistently balancing readability, aesthetics, and performance.
Team Size 
4 UI Designers/Artist, 2 UI Programmers

Splinterlands is an online strategy card game where players build decks and trade cards on an open marketplace and exchange. Here were my responsibilities during my time at splinterlands

1. End-to-End UI Ownership — Drove complex features from player flows and wireframes to interactive prototypes and shipped visuals, ensuring clarity, immersion, and consistency with gameplay.
2. Interaction & Visual Language — Balanced functionality and aesthetics. Defined a coherent visual language and motion system that reads in high-pressure play.
3. Technical Implementation Readiness — Worked hands-on in Unity (NGUI, Scripting, materials), partnering with engineering to scope, profile, and resolve integration challenges.
4. Standards, Docs & Systems — Built and maintained a scalable design system (components, tokens, iconography) with detailed specs and style guides to accelerate cross-platform delivery.
5. Cross-Functional Leadership & Mentorship — Led alignment across UX, design, art, and engineering; presented decisions clearly in a multicultural environment. Guided designers and championed modern UI practices in our team 5.
Gameplay Designs - Deckbuilding and Team Creation

The Team Creation screen is where players build their decks before engaging in PvP battles. I was responsible for creating Wireframes, and final production UI and animation comps for this feature. Additionally, I developed an animation comp to preview all the necessary animations required for its implementation.
Our primary focus was on addressing the challenges of filtering and rulesets. Given that each battle features a random ruleset and players can have vast card collections, it was crucial to provide effective filtering options and ample visual space to allow players to see how their team is being constructed.

Animation Comp with Final UI

Here is the previous implementation before my redesign, along with the greybox wireframe I created.
Previous Implementation
Previous Implementation
Greybox Wireframe
Greybox Wireframe
Final UI which was implemented in game
In Game UI
In Game UI
When Cards are Selected
When Cards are Selected
Storefront Designs - Battle Pass and Card Pack Stores

Led the design and development of the Splinterlands storefront, crafting intuitive user flows and wireframes that optimized the progression experience. Successfully launched the Season 1 Battle Pass and other monetization features. Additionally, I spearheaded the creation of custom animations and forms to elevate the storefront’s visual appeal and functionality.
Season 1 Battle Pass
Season 1 Battle Pass
Pack Sale User Flow
Pack Sale User Flow
Pack Sale main Page
Pack Sale main Page
Animations and Art Assets

Designed and developed the card pack opening animation and crafted the card back artwork for the reveal screen, enhancing the overall user experience with engaging visual elements that added excitement and anticipation to key in-game moments.
Design System and Vector Art

Developed a comprehensive custom Figma design library, complete with all essential UI components, color schemes, and assets to streamline collaboration between developers and the UI team. This below is an example of the early stages of the library.
Icon Library
Icon Library
Ornaments
Ornaments
Colors
Colors
Typeography
Typeography
Ability Icons

Created and Shipped Vector art for ability icons and Card abilities. 

You may also like

Back to Top