GENSHIN IMPACT UX REDESIGN
ROLES
UX Designer
TOOLS
Figma
Illustrator
Google Slides
LENGTH
3 Weeks
PROJECT CHALLENGES
INVENTORY
Scalability of the screen is low. The more items were added the more unwieldy the screen got. Usability went down as well with more items.
There was no visible way to compare items stats or group them.
No visible way to filter or organize items
Needs a new layout more friendly to mobile platforms.
NEW CHARACTER CUSTOMIZATION FEATURE
Create a new character customization feature as if one didn’t exist.
* This project was created in the Advanced UI/UX Course for Gaming at ELVTR.
** I only concentrated in improving the UX so any artwork shown here is the property of the Genshin Impact Creators unless stated otherwise.
*** The redesigns in this case study were based off of this walkthrough video which may not be the latest version of the game.
OBSERVED ISSUES:
Scalability of the screen is low. The more items were added the more unwieldy the screen got. Usability went down as well with more items.
No visible way to compare items stats or group them.
No visible way to filter or organize items
Needs a new layout more friendly to mobile platforms.
INVENTORY UX REDESIGN | OVERVIEW
ISSUES EXPRESSED BY PLAYERS IN PUBLIC FORUMS:
“As someone who changes my character’s artifacts every single day to make different teams and fulfill different roles, I desperately need the feature to create artifact sets and place them all at once.”
“At least give us the possibility to flag an item as trash when gotten so we can use it to power up other artifacts.”
“Please. Let. Me. Sort. Alphabetically.”
EXPERIENCE VISIONS
Players can organize their inventory however they see fit.
Players can filter their inventory to find the things they require (better discoverability and scannability).
Players can understand the options available and can make strategic decisions about which items to keep or discard.
The layout needs updating so we can have continuity with the design across platforms without impacting usability.
Players can have a more desirable UI art that has an exciting layout which is still functional.
PROJECT SCOPE
1. Inventory needs new layout.
2. Label icons and reorganize information.
3. New & obvious filters.
4. Make discarding options clear to help players strategize.
5. One-click saved equipment loadouts for characters & group artifacts for easier access.
CHANGES & FLOW CHARTS
Change the layout to a more “mobile friendly” one to expand the game to multiple platforms.
On mobile, the current inventory layout places category buttons at the top, making them hard to reach with thumbs. The updated layout moves category buttons to the left side, allowing players to long press and swipe up or down to switch categories.
Reorganized the information by swapping the “materials” category for a “favorites” category and moving the materials to sub-categories.
For Example: On the “Furnishing” category there’s the Furnishing Materials sub-category.
Added a button to favorite items
This adds all items marked to the “Favorites” category which can be sorted and filtered as the rest of the inventory.
Added two “Sorting” options and two “Filter” options to make finding items easier.
The first sorting option sorts items by the chosen characteristic (ex. Alphabetically A-Z). The second sorting option sorts items by any other remaining category as secondary priority under the first.
The two filters can be applied simultaneously with the same priority and along with the sorting options.
Added a “Trash" category with a tool to set filter settings so all items that match those filters are automatically added to the "Trash" category".
Added “Advanced Comparison” feature
The Advanced Comparison feature allows players to compare items in sets to make decisions on which to discard or keep.
Added “Automatic Equipment Set” feature
The Automatic Equipment Set feature allows players to make customized sets of items from their inventory and name them so they can equip characters with the whole set in one click.
WIREFRAMES
This new layout will translate better to other platforms because of the placement of information that one reaches for often.
A layout that thinks about other platforms lets us have continuity in design throughout all platforms.
Sorting options popup after clicking one of the sort filters.
Filter options and sub-options pop up after clicking either filter button.
The filtering pop up has a series of dropdown menus that allow people to select an attribute to filter by.
The trash screen only differs from the Inventory in that it has two unique features (Delete Permanently and Automatic Trash Settings).
Automatic Settings allows players to click certain attributes and see the current saved selection or pick one from the right if none is selected.
The layout shifted in mobile to accommodate for a wider screen ratio.
The categories bar is now within thumb reach which players can press and swipe up and down to control. It also shifted right to avoid the front-facing camera.
The wider screen ratio is helpful because buttons need to be bigger and set wider apart to account for human fingers instead of the more accurate mouse.
MOBILE WIREFRAMES
This pop-up differs from the PC version in size and placement.
Buttons are bigger and set wider apart to accommodate human fingers.
A wider pop up features bigger buttons and condensed options so players could tap with their fingers without blocking or being inconvenienced.
IMPACT
Improvement in order to adapt better to mobile platforms.
It gives the inventory a better UX as the information is organized entirely from left to right so in a console version it would be an L/R shift to go to each section.
LAYOUT CHANGE
Good reviews and player satisfaction makes it easier to sell the game to other platforms.
It will allow players to more easily determine which items to dispense of or use to power up other items.
TRASH CATEGORY WITH AUTO SETTINGS
Allows the flow initially designed to stay the same while giving players what they want.
The time investment is minimal as everything remains the same just in a different place.
INFORMATION REORGANIZATION
It will improve player satisfaction and reviews.
It allows players to quickly group items in one category when playing in smaller screens.
FAVORITE BUTTON
It will improve overall player satisfaction for the inventory screen.
It will allow players to spend more time exploring and enjoying the gameplay and world rather than head down in the inventory.
SORTING & FILTERING
It will let players make smarter and faster decisions allowing them to explore more of the world and quests.
It can make the inventory system clearer and less intimidating to new players.
COMPARISON & GROUPED EQUIPMENT FEATURES
WORK PROCESS
NEW CHARACTER CUSTOMIZATION FEATURE | OVERVIEW
Stakeholders requested a new character customization feature.
My approach was a middle ground between pretending the existing character customization feature doesn’t exist (creating new features) and modifying the existing feature (tweaking for better UX).
PLAYER WANTS:
Customized Character Flow
Players expressed a desire to be able to customize the character flow.
More Character Variety
Players expressed a desire to see more characters in the game.
Likeable Characters
Players expressed a desire to see characters they identify with.
=
INTERPRETATION:
Competitive and social players want more customization to aid play efficiency and uniqueness.
Players want diversity and variety of characters where they can identify and see themselves in them.
Players want to play with a character that is useful for meeting their in-game goals and a character they can root for and be comfortable embodying.
EXPERIENCE VISIONS, GOALS & SUCCESS METRICS
Memorability characters and their abilities.
Straightforward acquisition methods.
USABILITY
Intuitive and fast customization options.
Discoverability of characters and highlights.
SCALABILITY & DISCOVERABILITY
Relatable and engaging characters.
Engaging and appealing characters
Social showcasing of unique characters.
DESIRABILITY
SOLUTIONS
New Organization of Acquired Characters
New Structure for Character Archive
USABILITY & DESIRABILITY
Seven Completely New Edit Features:
Separate “Edit Character” screen
“Customization Sets” feature
Physical edits | Character Controls
VFX & Weapons | Color Scheme.
Audio
SCALABILITY & DISCOVERABILITY
FLOW CHART
The new Edit option includes pre-existing options like gliders and outfits.
It also has seven new options outlined in the Flow Chart, the options are to the left in darker boxes and the sub-options in lighter boxes next to them.
NEW EDIT CHARACTER OPTIONS
The “Physical” edit category allows players to change their character’s skin, haircut and eye color/shape. They can also edit their height, voice pitch and face shape.
PHYSICAL ATTRIBUTES
The Customization Sets feature allows players to create groups of physical attributes with specific settings that they can apply in one go when available to a character.
Similar to the feature I added to inventory to equip characters in one go.
FAST EDITING | CUSTOMIZATION SETS
Character Controls allows players to edit the settings of their controls for specific characters. They can change what each key or button does for their character so they can play more efficiently and better.
They can set a key or key combo for each ability available to the character.
CHARACTER CONTROLS
This option allows players to edit the particle systems and effects that appear when their characters perform actions like attacks.
It also allow to set a highlight color for their weapons that would apply to details like arrow feathers and sword carvings.
VFX & WEAPONS STYLING
Character color scheme is a faster way to edit a character’s looks. Groups of colors (palettes) are available for selection and they apply to outfits and other attributes all at the same time, overriding other settings.
Players can select a palette and tweak each individual color seeing the changes applied live on their character.
FAST EDITING | COLOR SCHEMES
While players can edit voice pitch among the other physical characteristics, with the Audio section they can set their character up with specific catch phrases or sounds for different actions.
EDITABLE AUDIO | CHARACTER SOUNDS
The new character screen is organized by element categories.
Sorting and filter options enable faster search within a category that can be set and will transfer when changing categories.
WIREFRAMES
When players select a character to inspect they have all their regular options plus the Edit feature at the bottom.
The character control section works by clicking / tapping the control and pressing the key or combo of keys they want to set for each.
Color Schemes can be edited by individual colors or selected to be applied to the overall character.
When editing a selected palette players can select individual colors and adjust the color in the color-picker pop up window.
IMPACT & TAKEAWAYS
We can improve player engagement and retention by providing effortless connections with their characters.
By building more customization options, our players can personalize their gameplay which increases long-term engagement and memorability.