Design Exploration: Simplifying The Game Experience

I work on a product called Castle. On the team I get the opportunity to redesign and implement some of the experiences we have created. This week I got the chance to present an updated game experience. People who download Castle see the game experience when they are playing games or developing games.



The game experience is an important part of the platform! Developers will spend most of their time on it when they are debugging, chatting with collaborators and building their project. On the other hand, players will want to do anything and everything they want. So the challenge is making both players and developers happy.





State of affairs

The current state of the game experience is a little chaotic. Everyone will experience this interface when they open a game:





Developers need to see development logs for their project. When they click DEVELOP, several new sections appear:







This screen can get even more complex. Castle games can integrate with a feature called tools-ui. This feature was produced by one of our leads: Nikhilesh Sigatapu. It enables developers on Castle to have an additional interface to the configuration of their games. There is also an API for writing long form with markdown.







As a team, we felt the game experience had to improve. After some discussion we came to the following assertions:



• The whole interface feels overwhelming.

• A lot of the experience has the same visual language, and that makes the experience difficult to comprehend.

• It is not clear which parts of the UIs are for user interaction.

• Everything feels like debugging.

• It is hard to find the controls you need in the moment.

• There is a lot the player has to deal with that does not concern them.

• Managing chat, tools-ui, and all of the development toolbars is complex.





Small redesign

Here are a set of mocks for what I think the next game experience could look like. I am excited to share them with you today:



Note: I am using a Safari window for these screenshots, if you could kindly ignore the + symbol that would be great ;)







I wanted to carefully consider the goals of both the player and the developer within this screen space. Elements that have more spacing around them tend to be perceived as higher in a hierarchy than elements with less space around them. Elements with less space signal that they are subordinate to the other elements.



Within that understanding, for the game experience, I want to assert that playing the game is the most important. Most of the screen elements all obtain meaning after the user has interacted with the game. I believe everything else should intentionally belong lower in the visual hierarchy. But controls are really important too! A control is an element on the screen a user can engage with that will modify the environment. This experience will not function without easy access to controls when you need them. Because controls that are near each other are seen as being meaningfully related, I have tried to organize them in a logical way.



• The volume control is alone, but there is plenty of space for other controls in the future such as a microphone control or video control.

• Taking a screenshot is alone, but creating posts is a crucial social part of the Castle experience. This control will fit nicely with other features in the future such as:

  • publishing to a channel

  • sharing the game page

  • starting a party

• Viewing source and developer mode controls are close together because they relate with the notion of tinkering.

• Minimize screen and theater mode controls are close together because these actions manipulate the screen size.

• Going back/going home and the CPU meter are close together because they are related to leaving the game experience.





With this redesign comes some improvements to the spacing and element sizing of tools-ui. The reduced spacing scale will help create better relationships between each of the items in the visual hierarchy. A simple h2 can help denote the groups of associated information and remove the need for a divider.



The reduced font-size allows for the sidebar to receive a reduction in width, creating more space for the game (the most important thing). If the player or developers want the width of the sidebar to increase in size, they can drag the right border.



Here is another example of the new spacing and header hierarchy on the sidebar:







Developer mode

I wanted the developer tools to have a prominent location on the screen. But I did not want the developer tools to obstruct or get in the way of the gaming experience.





I think this approach is more simplified!



• Instead of a location at bottom of the screen, moving the logs to the right creates an interface that could be ported to smaller devices.

• Header groups differentiate between both client and server logs.

• Both are visible at the same time, making it easier to debug syncing problems.

• Action controls such as clear and sync are easy to discover.

• The project URL had too much white space surrounding it before. The new location for the URL moves it to the top of the visual hierarchy on the sidebar.

• Log screens are scrollable and both will scroll to the bottom as new logs arrive.

For fun, I also think it will be easy to bring all of these elements to the phone.





🚀



Neat, so what is Castle again?

Do you want to come play Castle games? You totally can join in on the fun. Our client is available for download at our website.



Castle is a platform that believes games are better with other people. We believe games of all sizes have value and we believe that everyone deserves to make games. The best creation tools foster self-expression and promote experimentation and newness. Check out our manifesto if you want to learn more.



Please let me know what you think. Thanks for your time! 🙏