2021 | UI Redesign
CYBERPUNK 2077- MENU UI REDESIGN
A personal project & UX exercise - a UX analysis and reworks of various screens from CD Projekt Red's 2020 FPS RPG title, Cyberpunk 2077. Includes character creation, inventory, and crafting systems.
​
My main focuses for areas of improvement in this exercise were: information hierarchy, consistent UI styling, improved gamepad support & accessibility.
​
Made using Adobe Illustrator.​​
This is in no way affiliated with CD Projekt RED or Mike Pondsmith; it is a personal project.
OVERVIEW OF CURRENT ISSUES
Some general issues I found with the user interface in Cyberpunk 2077:​
​
​Menus use a free cursor navigation system across all platforms.
-
Using a free cursor with gamepad input feels cumbersome and inaccurate when navigating with a thumbstick.
-
It is also a barrier to accessibility - giving players the ability to navigate the game with digital input helps players with mobility issues to play the game.
There is an inconsistent use of colour coding in the UI; to counteract this, I established and kept to some general rules:
-
Red - base UI colour, for general/flavour text.
-
Yellow - a call-to-action: actionable items and important information that can be reacted to.
-
Blue - currently highlighted/active element.
-
Grey - a disabled/inactive state for elements.
A minor issue - but there is also an inconsistency with capitalisation on ​UI elements. I have established and kept to the rules of: all UI will display in all-caps, unless it is text that appears in long strings (e.g. flavour text or descriptive text).
-
For example, item names and stats will display in capitals, item descriptions and modifiers will display in lower-case.
There is a tendency in the Cyberpunk 2077 UI to not have information grouped together clearly, resulting in information sometimes looking as thought they are "floating" in the UI.
-
To provide more clear grouping with information in the UI using proximity and enclosing background shapes and colours, I've added more bordered graphics and backgrounds to UI elements.
-
This helps with the grouping of information and with the readability (by ensuring light-coloured text has dark backgrounds, and vice-versa).
IN-GAME MENU & SUBMENU STRUCTURE REWORK
Menu names on the top bar/ribbon of the in-game menu will always display the current menu name in the middle, with other menus on the left/right sides - I changed this so all the names are in static positions, and the current menu is instead highlighted in blue.
​An example of this can be seen below:​
Original Menu Ribbon
Redesigned Menu Ribbon
Finding information and features in the in-game menu was also difficult - many screens were hidden under sub-menu buttons only accessible from the menu's unnamed "home" screen, and were not accessible through the parent screen the options appeared under. I decided to re-arrange the screen features to make information easier to find:
UX/UI REWORK - CHARACTER CREATION
The character editor screen is encountered when starting a new game in Cyberpunk 2077; functions and contains features typical to other character creation screens.
​
The main issues I found with this screen were:
-
All of the customisation options are in one long list - resulting in a very long list of options to navigate, as there are 40+ features to customise.
-
This can also cause information overload - even after using the character creation system a few times, I found myself accidentally missing some options.​
-
There is no warning presented to the player if they select one of the preset character options and override all of their customisation options.
​
Solutions I have proposed with my reworked mock-ups are:​
-
Separating options into different categories to space them out more and present the player with options in chunks so they can carefully choose their options.
-
Merging the physical attribute and colour choice options together into the same widget when they are relating to the same feature (e.g. eye shape and eye colour) to make more efficient use of space and show a clear connection between the feature and feature colour options.
-
Add a warning pop-up when the player selects one of the preset options, making them aware that choosing to continue would overwrite all of their customisations.
An additional change I would make with this feature would be to make it accessible after starting their game - currently, the player is only presented with this screen and its features once, upon starting a new game.
​
I was surprised to find out I couldn't alter my character's physical appearance further after the initial character creation, as the ability to change the character's physical appearance after initial character customisation is a common feature in many RPGs with a focus on character customisation and roleplay.
​
It felt strange that this feature does not exist in Cyberpunk 2077, considering its cyberpunk setting (a genre with a lot of focus on body modification - players can replace their arms with flaming blades but can't get a haircut!) and the game's emphasis on the character's appearance (despite being a first-person view, players can interact with and pose in mirrors, there is an extensive posing system in the photo mode, there is an emphasis on the character's body in cutscenes and NPC interactions).
​
I would expect players to be able to change their character's physical attributes at a vendor -most likely at one of the "Ripperdoc" vendors in this game, as they are where the player goes to install Cyberware upgrades that add modifiers and new abilities (and they work as surgeons and tattoo artists in the game setting).
Original Menu
Redesigned Menu
UX/UI REWORK - INVENTORY SCREEN
The Inventory screen is used often by players - as expected in an RPG game with heavy emphasis on character and gear customisation. It functions similar to typical inventory screens in games: here is where the player can see an overview of all the items they have in their possession at the moment, and gives them the option to use and equip those
​
I didn't find many issues with this screen, the core changes I made were:
-
Re-arranging how the information is displayed, so there's less overlapping info panels on crucial UI when looking at items in the inventory.
-
Added a "preview" option for clothing, since this is not a feature that exists in the game (players have to equip items to see what they look like).
-
Re-arranged how interactable elements are positioned, to make the screen more user-friendly for players using gamepad input
-
(The game currently only supports free cursor input, for PC and gamepad input - in this theoretical rework, gamepad/D-pad input would be supported).
INVENTORY: MAIN SCREEN
On the main Inventory screen, I kept the player character central in the screen, so there's focus on them - and so I could arrange information and item slots around them in an aesthetically pleasing way. The inventory slots have also now been re-arranged by use: slots on the left are for usable items and weapons, and slots on the right are for cosmetics.
​
I've laid out the elements to support d-pad/digital input when highlighting elements; I have also exposed prompts so it is clearer to the player how they can manipulate their character model view.
Original Menu
Redesigned Menu
INVENTORY: BACKPACK
For the general Backpack screen, I re-arranged the screen to be less visually busy: inventory items have been kept to the right side of the screen, leaving blank space on the left side of the screen for info panels of highlighted items (and for previews of items that have this option available)
​
The option to view previews will replace the currently equipped comparison panel, because there is limited space, and to reduce information overload - it's not necessary at this moment as the player is looking at the visuals of the item, not the stats.
Redesigned Menu (comparison tooltip)
Original Menu
Redesigned Menu (cosmetic preview)
UX/UI REWORK - JOURNAL/PHONE SCREEN
As mentioned above in the overview, I merged the Journal and Messages screens together to create the "Phone" screen - I did this for a few reasons:
-
To make the Messages screen more accessible.
-
(It is only accessible in a hidden sub-menu on the hidden main menu of the in-game menu in the game).
-
To further emphasise the strong connection between Jobs (quests/missions) and the player's Message/Call system.
-
(NPCs frequently contact the player character via their phone before, during and after Jobs - and it's often a necessity to message or call an NPC to complete a Job).
PHONE SCREEN: JOBS
Changes I made to the Jobs screen:
-
Separated out the list of objectives, and added in visibility over the completed objectives.
-
So players have a good summary of where there progress is at for a Job, and what their next steps are - both to give them some information to use to prepare for the Job, and to remind them of what has happened if it has been a while since they progressed in the Job.
-
Added a prompt to open the quest marker on the Map screen - with a focus on the Job's position on the Map.​
-
To help players decide if they want to take up a Job or not - a lot of travelling is done on-foot or through vehicles in this game, with fast-travel points being points in the world the player needs to reach and interact with, rather than points they can select on their Map. As a result, nearby Jobs can be more enticing than ones in areas that are far away from fast-travel stations.​
​
It's not visible in the mockup, but I would also change the way Job information is displayed to the player:
-
Currently, Job information is only displayed when the player highlights a Job​ and presses the "select" button - this displays the information on-screen, but doesn't select the Job as the player's active Job.
-
To select a Job as the active Job, the player has to press the "track objective" prompt that appears when highlighting.
-
This has resulting in many instances during my gameplay experience of highlighting a Job and assuming it was made the active Job, then closing the menu to realise it has not been tracked.
-
Instead, I would have the Job information display when the player highlights the Job, and have the "select" button set the Job as active.
Original Menu
Redesigned Menu
PHONE SCREEN: MESSAGES
Changes I made to the Messages screen:
-
The option to call Contacts.
-
This is necessary to complete and progress multiple main and side Jobs, and is a feature only accessible through the HUD phone UI (a confusing flow as the player can do everything on this screen that they can do on the HUD phone UI, except calling NPCs).​
-
-
Some embellishments to make the UI look more like a phone interface.
-
A clearer notification system:
-
Currently, a "NEW"​ tag will show on the list item for unread messages. "REPLY" will only appear on the individual items in a contact's list of messages when the list is expanded.
-
I've added a "NEW" and "REPLY" tag to the main contact item in the list - so it's visible to player that there are messages they can reply to without expanding a Contact's message list.
-
I also added a phone icon to the contact list items for NPCs that can be called.
-
Original Menu
Redesigned Menu
UX/UI REWORK - FILES SCREEN
For the files screen, I have made some layout and information hierarchy changes; I have merged the Shards, Tarot Cards and Database menus together, to fall under a "FILES" parent page - in the original game, all these sub-pages were hidden and could not be accessed directly through navigating the in-game menu ribbon bar.
​
I have exposed these screens more to make them more accessible - now, players should be able to find all their lore, tutorial and collectible information in one location.
​
For the main "Files" screen page, I chose to display it as options similar to the start-up screen where the player selects their character backstory and body type - both to keep consistency with UI style, and to avoid using sub-menu tabs on this main screen, as they would be used in the Shards, and Database screens.
Proposed Root "Files" Screen
FILES SCREEN: SHARDS
I made some minor changes to the Shards screen, to conform to other general changes to the UI layout and styling I have made.
Original Menu
Redesigned Menu
FILES SCREEN: TAROT CARDS
I only made a minor change to the Tarot screen: instead of infromation appearing on a tooltip when the player hovers over a card with their cursor, it would isntead display on the card itself when highlighted.
-
I made this change because the free cursor would ideally be removed when using gamepad input - and this fits to conform to potential gamepad input.
-
It also stops the information panel from overlapping on top of other Tarot card images - allowing the player to have a full, unobstructed view of their cards.
Original Menu
Redesigned Menu
FILES SCREEN: DATABASE
I made a handful of changes to the Database screen:
-
Re-arranged the categories of the Database screen, as they were unclear and unorganised - because of this re-arrangement, I added another category selection screen, similar to the main Files screen page.
-
Made changes to how information is displayed once it is selected - e.g. with the character information, characters images will be displayed inside a specific graphic's borders. This prevents character bio text from overlapping on top of the character images.
Original Menu
Redesigned Menu
UX/UI REWORK - VENDORS
A big issue I found with the vendor screens is that the player cannot see a preview of how clothing looks on their player character before purchasing clothing items. This means the players has two options for a workaround:
-
Purchase clothing items, equip them in the Inventory screen to see what they look like, then sell them back to the vendor if they are unwanted to gain back a small amount of currency.​
-
Or: save the game before purchasing clothing items, buy them and equip them to see how they look, then reload the save if they are unwanted.​​
Instead of using these hacks, it would be helpful if there was a preview option in the vendor screen when highlighting cosmetic items - allowing players to see how items look before purchasing them. As this is an RPG game, stats modifiers on cosmetic items are important, but cosmetic items can be easily upgraded and modified after purchase - their aesthetics cannot be changed, however.
​
The aesthetics of the player character are an important feature in Cyberpunk 2077: many features have been purposefully implemented into the game to emphasise the importance of the character's appearance, despite the game being from a first-person perspective.
Features such as extensive photo mode options, the ability to look into mirrors and see an interact with the character's reflection, the player's body always being visible and multiple complex, unique body animations in cutscenes and NPC interactions, were all added for this exact purpose.
​
Changes I made to the vendor screen:
-
As noted above, I added a "preview" feature for cosmetic items.
-
I also re-arranged some elements and updated some graphics to fit established aesthetic rules.
-
To reduce issues with navigation (as there are so many elements on-screen at once if the player has a full inventory and is viewing a vendor with an equally full inventory), I added a "switch" toggle between the player's and vendor's inventories - so the player can use LB/RB to swap between them.
Original Menu
Redesigned Menu (comparison tooltip)
Redesigned Menu (default)
Redesigned Menu (cosmetic preview)
UX/UI REWORK - CRAFTING SYSTEM
The Crafting menu is used for both crafting new items and upgrading existing items. I found no major issues with the user flow for this feature, but did think the information hierarchy for both screens could do with some changes to make information easier to parse - as well as updating prompts and layouts to support digital gamepad input.
Original Menu (Crafting)
Original Menu (Upgrades)
Redesigned Menu (Crafting)
Redesigned Menu (Upgrades)