Game of Beasts is a fantasy NFT card game where players buy, collect, and battle with cards. The client had working desktop mockups in Adobe XD but needed the entire experience converted to mobile. Not a simple resize: the interaction patterns, layout hierarchy, and screen flow all had to be rethought for a smaller screen.

The client provided the desktop mockups and a set of fantasy creature illustrations (human bodies, animal faces, medieval armor). Some illustrations were incomplete, so I created missing graphics by compositing parts from the existing artwork.

I started with a flowchart to map the full game flow: collection, marketplace, deck building, battle sequence. Understanding how players move between these modes was critical before touching any screen layout.

From there, low-fidelity wireframes to define the mobile structure. The challenge was fitting a card game UI (which relies on visual density and comparison) into a format where screen space is limited.

Once the structure was locked, I built the UI layer on top: applying the fantasy aesthetic to the wireframes and progressively refining each screen into detailed mockups. Where the client's illustration set had gaps, I filled them by compositing elements from the provided artwork to keep the visual language consistent.

The final delivery was a complete mobile UI covering the full game flow: collection, marketplace, battle, and card detail screens. Every screen maintained the fantasy aesthetic from the original desktop version while working natively on mobile.

The client was extremely satisfied and impressed with the transformation of his basic sketch into a fully-fledged mobile app for "Game of Beasts."