Queen's Blood Mobile Port
See the prototype
Sector
Video games
Timeline
~2 weeks
Tools
Figma, Mural
Team
Solo project
Game Overview
Queen's Blood is a mini-game that was newly introduced in the second instalment of FFVII's re-release trilogy: FFVII Rebirth. In this 2D person-vs.-computer collectible card game (CCG), players strategize how to play a deck of point-valued cards onto a contained grid to accumulate a higher sum than their opponent.
Key mechanics
Cost
Each card costs 1-3 pawns to play. Each position indicates what cards can be placed there based on its pawn count, or rank.
Power
Each card has its own value i.e. points that is added to the lane (row) it is placed within. The sum of points across the lanes determines the winner.
Core gameplay
The core gameplay loop is made up of two stages that involve the points collection system:
Choose to play or pass
At the start of the match, the player’s hand is randomized to display five cards from their selected deck, at which point they can select any to reshuffle into the queue. A card is added to their hand at the beginning of their turn. At this stage, they can either choose a playable card to place on the board, or skip their turn.
Screen when a match starts: The player can select cards to mullligan
Screen on player turn: The player can either select a card to play, or pass
To play, place a card on the board
Screen when hovering over positions
Fans of FFVII responded to Queen's Blood with abundant demand for its independent release. With the rising popularity of mobile card games¹, including GWENT – similarly introduced as a console mini-game for The Witcher 3 – I wanted to explore the case for a potential mobile port, and how that might be achieved.
Secondary Research
In adapting a console mini-game to mobile screens, there are several considerations to be aware of. Not only is the screen size significantly smaller, but input controls are entirely different. For example, mobile interactions do not involve a hover state.
My research uncovered three areas of mobile game design and I set out to investigate how other digital CCGs accommodate them:
Limiting clutter so that each UI element could be easily visible and readable²
Implementing touch gestures to mimic familiar inputs across console or PC controls³
Confirming player input by providing feedback⁴
Questions
What are the dimensions required for elements to be visible across devices?
What other mobile CCGs have existed in other formats before mobile?
What touch gestures do these games adopt for intuitive gameplay controls?
How do these games offer feedback to player input?
I also looked at reviews for these games, searching for any feedback on the design decisions outlined above and how players responded to them during gameplay. I found that MTG: Arena seemed to mitigate small text on the cards by integrating a long-press control to enlarge a card's detail. However, a player shared in doing so, their finger would obstruct the reading pane. GWENT players appear to similarly struggle with small text, as well as difficulty navigating information.
Challenges
While referencing other CCGs was a helpful exercise in identifying potential UI patterns I could use, I still encountered a few challenges that I expect are common for any console-to-mobile port.
Controls
Converting controller inputs to touch UI elements
My approach: My first task was to list all the actions a user could take. Then, I prioritized each of these - this work allowed me to determine the size of elements relative to their importance to the player. Finally, I ideated on how I could visually represent these actions. Exiting a game, for example, is often represented by an icon that can be easily recognized. With this icon in mind, I could accurately dedicate space for it.
Previewing a card's ability with no 'hover' state
My approach: One way to mimic the 'hover' effect was to require players to drag a card to the board, holding it over a position to preview its effect upon placing it there. I anticipated potential difficulty to 1) maintain the hold for as long as the player needed to contemplate, and 2) implement a logical recovery system if the player were to release accidentally. Instead, I opted for a tap-only mechanism that offered guidance through a tutorial mode (mandatory for first matches, and accessible at any point during the match and future ones).
Design
Defining the "safe" area
My approach: As soon as I started designing in Figma, I quickly realized that the preset frames for mobile devices do not represent the entire area on which design can live. For example, I had to accommodate the 'notch' on iPhones, which leaves even less space for important UI elements. Before establishing my gridlines, I overlayed an iPhone model from Apple's design system and created my margins against it.
Translating card details to a smaller size
My approach: I first created a hierarchy of how important each card component was. A card with all information was necessary - for this view, I designed around the size of the name being 16pt. However, there were cases where I needed the card to be smaller to fit other elements, such as the play area i.e. the game board. Using the established hierarchy, I experimented with sizing as certain elements were no longer contextually relevant. I ended up with two more views: a 'mini' view for cards placed on the board, and a 'list' view for deck building.
Wireframes
Below, I have designed the screens seen during Queen's Blood's core gameplay for iOS (specifically using iPhone 16 dimensions, but responsive to other mobile devices).
The following screens are made up of five main components:
Play area
Player hand
Player action
Tutorial access
Game exit
The largest difference from console is the horizontal interpretation of the cards. This was a design pattern I identified in Hearthstone and MTG: Arena that does not compromise the height of the board. I decided to place this on the right hand of the screen so that right-handed players did not have to cover their screen to select a card.
To maximize accessibility, I opted to avoid complex touch gestures and relied on tap controls. For example, tapping a card from the player hand would enlarge the card to display its ability, as well as convey the positions it can be placed on.
Turn starts: Cards that cannot be played remain in the player's hand, but is displayed at a lower opacity. If the player holds the skip button, a colour-change animation will convey confirmation feedback.
Card selected: The selected card now replaces the view of the hand to instead display its abilities. On the board, the yellow outline distinguishes which positions the card can be played on.
Card previewed: By tapping any of the yellow-outlined positions, the player can preview its effect on positions tinted with blue. They can still select other positions to see how the effect varies.
Card placed: Tapping the position the card is currently placed in will confirm its play and end the player's turn. At the start of their next turn, a new card will be added to their hand.
Games User Research (GUR) Plan
Of course, my designs are only a starting point. I expect that these designs will still need further iteration, which can be informed by conducting games user research. Below, I have outlined a plan that researchers could pursue to measure how these designs enable Queen's Blood players to complete a match.
Research goals
Is it easy for players to learn and use the controls after completing the tutorial?
Successful if: Player completes their intended action immediately after closing each tutorial screen
Can players easily select and place a card in the position they want?
Successful if: When hand exceeds more than 5 cards, player can select the card they expect to play within 15s
Methods
This research should require participants to complete at least one match, which may take up to 10 minutes depending on their familiarity with Queen's Blood.
Think-aloud gameplay
At the beginning of the research session, researchers should ask the participant to vocalize their thoughts out loud as they navigate across screens. They can explain what this may look like: sharing their immediate reactions to what they see, what they intend to do next, or whether an interaction behaved as expected. The participant should continue this exercise for the entirety of their gameplay, with the researcher gently reminding them of the instructions after extended periods of silence.
Post-gameplay interview
Following the match, the researcher should engage in a semi-structured interview with the participant with the goal of clarifying any thoughts that were shared during their gameplay. They may start with general questions about their overall impressions, "How did you feel about that experience?" before moving onto questions specifically around their interactions with the tutorial and core loop.
Some sample questions:
What did you think about the tutorial?
Did your impression of the game change as you played?
At any point, were you unsure of what to do next? What did you do?
Was there anything about the game you would like to change?
Recruitment and inclusion criteria
Because this is a Final Fantasy game that I am proposing be decontextualized out of the Rebirth game world, I believe that any player - whether they have played Rebirth before or not - could participate in this research. I would target participants who have either:
Completed a Queen's Blood match through FFVII Rebirth, or
Have not played Queen's Blood before, but regularly play other collectible card games, whether on console, PC, or mobile
The screening questions would include:
Have you ever played Queen's Blood as a mini-game in FFVII Rebirth?
Have you ever played collectible card games e.g. Magic the Gathering, Hearthstone, Shadowverse?
a. If yes, how often do you play CCGs?
b. If yes, what device do you primarily play CCGs on?