top of page
Mobile Version Design
Independent Project
Overview
This project aims to port an existing game and produce its corresponding UI and redesigned control scheme to a different platform. The game <Detroit: Become Human> received high popularity at the time it was released on PC and PS4 platforms, however, players can't play the game on a more portable device, such as a smartphone. Therefore, this project ports the game from PC to the smartphone platform with new designs on the game HUD and menu.
It is a story-based game that allows players to select the storyline they would like to follow according to own preference, therefore, tasks must be clear and informative enough for players to understand each situation and make decisions within a relatively short amount of time. The less time the player spends on controls to complete the task, the more effective it is for them to focus on the storyline. Every scene is tied up orderly leads from one to another, it not only allows the player to interact and participate in the story but also offers the trait of watching a movie. If the controls take up too much space on the screen, it could also result in distracting the player’s attention from the prioritized main screen to messy controls. Moreover, because it is published only on PC and PS4 platforms, which are not touch screens, the only way to imitate how humans move and react in the real world is through a mouse and keypads with the mouse being the control of sight and keypads being actions. Therefore, the design for the mobile version must be intuitive and comprehensive enough for players to adapt quickly.
Game Mechanics & UI
Space
The game has a 3D space mechanic that allows players to explore the in-game world and interact with NPCs and objects that mimic the real world. Interactive open world for players to explore around and understand the context of the game based on personal interests.
Rules
The game has multiple storylines based on different options they have made throughout the entire game. Each decision of a chapter ties to a consequence in the later stages that leads to specific story endings. Once a certain number of options have been made that tie to the same storyline, the following options will also be tied to that specific storyline to be comprehensive.
Actions
Players are expected to take certain actions to complete specific tasks that include both basic and strategic actions. For example, characters in the game are expected to walk, run, jump, sneak, turn around, pick up items, use items, enter, and exit as basic actions.
User Interface
The user interface of the game includes essential information at the right time and salience to help the player proceed to the next needed action. The enlarged texts tell the player of the next step to help them successfully proceed to the planned scenes. The progress bar gives the player a hint of where they are during a crime scene recovery process
Major Differences
Visuals
Movement Control
In the PC platform, players need to tab “WASD” on the keypad as directions to move around, considering that the keypad is not accessible and realistic on the smartphone screen, the directional control is designed into a circle-shaped button at the bottom left corner to move characters.
It is consistent for most of the scenes except for tasks that do not require moving the character. The player only needs to press and hold the central inner circle to move within the scope of the larger circle which moving forward the circle represents the character also moving forward.
Sight Control
The PC platform uses the mouse to move around as a sight adjustment, and due to the limitation of the smartphone, the function of the mouse played in the PC platform is replaced by the right hand of the player.
To be able to adjust the sight of the scene to gain full visualizations, the player could use their right hand (usually right thumb) to adjust eyesight while the left hand (usually left thumb) controls the movement.
Insight Interaction
PC platform allows users to use the right click of the mouse to retrieve insight into the objects that the player can interact with, while at the same time, the character cannot make any movements but observe and adjust the sight to explore objects that could be interacted with a yellow box.
When the player is in the insight mode, the movement controls will disappear because it’s useless in these situations and the player only needs to press and hold the button at the bottom right to enter and adjust eyesight. When the player releases the insight button, the character will leave the insight mode and the movement controls will appear on the screen again for the player to continue to tasks.
Objects Pick Up
When picking up objects on the screen, the PC platform uses the mouse to make movements to call for certain actions. Therefore, when the player goes near the object that can interact with as same PC, an informative button will prompt out to inform the player to move with their finger accordingly.
For example, when the player is near the book, the button “look at” will prompt with a hint on how to interact to look at the book. As shown above, the player could use either one of their fingers to slide left on the screen to complete the action.
Observation Control
The “eye” icon here represents entering observe mode where the player can observe the environment from another perspective just as watching a movie.
The original design on PC is through pressing “Q” on the keypad, but with the differences on the smartphone, the player can directly tab the eye icon on where it shows up to enter observe mode. The observation process automatically ends as the game pre-designed.
Light Environment
What is different here is when the player is in a light environment, the controls designed in the above section may not be accessible enough for the larger group of players to clearly distinguish the controls and the environment.
Therefore, to improve what was not considered in the PC platform, a light mode of buttons is designed to better differentiate the buttons and the environment to help the player easily identify where the buttons are and what actions need to be taken.
bottom of page