Design Exploration: Game Explorer

I had a ton of fun designing a website, a desktop client for playing games, and 2d game editor with plugin system, so I felt excited when I was asked to do another exploration. The inspiration came from an awesome idea Charlie Cheever and Jason Riggs had called Scratcher.

This time, I wanted to make sure the discovery features are first class and obvious in the user experience. If you are viewing this for the first time, be sure to check the previous design exploration for context on ghost-player.



New Assumptions

The team made it clear to have a new set of assumptions since some of the requirements have changed. Our team wants to make it possible for:



  • Anyone can learn more about the game they are playing.
  • Anyone can add a game to a list that can be shared.
  • Anyone can easily find instructions for a game.
  • Anyone should be easily able to search and jump to other games.
  • Anyone should be able to see signals about how popular a game is.
  • It should be easier to jump into other things.



The Client

In the previous mocks the client, I aimed to create an experience that would take a very short amount of time to understand what was happening if you had already self-hosted a Lua game. In the mocks I'm about to show you, my hope is that the new features don't obstruct the usability.



I have been using Andrew Gleeson's game Shrubnaut in my mocks because:



  • The game is awesome and worth sharing on the internet.

  • It was made in 6 days, which is incredible. It also represents the type of content we want to see shared inside of our ghost-player.



The internet has also emboldened us in our beliefs:



IMO the hardest step for aspiring (commercial) indie game developers is learning to finish games consistently and efficiently - to move past game jams and prototypes but also avoid getting mired in a single project for years without end. It's a tiny sweet spot that's hard to hit. - @mossmouth

For the first mock, when a user is playing a game like Shrubnaut with the ghost-client, here is what they will see:





  • There is a new option for top scores in the right corner of the client.
  • There is a new option for showing info in the top right corner of the client.
  • I have changed dashboard to history and bookmarks.
  • The favorite icon remains for an easy way to track a game you enjoy playing.



Here is what happens when you click "Show Top Scores":





  • Scores ranked from top to most.
  • Avatar and full names lead to the profiles of the users.
  • Scores are real time, whenever a event is sent to update score.



For those who are technical, it is fun to imagine the code for this. We would provide an client library for sending requests to our servers:



import GhostClient from 'ghost-client'
GhostClient.updateScore({ username: 'username', id: 'id-of-game', score: 1000});



On our end, the receiving code can be as simple as:



const event = new Event('ghost-update-score');
window.addEventListener('ghost-update-score', ({ id, username, score }) => { GameScores .byId(id) .updateScore({ username, score });});



Showing Custom Game Information

When a user clicks on show info, they are presented with details about the game and a couple of actions they can take:



  • Logos should be customizable with font-family, font files that are supported inside of the client, or using an uploaded image as a logo.
  • Author names can take the user to their profile.
  • Rich text can be used for the game description.
  • Supported player counts, as well as instructions are provided.
  • People can add the game to their bookmarks/favorites and view them at any time.
  • People can add the games to playlists that they have made.
  • Clicking previous game will play the last game you played.
  • Clicking next random game will select a game in the list that is not the game you are currently playing.



All of these UI elements appear when a url route such as ghost://game.builders/andrew-gleeson/shrubnaut/main.lua is associated with an entity in our database. We will need to come up with a clever way to ensure that only the author of a game can claim it.



Representing Your Game's Brand

I'm making the bet that game developers usually have to spend a lot of time to make a game they are really proud of sharing. Therefore I think we should put the effort to make sure the information interface is easy to customize. Ensuring this guarantees that creators will be happier and feel that their game is presented in a decent way compared to other platforms.



Below is a preview of an indie game called Unsighted by Studio Pixel Punk:





Simple customizations such as a custom font-family or a specific hex color code can change the appearance.



Here are a few more examples:





The Iron Oath by Curious Panda.





Death's Gambit by Adult Swim Games.





Flamberge by Michael Savage Benoist





Crawl by Powerhoof





Authenticated Users

The ghost-player allows anyone to authenticate into their accounts to have a more personalized experience. In our example I've authenticated as Baxter, a dog who plays games. When you authenticate in the ghost-player interface, there are a couple of options that are revealed:





  • Games that you have favorited appear in the top right.
  • Users can see the last 10 games they've played. If they click history they can go into their entire history and history settings.
  • I have not decided if playlists should appear in bookmarks.
  • On the left side you have access to your user profile, if you click on your avatar your games examples, tutorials, and playlists appear.
  • The Browse button takes you to a window where you can search games.
  • The bottom left is where the playlists you have created are located.



Search Everything

In order to ensure content uploaded to our servers can be discovered, ghost-player needs an easy way to browse content. Here is a preview of what a search window looks like:





  • Users still have access to their authenticated menus.

  • The most relevant playlists appear on the right.

  • Games appear in the middle, and can be filtered by the column category.

  • Any game or playlist that has been uploaded or created by a user is searchable.



User Created Playlists

Playlists are a type of creation that both players and creators can make to curate all of the games they like. They are designed to be shared and played by your friends and strangers on social media. Each playlist will get a public web page that can be shared in any browser.



Lets take a look at what happens when you click on a playlist icon on the left side of the screen. In the example below, a user has clicked on IGN Casual:





  • Games are organized by name, play count, playlist count, author, tools used to make the game, and the author's notes. Clicking on any of the individual sections filters the playlist.
  • The author's notes can be fairly long to properly represent the game and also improve discoverability in search.
  • Playlists can be customized with a custom icon and background-color.
  • Playlists can be cloned by any user and added to their profiles. Cloning makes a copy of the playlist's items and allows the user who cloned it to add more games to their copy.
  • Start playing allows people to play games in the playlist, beginning with a random game in the list.



This is what another Playlist could look like:







Untitled Games

There are going to be a ton of cases where games will be played on ghost-player but they haven't been added to our database yet. Therefore we need to account for this in the user experience.



Recently Nikhilesh Sigatapu created a game for Ludum Dare. There will be a good chance that when ghost-player is launched, he will not have added the game to our database yet.



When he plays his own game, this is what he may see:





  • There won't be any predefined styles for the game info, once he claims this url he will be able to apply customizations.
  • He must be authenticated in order to create a profile for his game.
  • We will need to think of a way to verify that it is his game. Maybe there is a way to add something to the network header?



End Notes

My hypothesis is that we implement this experience, consumers will:



  • Have fun curating playlists of games for their friends.
  • Discover fun games to play during game jams and creative workshops.
  • Want to participate in making games.
  • Want to play games with other people socially, especially for games that support multiple players.



And that could lead to really great opportunities for us. Please let me know what you think! Thank you Expo for the opportunity to do this.



References

A notable reference for this exploration is the previous design exploration. I recommend reading it if you are curious.

Hey! My name is Jim and I love to build websites. You can learn more about me here.

icon twitter
icon facebook-official

To reply you need to sign in.