Case study · Cards, the Universe and Everything
Leading a Mobile-to-PC Port
Led the UX on a mobile card game’s move to PC and Steam, from portrait and thumb to landscape and mouse.
The game
Cards, the Universe and Everything is a free-to-play collectible card game by Avid Games, on mobile and PC.
- Role
- Lead UX Designer
- Date
- 2024 – 2025
- Team
- 1 designer, 2 artists, 2 engineers and 1 QA, with me as lead. I set the direction, made the layout calls, and reviewed the work against the audit board.
- Skills
- Design Direction
- Team Leadership
- UX Design
- Cross-Platform Design
- Interaction Design
- Wireframing & Prototyping
- Cross-Discipline Collaboration
- Documentation
- Tools
- Unity
- Figma
- FigJam
- Confluence
The challenge
Cards, the Universe and Everything had spent years as a portrait mobile game, designed for a thumb on a screen you hold in one hand. Moving it to a landscape monitor with a mouse and keyboard changed almost every screen, and because players share one account across both, the phone version had to stay in step. I led the UX for the port.
Decisions I owned
- 1
Collapsible drawers, not fixed panels
- Situation
- My first plan for the home screen fixed the season pass and quests down the right-hand side.
- My call
- I changed them to collapsible drawers, one at each edge, and kept the middle of the screen clear.
- Why
- Fixed panels take the width whether the player wants it or not, and the middle is where a returning player looks first, so it had to stay where they knew it.
- What happened
- Quests and achievements went from two or three taps deep on the phone to visible at a glance, without anything in the centre moving.
The plan I changed: season pass and quests fixed down the right-hand side - 2
The board layout, picked from six
- Situation
- The battle screen had to fit two hands, two sets of resources, a shared table and the controls into one landscape frame.
- My call
- I shipped the first of the six layouts we drew: players diagonally opposite, ledger and chat left as icons instead of side panels.
- Why
- The attention overlays showed each player’s hand, resources, deck and controls sitting inside their own half, with the table still reading as shared. Giving the ledger and chat panels pushed the board off centre.
- What happened
- It shipped, and the composition holds across every one of the game’s themed arenas.
The six I chose between - 3
Map the whole game before designing any of it
- Situation
- Nobody could say how much of the game the port actually touched.
- My call
- I built an audit board first: every area of the game in a column, the current mobile screen above the proposed landscape one.
- Why
- It put the scope in one place and gave the designer and me a single reference to review each screen against.
- What happened
- Fifteen areas mapped, and it kept working right through implementation, taking live changes to the mobile game like My Decks becoming Shinies.
Fifteen areas, current mobile screens above, proposed landscape wireframes beneath
Fifteen Areas, Mapped Twice
Every area of the game got a column on the board, with the current mobile screens along the top row and the proposed landscape wireframes directly underneath. Fifteen areas by the end, from the home screen through to trading.
Stacking them that way did two things. Everyone could see how big the job was, and for any screen you could compare what a player has now with what we planned to replace it with. An empty cell meant that area wasn’t solved yet.
I set three principles on the same board. Keep what players already value, use the new input and the new screen shape instead of working around them, and don’t let the two versions drift apart. Every screen we worked up got reviewed against them.
Laying Out the Home Screen
A monitor doesn’t add room in the middle, it adds width either side, so the question was what should go in the margins.
My first pass was a blocked-out layout with the mobile screen each region replaced pinned next to it and a note on what it had to do: the offers panel auto-scrolling the banner players already knew, the XP rank leading to the levels screen and reward wheel, quests stacked with a See all through to the full list. It also caught work that wasn’t mine to do. Offer artwork built for a portrait banner had to be redrawn for the new aspect ratio, which is a request to Art with a lead time on it.
Closed, the home screen keeps the mobile composition with a thin handle at each edge. Open, the left drawer holds quests, claim now, daily and weekly with their timers, and the right holds achievements against a completion count. Neither moves the centre of the screen.
The drawer shows a summary, and See more opens the full tabbed view of quests, achievements and rewards in one panel over a dimmed board. We built these as clickable prototypes and tested the interactions before anyone wrote code. Detail views and reward moments stay centred and roughly portrait instead of stretching to the monitor width, so the screens mobile players already knew kept their proportions.
Six Ways to Lay Out a Board
The battle screen is the opposite case. Here the middle is the game, so it has to carry the content. Two hands, two sets of resources, a shared table and the controls all have to fit one landscape frame, and each player has to be able to tell which half is theirs.
We drew the board six ways. What changed between them was where the two players sit relative to each other, and whether the ledger and chat stayed as icons or became full side panels: players diagonally opposite, both players along the top, both stacked down the left, and a panelled version of each.
Three of them got attention overlays splitting the board into the two players’ halves. We were checking that a player’s own hand, resources, deck and controls all sat in their half, and that the shared table read as shared.
Designing for Mouse and Keyboard
A cursor is more precise than a thumb, it’s always on screen, it has hover, and it comes with a keyboard attached. I directed the work to use those properly instead of just converting tap targets into click targets.
Search was the clearest case. Picking a favourite card on the phone means scrolling a collection that runs to thousands. On PC the picker opens with a type-to-search field, category rows showing how many of each set you’ve collected, and filter and sort panels beside them, so the same job takes a few keystrokes.
The rest is hover and pressed states on anything interactive, cards that enlarge when you inspect them so they read at monitor distance, and nothing important behind a gesture that only works under a thumb. The extra width also let us show information the phone had to hide: the battle screen keeps a match history down the left, with both players’ stats, a round-by-round breakdown and a jump back to any round.
One Account, Two Devices
Players share one account and one collection across phone and PC, and cross-platform multiplayer puts desktop and mobile players in the same match. Signing in is the riskiest step: get it wrong and you land on an empty collection instead of the one you spent years building.
I mapped the account flow before anything was wireframed, because most of it is edge cases. First boot offers a new player Apple, Google or email sign-up, or Continue as Guest into the FTUE, with linking available from the settings menu afterwards. The failures are the part that matters. If someone tries to link an SSO that’s already attached to another account, we tell them instead of overwriting anything, and they can try a different provider or load that account’s progress. If they do that, we name the guest progress they’re about to lose and make them confirm it.
The mobile game kept shipping while we designed the PC version, so parity was a moving target. The board took those changes as they landed: My Decks leaving the bottom bar for a new Shinies section, then Shinies inheriting the Fusion tab’s layout. Because current and proposed sat side by side, a live update changed a wireframe instead of surfacing during implementation.
What Shipped
Cards, the Universe and Everything launched on Steam on 5 June 2025, free to play, with cross-platform play and the game’s 5,000-plus cards intact. A deck built on a phone opens on a monitor, and the layout holds across all the game’s themed arenas.
The audit board is what I’d use again. Mapping every area twice, current above proposed, gave us a single reference to review against, and it kept working through implementation because the mobile game kept changing underneath it. I set the direction and made the calls, and we worked the detail up against them.