Deltalight
OVERVIEW
I designed an inventory screen for Deltalight, a mobile game available on IOS, Android, and Windows, while ensuring a consistent user experience across all platforms. I researched best practices, aligned with established UX design principles, and prioritized consistency to enhance the overall success of the game.
TIMELINE
1-month project
Sep 2022
ROLE
UI/UX Designer
User research, UX & UI Design, prototyping & user testing
HIGHLIGHT
In this project, I focused on designing a consistent interface across multiple platforms. I established a unified visual language and responsive layouts. As a result, users experienced seamless interactions and gained a better understanding of the interface's core functionality, regardless of their chosen platform.
Final UI render demonstrates a consistent layout across multiple platforms.
CLICKABLE LINKS
Quick link
Design process
DEVELOPMENT PROCESS
01. Requirement
-
My audience for this game is 14–22-year-old fantasy RPG fans
-
An inventory screen have to contain the following
-
Character tab list with the ability to switch between characters easily
-
Name of the character being equipped
-
Space for a picture or 3D model of the character
-
Slots for equipment
-
Weapon (+attack stat)
-
Head item (+HP stat)
-
Chest item (+defense stat)
-
Foot Item (+speed stat)
-
Accessory (+any stat)
-
-
Each equipment slot needs space for an icon, item name, and stat icon and number
-
Display of Character’s overall stats
In depth look at the challenge
As the requirement are very vague, I have to identify several game design aspect that needed to be address before I progress.
Character tab
In this scenario, implementing a character tab may not be necessary. Instead, I need to devise a means of interaction that enables players to switch between characters effortlessly. A list, pop-up, or tab could all serve this purpose.
Equipment slots
It is typical for games with multiple equipment types to include set bonuses. While I may consider adding this feature if necessary, I must also ensure that each equipment type is distinct enough to differentiate at a glance.
Overall stat
Based on experience, condensing stat screens down to only essential information can be challenging, and the display must be large enough for mobile players. Striking the right balance is critical because an overly dense display can overwhelm the player, creating a significant challenge.
02. What I did
I begin by gaining a thorough understanding of the player's interface preferences. I accomplish this by analyzing existing games and products, as well as interviewing target users to gather additional insights.
Using these insights, I compile a priority list of essential features for my design. With this list, I create several concept blockouts and conduct a second round of research to test my comprehension.
Ultimately, I synthesize all my findings and observations into a comprehensive report that can serve as a guide for future project stages, should I decide to expand the scope.
Research insights
Immediately after getting the set goal, I conducted an investigation into user preferences and behaviors. Through my study, I found that users value interactivity when it serves a clear purpose, and prefer easily digestible content that is simple to scan. Tone and thoughtful presentation are crucial, and users require substantial evidence to back up claims. In addition, users demonstrate high confidence in navigating digital interfaces, and tend to act impulsively while maintaining a strong sense of self-assurance.
I made a research board showing other game's user journey
Full board can be found (Here)
Creating a priority list
Upon gathering information, I realized the necessity of several key features. To prioritize them, I organized the list by focusing on the project prompt, followed by elements supported by multiple research sources. Lastly, I added my own "nice-to-have" considerations for the project.
A project feature road map showing which feature should be prioritized
Full-resolution picture can be found in the Figma board (Here)
03. Design Goals
The design goal is to enhance player retention and engagement by creating an interface that effectively communicates the game's core loop and features. To achieve this, a clean and intuitive inventory should be developed that is dynamic and expandable. Furthermore, trivial usage should be streamlined to eliminate any unnecessary distractions for players. The interface should be consistent between different devices, ensuring that players have a cohesive experience regardless of how they choose to play the game. By incorporating these design elements, players can more rapidly and easily understand the game's mechanics, resulting in a more enjoyable and immersive experience.
Concept layouts
Based on the insights I gathered, I began experimenting with the layout of various interface elements. My aim was to test my understanding of the concept and pave the way for further redesign if needed. To start, I created several low-fidelity blockouts, from which I selected the three best ones to move forward with. I then developed medium-fidelity blockouts, as depicted in the accompanying image. Using these fleshed-out concepts, I conducted another round of user interviews to test the functionality of the interface.
I created a bunch of different layout options for the inventory screen. I ended up going with the more segmented design. This allowed me to give the player quick and easy "at a glance" information.
Issue with the existing design
Following the second round of research, I received feedback that the interfaces may be too small for mobile devices and lack a pleasing layout. Additionally, certain elements were not intuitive to the player regarding their functionality.
At this point, I am faced with two options: to redesign an existing blockout or return to the drawing board and create a new design based on the insights gained from the user feedback.
04. Challenges
Text-based information
Much of the information needed to display is text-based and is relatively hard to look for something specific at a glance. Not only that, the target audience's general archetype tends to ignore a big chunk of text.
Overlapping functionality
The inventory had numerous functionality and needed to function without overlapping or getting in the way of other interactions. This would take several iterations to get it right.
Design blockage
None of my existing designs meet the player's standards. After careful consideration, I concluded that I could not achieve my goal using these designs.
Problem and solution
Despite multiple rounds of brainstorming for a suitable layout, I encountered the problem of having too much text to accommodate. I struggled to devise a design that would effectively house the entire body of text. However, through careful analysis of existing games, I discovered a simple concept that I had not considered on my own - using icons instead of text. Although this solution came with the downside of consuming more space, it allowed me to work around the problem and create a more effective interface.
During my research to solve the text problem, I re-evaluated my design approach by dividing it into achievable and non-achievable components. Surprisingly, I had overlooked the possibility of creating multiple interfaces rather than a single one. As long as I ensured that each interface contained all necessary functionality and was easy to navigate between quickly, I could avoid overcrowding and create a more effective design. With this realization, I was able to overcome the issue of overlapping functionality and I was able to progress with a design for the next iteration.
Revised design based off of a user's feedback
Design decision
To elaborate further on the iteration process, I conducted another round of brainstorming for a suitable layout. From this, I created three distinct designs, and ultimately selected the most promising one to continue with, as seen above. With this step complete, there remains only one final step to take.
05. Polish
Having confirmed the layout, the final step is to create a suitable theme that ensures consistency across all platforms. To achieve this, I began experimenting with colors.
Replicating a theme
I analyzed the color scheme of Overwatch 2 and applied it to my layout. By doing so, I was able to refine the design elements and glean valuable insights that would aid me in developing my own theme.
An experimentation of theming my layout using excisting theme from Overwatch 2
Establishing my own theme
Given my goal of consistency across multiple platforms, I considered an old-school Windows interface as a potential solution due to its ability to be resized without appearing awkward. Additionally, users could segregate the information segment from the interface itself. With this idea in mind, I incorporated the concept into my design theme, resulting in a cohesive and effective layout.
Final deliverable, information modules, and an iconsheet.
Iphone
Ipad
Windows
06. Takeaways
This project was a source of great enjoyment for me, and I was able to glean valuable insights from the class regarding mobile RPG games, including player motivations and preferences. Through the use of user testing, research, and data analysis, I discovered that a small tweak in the UI could have a significant impact on user perceptions of the game. I found that the rapid prototyping schedule enabled me to identify and address issues quickly, leading to a more satisfying user experience.
As part of the UX class, I gained an appreciation for the benefits of rapid iteration and A/B testing. The weekly class sessions were particularly enjoyable for me, as I relished every opportunity to work on this project.