Grotto
OVERVIEW
As the UI/UX Designer at Team Growth, I enhanced and iterated on the overall gameplay experience for Grotto, a top-down puzzle farming game designed for PC. Additionally, I worked with the team to develop new features that would be optimally suited to the specific needs of the game's design.
TIMELINE
3-month project
Nov 2022 - Jan 2023
ROLE
UI/UX Designer
User research, UX & UI Design, prototyping & user testing
HIGHLIGHT
In this project, I worked on implementing an intuitive tutorialization. I also worked closely with engineers and designers to develop various interfaces. And with that, we saw significant improvements in the players understanding of the game’s core loop and goals.
some screenshots of iterfaces I worked on
CLICKABLE LINKS
Quick link
Improving FTUE
Improving inventory
The Process
I worked directly with the lead game designer, and team leads (game designers, artists, programmers, and producers) to ensure that my ideas and design solutions improved the user experience and successfully met the project goals.
Improving the FTUE
DEVELOPMENT PROCESS
01. The Problem
-
The existing FTUE (First Time User Experience) does not give players motivation to play while helping them clearly understand the core loop of the game and all of its features.
-
Players are confused about what to do since the interface is not as intuitive and engaging.
-
Too many features became available all at once. it was overwhelming and confusing.
-
The game design is not stable and some content kept constantly changing.
The game's core loop, which is what needed to be taught to the player
The current FTUE
Understanding the problem
an early prototype version of an upgrade screen. It does not fit in with the rest of the UI and confused new player
Upgrade screen
After examining it closely, I realized that one of the main issues was the upgrade screen. The players found it confusing and out of place compared to the other interfaces, as it was not intuitive and didn't follow the same format.
02. What I did
I collaborated closely with the lead game designer and team leads (game designers, artists, programmers, and producers) to establish best practices and create features that would promote long-term player goals, intuitive design, and better engagement. We used a variety of methods, such as user testing, analytics, and customer service feedback, to identify and address problems, iterate on designs, and adjust the game experience based on data.
To make the game more relatable, accessible, and intuitive, I conducted user research and competitive analysis on games with resource management. This helped us to create many new interactions, such as a smart interaction system that automatically selects certain interactions on different priorities, an intuitive
By looking at how other games tutorialized their mechanic, we can see many subtle details as identified in the picture above
popup that came up when the player needed it, and a better sequence of how the game tutorizes its core loop.
Finally, I worked closely with UI artists to create a dynamic and expandable game HUD that would provide players with all the necessary information without cluttering the screen. Through collaboration and iteration, we were able to create a more engaging and enjoyable experience for players.
Research insight
After completing my research, I immediately synthesized the information into a format that was understandable for the team. The resulting insights are as follows:
-
Having visual of basic control at the start of the tutorial is a great idea
-
Using visual means such as contrasting color palettes can help objects of interest pop and stand out.
-
Providing a leading line of some form can guide the player subtly.
-
Exclamation marks can be used to guide the player for quests or important tasks.
-
Implement a way to make interactable objects stand out from uninteractable objects, similar to how Stardew Valley outlines interactable objects, can enhance gameplay experience.
03. Design Goals
The goal is to improve retention, increase player engagement, ensure players understand the game's core loop and features, create a dynamic and expandable HUD that was both intuitive and fun, and ultimately improve the overall experience of the game. By focusing on these goals, I aimed to create a more enjoyable and satisfying experience for players, with the hope of building a stronger and more dedicated player base.
Some of the layout concept I worked on
Choosing the perfect wireframe
While brainstorming various layouts, the team initially selected the layout on the right due to its ample space for narrative and clean display of information. However, as we underwent rescoping, the number of planned power-ups decreased to only four.
Screenshot of the upgrade screen. Art by Apichaya Apichatwong
Solving tedious issue
The next issue on the list is that players lose track of how many items they need to collect in order to progress to the next level. The following diagram represents a potential solution to this issue, which includes a new feature called a "checklist."
One of the diagram I created with the goal of trying to make the player understand how many resource they need
Reapproaching the solution
Upon considering the potential drawbacks of implementing a checklist feature, I decided to approach the issue differently. Instead, I designed a "requirement" popup that would appear before the player enters the next level. I collaborated with a level designer to ensure that the process of viewing this information was not too tedious. This approach would keep the interface clean while still providing the necessary information to the player without handholding them too much.
an early draft of a requirement popup, which was used to solve the problem of the player not knowing the level requirement
Final render of the requirement screen. Art by Apichaya Apichatwong
04. Challenges
Early Stage of the development
I joined the team when the project was in an incubation state, which meant that modifications were prone to change and significant alterations were made that impacted the layout. The core loop of the game was not stable, and it was difficult to get a concrete confirmation on details. As a result, I needed to experiment with several different design options before establishing a concrete style.
Never been done features
I suggested adding several features that our engineer had never implemented before, which resulted in some expected variables, such as a longer implementation time. This also means that the feature may require multiple rounds of bug-proofing before we can consider it complete and move on to the next task.
No FTUE data
To make things even more challenging, there was no data available about the first-time user experience when I began working on the project. As a result, I had to prioritize my time carefully, as we were simultaneously working on other new features.
Problems and solution
One of the first issues I encountered was a significant change in the design that resulted in a major redesign of the interfaces. The piece that was affected the most was the upgrade screen. Luckliy one of the experiemental design I did could support the fewer power up.
Originally, it was decided that there would be ten different upgrades, which turned out to be unfeasible. The number was subsequently reduced to eight and then four upgrades.
The design process from the experiemental design to final render
The second challenge I faced was that the engineers needed time to experiment and implement the features I requested. To address this, I focused on maximizing the efficiency of the process. I formed several spearhead engineering teams to quickly experiment with multiple features. Additionally, I conducted daily stand-up meetings where I shared insights with the entire engineering team. This approach significantly improved our speed in implementing features and helped us gather valuable insights along the way.
Lastly, the challenge of starting to gather FTUE data from scratch presented itself. This required me to invest significant effort in creating a framework for designing. I addressed this issue by closely collaborating with the game designer to establish a proper documentation framework for FTUE. Given that we were simultaneously working on other new features, I had to prioritize my time carefully. From there, I made sure that the data stayed up-to-date with the current design objectives.
05. The results
Following user testing and feedback, we were able to make significant improvements to the game's first-time user experience. Based on the data we received, retention rates for new players increased, and they were no longer getting stuck or confused during tutorials.
In addition to these improvements, we also developed clean and clear documentation for all first-time user experiences in the game. This allowed players to have a better understanding of what to expect and how to navigate the game more efficiently. Overall, our efforts to improve the game's first-time user experience paid off, resulting in a more engaging and enjoyable experience for players.
The design process from the identifying problem to implementing a solution and imprement
Before
After
Comparison between old tutorial sequece and the new one
Improving the inventory
DEVELOPMENT PROCESS
01. The Problem
The game's inventory screen along with other interfaces was inconsistent, lack of information, and confusing. This created a confusing experience for new users and made it difficult for users to focus on the most important features, understand how to utilize the information, and find their desire information.
Old UI layout from when I started working on the project. There are nothing to guide the eye and were too lacking
02. What I did
I began by conducting user research and competitive analysis on other games in the same genre. From there, I created multiple UX flows, wireframes, and layouts to help improve the game's user experience.
To get quick feedback, I worked closely with the QA team to conduct user testing, using the findings to iterate quickly and make adjustments to the game. I also worked with the UI artist to improve the inventory UX and UI, with a focus on making it more personable and providing more positive feedback. These changes helped to make the game more exciting and easier to follow, resulting in a more engaging and enjoyable experience for players.
A quick UI break down of Stardew valley UI
Research insight
After completing my research, I immediately synthesized the information into a format that was understandable for the team. The resulting insights are as follows:
-
Consider chunking information into smaller, easy-to-consume sizes if there is too much to display.
-
Prioritize displaying the most crucial information on the "default" page if there are multiple pages.
-
Use sub-pages for collections or codex entries.
-
Keep the settings plain and practical.
-
Use visual cues, such as greying out, to indicate when certain information is disabled or unavailable.
03. Design Goals
-
The inventory needs to display the player's current resources and how much they can hold
-
The inventory screen should allow the player to plan their resource management
-
The inventory screen should serve as a functional pause screen, housing settings and an exit option
-
The inventory should be used to provide lore and clues on plant usage to the player.
An initial effort on my part to establish a theme involved selecting objects that were commonly associated with the confirmed theme.
An initial effort on my part to establish a theme involved selecting objects that were commonly associated with the confirmed theme.
An initial effort on my part to establish a theme involved selecting objects that were commonly associated with the confirmed theme.
Choosing the perfect theme
As I explored various themes and ideas, I found that the book design aligned with my goal the most. The book design allows for an easy addition of a bookmark as a category indicator, and it opens up possibilities for having other interfaces with a matching book theme. When I discussed this with the artist, they also agreed with my opinion, so we decided to move forward with the book design.
04. Challenges
The most prone-to-change interface
The inventory interface is the most prone to change because it interacts directly with the game, meaning any slight change to the game design could impact the inventory screen in some way. This makes it more susceptible to a complete redesign of the interface if there are significant changes to the game.
Expandable design
As the inventory interface is one of the most critical interfaces in the game, I made the decision to center the design around it. This meant that I needed to design the interface in such a way that it could be expanded across the entire game.
Problem and solution
As mentioned earlier, the inventory interface is highly susceptible to change. During the development process, we went through several design changes that had a significant impact on my design. While I couldn't solve this problem entirely, I found a way to mitigate it. I scheduled a weekly meeting with our design team to share my insights and receive confirmation on which features were solid and would not change anymore. This helped me design the inventory interface around those stable features, reducing the risk of significant redesigns.
To tackle the challenge of creating an expandable design for the inventory interface, I collaborated with our artist to establish a theme voting system. This involved everyone in the team coming up with themes, which my artist teammate and I then thoroughly explored to generate numerous design ideas. This approach allowed us to consider multiple options and select the most suitable one that could adapt to future changes in the game design. The ideas that came from this process ultimately made it into the final version of the inventory interface.
design progression of the inventory
Design decision
To further elaborate on the iteration process, there were significant content cut-offs, which resulted in the player only being able to obtain three types of plants and their respective seeds. Additionally, the player has a limited capacity for carrying plants.
Final UI art of in-game default inventory. Art by Apichaya Apichatwong
05. The results
Our efforts to improve the inventory interface also resulted in a significant improvement of the game's experience. User testing showed that players were able to understand the inventory's core features and functionalities, leading to improved player engagement and retention rates.
We were able to streamline the inventory design, making it easier for players to navigate and manage their resources. These improvements resulted in a more enjoyable and satisfying gameplay experience, as players were able to focus on the game's core mechanics without being bogged down by confusing inventory management.
Project takeaways
As I look back on my time working on Grotto, I feel incredibly proud of what our team accomplished. It was an exciting journey to see the game grow and evolve into the polished experience that it is today. Working alongside such a passionate team was a true joy, and I feel grateful for the opportunity to have learned so much from my colleagues.
One of the key things I learned while working on Grotto was the importance of using visuals to explain abstract concepts. It was a challenge to translate complex ideas into something that players could easily understand, but we worked hard to make it happen. In the end, seeing players engage with the game and enjoy the experience we had created was incredibly rewarding.
Grotto will always hold a special place in my heart, as it represents the culmination of so much hard work, dedication, and creativity. I am grateful to have been a part of such an amazing project and feel excited to see what the future holds for the game.